CN All projects
Polski
Let's talk

Flex Fiesta 2027

One day, eleven bands, one website.

I built a website for the Flex Fiesta 2027 festival, which was hard to find online. It's an unofficial showcase of the event, included in my portfolio with the organizers' permission.

My portfolio was missing a project about an event where motion and typography play the lead. So I made a poster in the browser: a giant headline, an interactive ASCII circle pit in the hero, a countdown to the club's doors opening and a line-up that slams onto the screen as you scroll. All of that motion can be switched off, and the site still works, with tickets one click away.

The Flex Fiesta hero: a black background, a giant FLEX headline in cream and FIESTA in acid yellow, the date 22.05 on the right, behind the letters a ring of ASCII characters lit up by a wave after a click, on the left a short description in Czech and a Koupit vstupenky (Buy tickets) button
A personal, unofficial project. The hero on the live site on October 14, 2026, just after a click in the ASCII pit. I show the project with the festival organizers' permission.
Role
Design and build
Time
One day
Tools
Astro, GSAP, Lenis, Vercel
Status
Personal project, with the organizers' permission flex-fiesta-concept.vercel.app

Starting point

I started with a gap, not with an effect.

Flex Fiesta is a beatdown hardcore festival at Cross Club in Prague, on Saturday, May 22, 2027: eleven bands and one room. The organizers, the PRGBD crew, sold tickets through GoOut and their own shop, and posted announcements on Instagram and Facebook. The festival had no website: flexfiesta.com is a parked domain, and prgbd.com is a shop.

Tickets

GoOut and their own shop

A Czech ticketing platform and the organizers' shop, PRGBD Store.

News

Instagram and Facebook

Announcements on the @nfnc_beatdown and /nfncbeatdown profiles.

Website

None

A domain parking page: flexfiesta.com is parked free, courtesy of GoDaddy.com
The festival's domain on October 14, 2026: a parking page instead of a website.

I chose the event against four criteria:

  1. 01

    A real edition between November 2026 and September 2027.

  2. 02

    No website of its own.

  3. 03

    A niche.

  4. 04

    Public contact details for the organizers.

At first, the first criterion was “a weak website”.

I dropped it after looking at the candidates in the browser: they had fresh, good websites, so judging from a description alone had been off the mark. What was left were events that simply lack a website, and Flex Fiesta was one of them.

Direction

I took the look from the scene, not from event websites.

Beatdown is hardcore at its heaviest: slow, crushing, built on the breakdown. That's why I didn't look for a model among pretty event websites. In the moodboard I chose the “Brutal Poster” direction: heavy, raw, poster-like, like the scene itself.

  1. 01

    Color

    Acid yellow #e6ff00 on black #0a0a0a gives maximum contrast.

  2. 02

    Typefaces

    Anton, a narrow, heavy poster face, carries the headings. Space Mono turns the text into a flyer or a terminal and provides the characters for the ASCII. I host both typefaces locally.

  3. 03

    No sound, no photos in the hero

    I left out sound so the site wouldn't take anyone by surprise, and photos in the hero, because the ASCII replaces them.

  4. 04

    Signature moments

    At first I chose two: the countdown and the line-up slam. In the second round I added the ASCII pit in the hero and a rotating 3D tower in the venue section. Typography and ASCII are the visual language of the whole site.

The Flex Fiesta countdown section: a huge number 219 in acid yellow set in Anton, next to it the word DNÍ (days), a clock reading 08H 53M 09S and a sentence in Czech about Cross Club's doors opening
Countdown One number in the accent color, Anton across the full width. The counter is live: the screenshot from October 14, 2026 shows 219 days.

Motion and weight

Heavy graphics, light website.

The hero is a single WebGL shader: a ring of characters spins around an empty center like a circle pit, a click sends out a shockwave, and the cursor pushes the crowd away. The tower in the “Den akce” (event day) section is a second scene in the shader, rotated by dragging with a mouse or a finger. The site builds the characters for both scenes on the fly from a Space Mono atlas.

Hero

ASCII circle pit

