AI Brand Identity Platform
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.
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.
Podsumowanie
Ten projekt pokazuje, że świadome nieużywanie czegoś jest równie istotną decyzją techniczną co wybór biblioteki — architektura islands sprawdza się tu nie jako buzzword, ale jako odpowiedź na konkretny problem wydajnościowy.
Twój biznes może być
moją kolejną realizacją
Umów bezpłatną konsultację i sprawdźmy wspólnie, co mogę dla Ciebie zrobić.
Bezpłatna konsultacja, bez zobowiązań