Aether Studio: AI Brand Identity
Landing page, który pokazuje się, zanim klient zdąży wyjść
To projekt demonstracyjny, nie wdrożenie u klienta. Zbudowałem go, żeby pokazać ten mechanizm w działaniu.
W skrócie
Dla kogo
Firmy płacące za reklamy, które tracą ludzi, zanim strona zdąży się wyświetlić.
Problem
Typowy landing page wysyła do przeglądarki komplet kodu, nawet jeśli odwiedzający przeczyta tylko pierwszy ekran. Na starszym telefonie i słabszym zasięgu to różnica między obejrzeniem oferty a zamknięciem karty.
Co to zmienia
Strona wysyła najpierw sam tekst i grafikę, a interaktywne fragmenty dociąga dopiero wtedy, gdy użytkownik do nich dojedzie. Pierwszy ekran pojawia się od razu.
Landing page, który pokazuje się, zanim klient zdąży wyjść
Standardowy landing page dla produktu SaaS-owego opiera się na jednym frameworku, który wysyła do przeglądarki cały bundle JS, niezależnie od tego, czy użytkownik dotrze do interaktywnych sekcji. Aether Studio powstało jako odpowiedź na inne pytanie: co jeśli interaktywność jest tylko tam, gdzie faktycznie potrzebna?
Aplikacja symuluje działanie studia AI generującego systemy identyfikacji wizualnej, od brandingu premium po kampanie. Użytkownik może wpisać brief marki, wybrać jeden z czterech presetów branżowych i w kilka sekund otrzymać kompletny wynik: nazwę, tagline, paletę pięciu kolorów z wartościami HEX, dobór typografii i koncepcję logomarki.
Co z tego wynika dla Twojej firmy
Jeśli puszczasz kampanię na landing page, ten projekt pokazuje różnicę między stroną, która wygląda dobrze na Twoim laptopie, a stroną, która działa na telefonie klienta w autobusie. Za kliknięcie płacisz tak samo w obu przypadkach, więc każdy, kto nie doczekał, jest wydatkiem bez zwrotu.
DLA ZAINTERESOWANYCH TECHNICZNIE Na czym to zbudowałem i dlaczego akurat tak. Kliknij, żeby rozwinąć.
Stack technologiczny
Astro 4 (output: 'static')
Framework generuje czysty HTML bez żadnego runtime JS w domyślnej warstwie. Strona jest w pełni renderowalna bez JavaScriptu, wyspy dokładają JS tylko do swoich fragmentów DOM.
Islands Architecture z client:visible
PromptDemo (React) i FAQAccordion (Vue) hydrowane dopiero gdy element wchodzi w viewport. IntersectionObserver pod spodem. Zero bytów JS z tych wysp nie trafia do przeglądarki przy pierwszym załadowaniu.
TypeScript w trybie strict
Union type Phase = 'idle' | 'loading' | 'done' oraz interface BrandResult z 7 typowanymi polami eliminują całą klasę błędów związanych z niezainicjowanym stanem.
GSAP 3.12 (Timeline + ScrollTrigger + Draggable)
Trzy różne zastosowania: kinematyczny reveal nagłówka hero, stagger na kartach Workflow, oraz Draggable z inertia:true do poziomej galerii.
React 18 + Vue 3
React z useCallback na funkcji generate zapobiega zbędnym re-renderom. Vue Composition API z <Transition> do animacji akordeonu bez biblioteki animacji.
Tailwind CSS z customowym design systemem
Namespace aether.* z 18 nazwanymi tokenami, trzy stosy typograficzne. Glassmorphism z dyscypliną: .g1 (blur 4px), .g2 (blur 14px), .g3 (blur 24px).
Najciekawsze rozwiązania techniczne
Scroll-throttling przez requestAnimationFrame z flagą ticking
Parallax orbów i perspektywiczny obrót bento canvas używają wzorca if (!ticking) { requestAnimationFrame(...); ticking = true; } z { passive: true }. Eliminuje layout thrashing bez zewnętrznej biblioteki.
Wieloetapowy loader z progress barem
Generator w PromptDemo.tsx symuluje pipeline AI przez sekwencję await z setTimeout. Każdy etap zmienia stage (0–2), napędzając jednocześnie listę kroków, progress bar i statusy.
Bento grid z trzema responsywnymi breakpointami
grid-template-columns: repeat(7, 1fr) z grid-column: span N. Trzy breakpointy przepinają grid na 4- i 2-kolumnowy układ. Każda karta ma data-depth jako mnożnik parallaxu.
Twoja firma może być
moim kolejnym projektem
Opowiedz mi o swojej firmie, a powiem, który z tych mechanizmów miałby u Ciebie sens, a który byłby wydatkiem bez pokrycia.
Powiem też, czego nie warto u Ciebie robić