A click in the hero sends a wave through the ring of characters. Five seconds from my click-through recording of the site.
Line-up

Slam and a band photo

The cursor moves over the names, and the band photo follows it. The photo under a CC BY-SA license shows the author's credit.
Den akce

A tower you turn with a finger

A directions map built by a script from OpenStreetMap data, and an ASCII tower rotated by dragging.

I wanted all that weight not to cost usability.

  1. 01

    One animation clock drives the scrolling and all the effects, instead of several competing with each other.

  2. 02

    prefers-reduced-motion turns off decorative motion. Scrolling becomes native, the text stays still, the countdown keeps running because it's content, and the ticket buttons are always within reach.

  3. 03

    The directions map is a static SVG built by a script from OpenStreetMap data, with no external tiles to load.

  4. 04

    The site has no trackers and no forms.

First screen
190 KB
The document, the script and six font files, compressed.
Script
151 KB
Uncompressed. Compressed, 58 KB goes over the wire.
With photos
1.2 MB
Eight band photos load in the background, when the browser is idle.
Trackers and forms
0
The site collects nothing about its visitors.

I measured the weight of the live site on October 14, 2026, on a first visit, with no browser cache.

The same site without motion

This is what the whole site looks like when the system asks for reduced motion. Scroll the frame: all the content is there, the countdown shows the number of days, and the ticket buttons are where they always are.

Enlarge frame
The whole Flex Fiesta site with motion turned off, from the top: the hero with the FLEX FIESTA headline, date bands, the countdown, a line-up of eleven bands, the event day with the map and the tower, a yellow tickets section with two sellers, and the footer

I used AI as a tool, not an oracle.

I wrote the code with the help of Claude Code: Astro, the shaders, the translation dictionary. The choice of event, the criteria, the visual direction, the signature moments, the rules toward the organizers and the review of every version in the browser were mine. After the first launch, I came back once more with mobile fixes.

Tickets and consent

Tickets by link, not by sale.

There are two official places to buy: GoOut (925 CZK) and the organizers' shop, PRGBD Store (€35). The site shows both, explains the difference and sells nothing itself. Every button opens the seller in a new tab.

That follows from the project's status. The organizers don't update this site, so I marked the prices, line-up and dates “as of October 13, 2026”, with a note that the seller's information always takes precedence.

The yellow tickets section: on the left the GoOut card, CZK 925, the event's official page on the Czech platform, a Koupit na GoOut button; on the right PRGBD Store, 35 euros, the organizers' e-shop, a Koupit v PRGBD Store button; below: prices as of October 13, 2026, the seller's information always applies
The tickets section The two official places to buy side by side, with the price and the difference explained in one sentence. Below them, the date the prices are valid for.

Result

What works, and what I haven't checked.

Works

The site is live at flex-fiesta-concept.vercel.app, in Czech at / and in English at /en/. I checked it at widths of 1440 and 390 px: no horizontal scrolling and no console errors.

Not checked

The Czech copy hasn't been proofread by a native speaker, and Czech isn't my language. I also have no outcome I could call a result: the site has no traffic to measure, because it's deliberately not indexed, and nobody maintains it. The evidence is the craft and the organizers' permission.

The hero, the line-up and the event day at a width of 390 px, October 14, 2026. I designed the mobile version on equal terms with the desktop one.

Takeaway

Look first, judge second.

My first criterion for choosing the event only fell apart in the browser, because from a description every website looked worse than it was.

An effect doesn't have to cost usability. The site has heavy graphics, yet the first screen weighs about 190 KB, the motion can be switched off, and tickets are always within reach.

A project without a brief needs rules agreed up front. I showed the finished result, named its status, limited the risk for the other side (noindex, takedown on request) and asked for one thing. The reply came within a day.


The last case study

All projects

SensoBaza, Czarodziejskie Smyczki, TuMedytuj, Booking and Flex Fiesta on one page.

Back to the home page

Contact

Let's talk.

I'm looking for my first job as a UX/UI and Product Designer. I'm available right away.