RIFT
Biblioteka komponentów ze 100 elementami, pokazana na interaktywnym canvasie w podejściu mobile-first. Wszystkie komponenty czterech modułów biblioteki — kontrolki, nawigacja, dane i informacja zwrotna — dziedziczą jeden zestaw tokenów i jeden materiał optyczny: frezowaną krawędź, wgłębioną powierzchnię i światło podążające za kursorem. Demo jest publiczne, więc każdy opisany tu stan można sprawdzić na żywo.
Informacje o projekcie
- Rola
- Projekt interfejsu i implementacja, wraz z systemem materiału.
- Okres
- Październik 2026 · Niezależne studium
- Zespół
- Projekt samodzielny · 1 developer
Wyzwanie
Większość prezentacji komponentów dowodzi tylko stylu wizualnego. Ciekawsze pytanie brzmi, czy te same tokeny wytrzymają kontakt z suwakami, przełącznikami, oknami dialogowymi, formularzami, nawigacją i stanami pustymi — w dwóch motywach, bez biblioteki animacji i bez zewnętrznych zależności. Ta sama powierzchnia musi też działać jako swobodny canvas na desktopie i jako naturalnie przewijana strona na telefonie.
Kluczowa decyzja
Zbudować jeden wspólny materiał w CSS i pozwolić, by każdy element go dziedziczył — zamiast stylować komponenty pojedynczo albo sięgać po WebGL.
Podejście
React 19 i TypeScript na Vite. Wspólna warstwa tokenów steruje kolorami, wymiarami i wartościami ruchu, a krawędź to warstwowe tła CSS z maskowanym rozbłyskiem i cieniami wewnętrznymi. Ruch kursora zapisuje zmienne CSS na elemencie zamiast ponownego renderowania Reacta, więc podświetlenie nie kosztuje pracy renderera. Nativne elementy niosą model interakcji: przyciski, pola, grupy radio, suwaki oraz dialog.showModal z zamykaniem klawiszem Escape i przywracaniem fokusu. Najnowsze 72 elementy mieszkają w czterech niezależnych modułach z własnymi arkuszami stylów, rejestrowanych przez jeden indeks — dzięki temu canvas, filtry i geometria tablicy wynikają z jednej listy. Dźwięk otoczenia jest syntezowany lokalnie przez Web Audio API, a material studio eksportuje aktualny preset do JSON.
Kluczowe elementy
- 100 elementów w pięciu kolekcjach, wszystkie z jednego zestawu tokenów.
- Podświetlenie krawędzi podąża za kursorem przez zmienne CSS, bez stanu Reacta.
- Cztery wykończenia — Muted Prism, Obsidian, Smoke i Frost — przełączają całą powierzchnię naraz.
- Tryb ciemny i jasny nakładane przed pierwszym renderem Reacta, bez mignięcia złego motywu.
- Szukanie komponentów pod Cmd/Ctrl + K, ulubione w localStorage i linki hash do pojedynczych elementów.
- prefers-reduced-motion i przełącznik ruchu w aplikacji pozostają nadrzędne dla każdego efektu.
Architektura
- React 19 i TypeScript, kompilowane przez Vite do statycznej paczki.
- Wspólne arkusze tokenów, primitywów i materiału używane przez każdy element.
- Materiał optyczny wyłącznie w CSS: warstwowe tła, maskowany rozbłysk i cienie wewnętrzne.
- Web Audio API dla odtwarzacza otoczenia, bez zdalnych nagrań.
- Samodzielnie hostowane fonty zmienne i brak zapytań do zewnętrznych CDN.
Weryfikacja
- TypeScript w trybie strict i produkcyjny build przechodzą.
- Sprawdzenie w przeglądarce przy 320×850, 390×844, 768×1024 i 1440×1000 nie wykazało poziomego przewijania strony ani elementów.
- Przejście na 100 elementów wyrenderowało 100 unikalnych komponentów przy 1440, 390 i 320 px, bez błędów w konsoli i bez przewijania strony w żadnej kategorii.
- Próby interakcji objęły walidację formularza, filtry kategorii, zapis ulubionych, szukanie z klawiatury, zamykanie okna i przywracanie fokusu.
- Demo jest publiczne pod juszczyk.codes/rift, więc każdy opisany stan można sprawdzić bezpośrednio.
Obecne ograniczenia
- Komponenty nie są jeszcze opublikowane w npm; eksporty pakietu i dokumentacja dla odbiorców są do domknięcia. Kod jest dostępny na licencji MIT.
- Weryfikacja to ręczne testy w przeglądarce, a nie automatyczny zestaw end-to-end.
- Nie wykonano testów w Safari, na fizycznych urządzeniach, pełnego audytu dostępności ani pomiarów Core Web Vitals w warunkach polowych.
- Funkcje audio i presetów zależą od API przeglądarki, więc zachowanie może się różnić między przeglądarkami.
Rezultat
Działające i możliwe do obejrzenia studium jednego materiału w wielu komponentach: jedna warstwa tokenów, dwa motywy i 100 elementów dzielących to samo wykończenie krawędzi. Służy teraz także jako design system do dalszej pracy.
Wewnątrz produktu
