Flex Fiesta 2027
Jeden dzień, jedenaście kapel, jedna strona.
Zbudowałem stronę dla festiwalu Flex Fiesta 2027, którego ciężko było znaleźć w internecie. Projekt powstał jako nieoficjalna wizytówka wydarzenia, pokazana w portfolio za zgodą i aprobatą organizatorów.
W portfolio brakowało mi wydarzenia i projektu, w którym ruch oraz typografia grają główną rolę. Zrobiłem więc plakat w przeglądarce: gigantyczny napis, interaktywny ASCII circle pit w hero, odliczanie do drzwi klubu i line-up, który uderza w ekran przy przewijaniu. Cały ten ruch da się wyłączyć, a strona nadal działa i bilety są o jedno kliknięcie.
- Rola
- Projekt i budowa
- Czas
- Jeden dzień
- Warsztat
- Astro, GSAP, Lenis, Vercel
- Status
- Projekt własny, za zgodą organizatorów flex-fiesta-concept.vercel.app
Punkt wyjścia
Zacząłem od luki, nie od efektu.
Flex Fiesta to festiwal beatdown hardcore w praskim Cross Clubie, w sobotę 22 maja 2027, jedenaście kapel i jedna sala. Organizatorzy, ekipa PRGBD, sprzedawali bilety przez GoOut i własny sklep, a wiadomości trzymali na Instagramie i Facebooku. Strony festiwalu nie było: flexfiesta.com to parking domeny, a prgbd.com to sklep.
GoOut i własny sklep
Czeska platforma biletowa i sklep organizatorów, PRGBD Store.
Instagram i Facebook
Ogłoszenia na profilach @nfnc_beatdown i /nfncbeatdown.
Brak
Wydarzenie wybierałem według kryteriów:
- 01
Prawdziwa edycja między listopadem 2026 a wrześniem 2027.
- 02
Brak własnej strony.
- 03
Nisza.
- 04
Publiczny kontakt do organizatorów.
Pierwszym kryterium było „słaba strona”.
Odrzuciłem je po obejrzeniu kandydatów w przeglądarce: mieli świeże, dobre strony, więc ocena po samym opisie była nietrafna. Zostały wydarzenia, którym strony po prostu brakuje, a Flex Fiesta był jednym z nich.
Kierunek
Wygląd wziąłem ze sceny, nie ze stron eventowych.
Beatdown to hardcore w najcięższej postaci: wolny, hutny, zbudowany na breakdownie. Dlatego nie szukałem wzoru wśród ładnych stron eventowych. W moodboardzie wybrałem kierunek „Brutal Poster”, który pasuje do tej sceny: ciężki, surowy, plakatowy.
-
01
Kolor
Kwaśna żółć
#e6ff00na czerni#0a0a0adaje maksymalny kontrast. -
02
Kroje
Anton, wąski i ciężki krój plakatowy, niesie nagłówki. Space Mono robi z tekstu ulotkę albo terminal i daje znaki do ASCII. Oba kroje hostuję lokalnie.
-
03
Bez dźwięku, bez zdjęć w hero
Zrezygnowałem z dźwięku, żeby strona nikogo nie zaskakiwała, i ze zdjęć w hero, bo zastępuje je ASCII.
-
04
Momenty sygnaturowe
Na początku wybrałem dwa: odliczanie i line-up slam. W drugiej rundzie dołożyłem ASCII pit w hero i obracającą się wieżę 3D w sekcji o miejscu. Typografia i ASCII są językiem wizualnym całej strony.
Ruch i waga
Ciężka grafika, lekka strona.
Hero to jeden shader WebGL: pierścień znaków wiruje wokół pustego środka jak circle pit, kliknięcie wysyła falę uderzeniową, a kursor wypycha tłum. Wieża w sekcji „Den akce” to druga scena w shaderze, obracana przeciągnięciem myszą lub palcem. Znaki do obu scen budowane są w trakcie działania strony z atlasu Space Mono.
ASCII circle pit
Slam i zdjęcie zespołu
Wieża obracana palcem
Chciałem, żeby ten ciężar nie kosztował użyteczności.
- 01
Jeden zegar animacji napędza przewijanie i wszystkie efekty, zamiast kilku, które ze sobą konkurują.
- 02
prefers-reduced-motionwyłącza dekoracyjny ruch. Przewijanie staje się natywne, tekst stoi, odliczanie nadal działa, bo to treść, a przyciski biletów są zawsze osiągalne. - 03
Mapa dojazdu to statyczny SVG zbudowany skryptem z danych OpenStreetMap, bez ładowania zewnętrznych kafelków.
- 04
Strona nie ma trackerów ani formularzy.
- Pierwszy ekran
- 190 KB
- Dokument, skrypt i sześć plików fontów, po kompresji.
- Skrypt
- 151 KB
- Bez kompresji. Po kompresji przesyła się 58 KB.
- Ze zdjęciami
- 1,2 MB
- Osiem zdjęć zespołów dochodzi w tle, w czasie bezczynności.
- Trackery i formularze
- 0
- Strona niczego o odwiedzających nie zbiera.
Zmierzyłem wagę żywej strony 14.10.2026, przy pierwszym wejściu, bez pamięci podręcznej przeglądarki.
Ta sama strona bez ruchu
Tak wygląda cała strona, kiedy system prosi o ograniczenie ruchu. Przewiń kadr: treść stoi w całości, odliczanie pokazuje liczbę dni, a przyciski biletów są tam, gdzie zawsze.
Powiększ kadr
Używałem AI jako narzędzia, nie wyroczni.
Kod pisałem z pomocą Claude Code: Astro, shadery, słownik tłumaczeń. Wybór wydarzenia, kryteria, kierunek wizualny, momenty sygnaturowe, zasady wobec organizatorów i ocena każdej wersji w przeglądarce były moje. Po pierwszym wdrożeniu wróciłem jeszcze z poprawkami mobilnymi.
Bilety i zgoda
Bilety linkiem, nie sprzedażą.
Są dwa oficjalne miejsca zakupu: GoOut (925 CZK) i sklep organizatorów PRGBD Store (35 €). Strona pokazuje oba, opisuje różnicę i sama niczego nie sprzedaje. Każdy przycisk otwiera sprzedawcę w nowej karcie.
To decyzja z powodu statusu projektu. Nikt po stronie organizatorów strony nie aktualizuje, więc ceny, line-up i daty podpisałem „na dzień 13.10.2026”, z dopiskiem, że zawsze obowiązują dane sprzedawcy.
-
Zasady, zanim napisałem
Organizatorom napisałem dopiero po wdrożeniu, żeby od razu było co pokazać. Wcześniej przyjąłem zasady:
- strona jest oznaczona jako nieoficjalna,
- ma
noindex, - nie ma na niej logo ani grafik organizatorów,
- bilety prowadzą tylko do oficjalnych sprzedawców,
- na pierwszą prośbę ją zdejmę.
-
Jedna prośba w dwóch językach
W mailu po angielsku i czesku, z planszą podglądu i czterdziestosekundowym nagraniem przeklikania, poprosiłem o jedną rzecz: zgodę na pokazanie strony w portfolio jako mojego konceptu. W zamian zaproponowałem oddanie jej za darmo, jako statycznej strony do postawienia gdziekolwiek.
Plansza, którą dołączyłem do maila. Odliczanie pokazuje na niej 220 dni, bo powstała 13.10.2026. -
Odpowiedź w ciągu dnia
Odpowiedź przyszła w ciągu jednego dnia. Organizatorzy pochwalili stronę i zgodzili się na portfolio, ale nie mają zasobów na prowadzenie drugiej strony festiwalu i zostają przy swoich social mediach. Nie dopytywałem o nic więcej.
-
Status został na stronie
Strona zostaje nieoficjalnym konceptem, a stopka mówi, że jest pokazana za zgodą organizatorów, i odsyła do ich Instagramu po bilety i wiadomości.
Stopka żywej strony po zgodzie, kolumna „O této stránce”.
Zdjęcia zespołów pokazuję za zgodą. Przy zdjęciu na licencji CC BY-SA strona pokazuje podpis autora.
Rezultat
Co działa, a czego nie sprawdziłem.
Strona stoi pod adresem
flex-fiesta-concept.vercel.app,
po czesku pod /, po angielsku pod /en/. Sprawdziłem ją przy szerokościach
1440 i 390 px: bez poziomego przewijania i bez błędów w konsoli.
Czeskie teksty nie przeszły korekty native speakera, a czeski nie jest moim językiem. Nie mam też wyniku, który mógłbym nazwać rezultatem: strona nie ma ruchu do zmierzenia, bo celowo jest nieindeksowana, i nikt jej nie utrzymuje. Dowodem jest warsztat i zgoda organizatorów.
Hero, line-up i dzień akcji przy szerokości 390 px, 14.10.2026. Wersję mobilną projektowałem na równi z desktopem.
Wniosek
Najpierw obejrzeć, potem oceniać.
Pierwsze kryterium wyboru wydarzenia padło dopiero w przeglądarce, bo z opisu każda strona wyglądała na gorszą, niż była.
Efekt nie musi kosztować użyteczności. Strona ma ciężką grafikę, a pierwszy ekran waży około 190 KB, ruch da się wyłączyć, a bilety są zawsze osiągalne.
Projekt bez zlecenia potrzebuje zasad ustalonych z góry. Pokazałem gotowy efekt,
nazwałem jego status, ograniczyłem ryzyko dla drugiej strony (noindex, zdjęcie na
prośbę) i poprosiłem o jedną rzecz. Odpowiedź przyszła w jeden dzień.