RIFT
A component library of 100 specimens, presented on a mobile-first interactive canvas. Every component in the four library modules — controls, navigation, data and feedback — inherits the same token set and one optical material: a machined rim, a recessed surface and reflected light that follows the pointer. The public demo is browsable, so every state described here can be inspected directly.
Project facts
- Role
- Interface design and implementation, including the material system.
- Timeline
- October 2026 · Independent study
- Team
- Solo project · 1 developer
The Challenge
Most component showcases prove visual style only. The useful question is whether the same tokens survive contact with sliders, switches, dialogs, forms, navigation and empty states, in two themes, without an animation library or a remote dependency. The same surface also has to work as a loose desktop canvas and as a naturally scrolling mobile page.
Key decision
Build one shared material in CSS and let every specimen inherit it, rather than styling components one by one or reaching for WebGL.
Approach
React 19 and TypeScript on Vite. A shared token layer drives colours, dimensions and motion values, while the rim is layered CSS backgrounds with a masked highlight and inset shadows. Pointer movement writes CSS variables onto the element instead of re-rendering React, so illumination costs no render work. Native elements carry the interaction model: buttons, inputs, radio groups, range sliders and dialog.showModal with Escape dismissal and focus restoration. The 72 newest specimens live in four independent modules that own their stylesheets and register through one index, so the canvas, filters and board geometry derive from a single list. Ambient audio is synthesised locally with the Web Audio API, and the material studio exports the current preset as JSON.
Key Highlights
- 100 specimens across five collections, all drawn from one token set.
- Edge illumination follows the pointer through CSS variables rather than React state.
- Four finishes — Muted Prism, Obsidian, Smoke and Frost — switch the whole surface at once.
- Dark and light themes are applied before React renders, with no flash of the wrong theme.
- Component search on Cmd/Ctrl + K, favourites in local storage and hash links to individual specimens.
- prefers-reduced-motion and the in-app motion switch stay authoritative for every expressive effect.
Architecture
- React 19 and TypeScript, compiled by Vite into a static bundle.
- Shared token, primitive and material stylesheets consumed by every specimen.
- CSS-only optical material: layered backgrounds, a masked highlight and inset shadows.
- Web Audio API for the ambient player, with no remote recordings.
- Self-hosted variable fonts and no third-party runtime requests.
Verification
- TypeScript strict check and the production build pass.
- Browser checks at 320×850, 390×844, 768×1024 and 1440×1000 found no page or specimen horizontal overflow.
- The 100-specimen pass rendered 100 unique components at 1440, 390 and 320 px with zero console errors and no document overflow in any category.
- Interaction probes covered form validation, category filters, favourite persistence, keyboard search, modal dismissal and focus restoration.
- The demo is public at juszczyk.codes/rift, so every state described here can be inspected directly.
Current limitations
- Components are not published to npm yet; package exports and consumer documentation still need to be finalised. The source is MIT-licensed.
- Verification is manual browser probing, not an automated end-to-end suite.
- No Safari, physical-device, complete accessibility audit or field Core Web Vitals measurement was performed.
- Audio and preset features depend on browser APIs, so behaviour can differ between browsers.
Outcome
A working, inspectable study of one material across many components: a single token layer, two themes and 100 specimens that share the same edge treatment. It now also serves as the design system for further work.
Inside the product
