Tesorra Racing
Strona zespołu wyścigowego, przez którą jedzie się torem z pyłu – od driftu po linię startu.
2026 · koncept · projekt, assety, kod, wdrożenie
W skrócie
Problem
Strony zespołów wyścigowych to zwykle aktualności, kalendarz i sklep w szablonie. Chciałem sprawdzić, czy strona może dać poczucie prędkości i jazdy, zanim ktokolwiek przeczyta pierwsze zdanie.
Rozwiązanie
Fikcyjny zespół z trzema dyscyplinami: drift, formuła i motocykle. Strona główna to jeden przejazd po krętym torze z pyłu, z przystankiem przy każdym pojeździe. Wokół tego strony kierowców, archiwum kasków i sklep z merchem.
Moja rola
Wszystko: koncepcja, marka i wordmark, kierunek artystyczny zdjęć i produktów, silnik grafiki, frontend, wdrożenie.
Wyzwanie
Dojść do poziomu najlepszych stron z cząsteczkami: ostry, gęsty pył zamiast mgiełki, płynny przejazd kamery bez szarpnięć przy przewijaniu i pojazdy, które da się rozpoznać, a nie świecące plamy. Do tego zdjęcia ludzi i produktów, które wyglądają jak z prawdziwego reportażu, a nie z generatora.
Najciekawsze rozwiązania
01Tor z pyłu prowadzony przewijaniem
Kamera jedzie po krzywej przez pięć przystanków: drift, formuła, motocykl, sklep i linia startu. Między nimi przyspiesza i przechyla się w zakrętach, przy pojeździe hamuje. Kolor toru, terenu i paska płynnie przechodzi w kolor dyscypliny.
02Pojazdy z setek tysięcy drobinek
Modele 3D zamieniłem na chmury punktów, które silnik zagęszcza na karcie graficznej. Gęsty pył prześwietla się jak światło, a kursor rozpryskuje go jak piasek, który z bezwładnością wraca na miejsce. Całość liczy się w Web Workerze, więc przewijanie zostaje płynne.
03Sklep w tym samym świecie
Produkty unoszą się w przestrzeni nad pyłem, a zmiana kategorii zmienia kolor sceny. Na stronie napoju wybór smaku przebarwia całe tło. Dla klawiatury i telefonu jest widok listy.
04Przepustka do padoku zamiast potwierdzenia
Koszyk nazywa się BOX, a dodanie produktu ogłasza komunikat radiowy „Box, box”. Zamówienie testowe kończy się przepustką do padoku z numerem i kodem kreskowym, którą można zapisać. Nic nie jest płatne ani wysyłane.
Assety
Markę i wszystkie obrazy przygotowałem sam: wordmark jako wektor, malowania pojazdów w stylu japońskiego driftu, kierowców z twarzami spójnymi w każdym ujęciu, reportaż z nocnego padoku, kaski z historią każdego malowania i merch wycięty do unoszącego się sklepu.
Start 
Moto 
Start wyścigu 
Zespół 
Archiwum kasków 
Menu
Technologie
Next.js · TypeScript · WebGL2 · Web Worker · Tailwind · Lenis · Zustand · Zod · Vitest · Playwright · Vercel
Liczby
- 98Lighthouse wydajność (desktop)
- 700kdrobinek w scenie
- 60 fpsprzejazdu na typowym laptopie
- 5przystanków na torze
- 3kierowców z archiwum kasków
- 16produktów w sklepie
- własny silnik cząsteczek bez bibliotek 3D
Czego się nauczyłem
Że efekt „wow” nie bierze się z liczby drobinek, tylko z tego, jak są narysowane i jak rusza się kamera. Mniej, ale ostrzej, i jeden wspólny rytm klatek. I że świat z cząsteczek ożywa dopiero wtedy, gdy obok stoją prawdziwi ludzie: zdjęcia kierowców zrobiły dla tej strony tyle samo co silnik.