Case study
MATTER
An interactive laboratory of three experimental materials. Physics, light and sound reveal their properties through movement, touch and scrolling.
- Type
- Interactive website · 3D & WebGL
- Year
- 2026
- Layers
- Interface & design, Applications & platforms
- Stack
- React, TypeScript, Vite, Three.js, WebGL 2, GLSL, Lenis, Web Audio API
Problem
Create a self-initiated Fieldmoth project that lets people experience the properties of fictional materials through a screen. Each sample needed a distinct character: glass recovers its shape, metallic fabric responds to a magnetic field, and gel retains light. Bring expressive visuals, intuitive interaction and a coherent story together.
Approach
- Developed the laboratory concept and visual language: a dark studio setting, bold typography and precise specimen labels.
- Created three materials with distinct behaviours: elastic glass, metallic fabric and gel that retains light.
- Built custom deformation physics and GLSL shaders for refraction, anisotropic highlights and emission.
- Connected scrolling to object motion, camera movement and transitions, then added synthesised sound and generative music.
- Adapted the scenes for touch input, added quality tiers and supported reduced-motion preferences.
Layers this work touched
- Interface & design
- Applications & platforms
What it demonstrates
Built and launched a website where visitors can stretch glass, gather fabric into folds and draw with light inside gel. The three materials form a continuous story with a live specimen archive. The project demonstrates Fieldmoth’s capabilities in art direction, interaction design and 3D development for the web.
