Přeskočit na obsah
Zpět na portfolio
WebZážitkový webHryEventZnačka

Squeeze!

Arkádový jednostránkový web pro první tlačítkový pub kvíz v Česku — se třemi minihrami hratelnými přímo v prohlížeči.

Klient

Squeeze

Rok

2026

Moje cena

od 35 000 Kč

Tržní cena (agentura)

od 80 000 Kč

Čistý čas práce

4 dny

Doba u agentury

4 týdny

squeeze-web-tau.vercel.app
Hero sekce webu Squeeze

0

hratelné minihry

0 kB

stažených zvuků

0

vlastních komponent

150 ms

nejkratší možný stisk buzzeru

Zadání

S čím klient přišel

Squeeze stojí na tom, co se nedá popsat ani vyfotit — na rychlosti, napětí a okamžiku, kdy tým praští do buzzeru dřív než ostatní. Značka měla od studia Artbureau hotový logomanuál i tiskoviny, ale žádný web, který by adrenalin přenesl na obrazovku. A web musel prodat značku ještě předtím, než se rozjely první termíny — aniž by sliboval něco, co zatím neexistuje.

Řešení

Co jsem postavil

Web, který produkt nepopisuje, ale nechá si ho vyzkoušet. Otevírá arkádová obrazovka „press any key“, pak scroll odvypráví příběh s fotorealistickým buzzerem složeným ze dvou vrstev 3D renderu — takže se kopule opravdu zamáčkne. Uprostřed stránky černá arkádová sekce se třemi minihrami. Registrace je rozdělená podle tří cílových skupin a poctivě přiznává, že veřejné přihlašování ještě neběží.

Filmová sekce s buzzerem
Arkádová sekce s minihrami
Finále filmové sekce
Sekce eventů

Co web umí

  • Arkádová vstupní obrazovka ve stylu herního automatu
  • Filmová sekce řízená scrollem — 3D buzzer se otáčí, přibližuje a zmáčkne
  • Tři hratelné minihry: reflexní duel, rychlopalba a mačkací výzva na čas
  • Interaktivní buzzer reagující na pohyb myši, stisk, zvuk i konfety
  • Registrace zvlášť pro hráče, moderátory a hospody
  • Přehled měst s kartami coming soon a sběrem zájmu na lokalitu
  • Navigace, která sama přepíná barvu loga podle tmavosti sekce pod ní
  • Kompletní bezbariérový režim — web funguje i s vypnutými animacemi

Detaily, které dělají rozdíl

  • Buzzer poskládaný ze dvou vrstev renderu, takže se opravdu zamáčkne — ne jen zvětší
  • Tři minihry přímo na landing page: z prezentace se stává ukázka produktu
  • Všechny zvuky se skládají v reálném čase, web nestáhne jediný audio soubor
  • Scroll sekvence z 61 renderů — vyzkoušená, změřená a nakonec nahrazená lehčím dvouvrstvým řešením
  • Konami kód spustí kvízový režim, v konzoli prohlížeče čeká ASCII vzkaz
  • Hravé alternativní tvary písmen zapnuté přes OpenType — přesně podle logomanuálu

Technologie

Next.js 16React 19TypeScriptTailwind CSS 4Framer MotionWeb Audio APICanvas APIVercel

Chcete něco podobného?

Řekněte mi, co potřebujete. Do 24 hodin se ozvu s návrhem řešení, cenou a termínem.

Nezávazná poptávka

Další projekty

IRIS pro Instinkt Reality a Renta365, 2026.

IRIS

Systém · 6 měsíců

Kancelář, která prodává nemovitosti i spravuje nájmy, chtěla přestat vyplňovat smlouvy ručně a párovat platby po jedné. Za půl roku z toho vznikl jeden systém — od prvního zájemce přes smlouvu a předpisy nájemného až po portál, kde se nájemník zeptá AI asistenta.

automatických testů
9 156
řádků kódu aplikace
112 162
tabulek v databázi
57
šablon smluv a dokumentů
38
Celá případovka
Porajťák pro Porajt Pub, 2026.

Porajťák

Systém · 6 týdnů

Bistro u rybníka fungovalo na papíře a v hlavě provozní. Postavil jsem jednu platformu, která obsluhuje hosta, brigádníka i účetní — a majiteli dává přehled v reálném čase odkudkoli.

obrazovek systému
37
řádků vlastního kódu
35 361
automatických testů
199
vysvětlená variabilita denní tržby
R² 0,65
Celá případovka