I am particularily proud of this website that I developed for Stellschrauben e.V. in Leipzig. I could implement and play with a whole range of interactive web technologies, such as 3D material simulations, 360-degree video, interactive animations and generative digital textures. I was lucky to collaborate with designer Arne Winter, hence the slick graphic design and user interface.
Sustainable materials – digitally configurable
In this age of energy and resource transition, the question arises: how raw can raw materials still be in the future? How will regional waste materials become the raw materials of tomorrow? And how can these residual and waste materials be made attractive to designers?
We used a wide array of web-based technologies to make the visual, haptic-tactile and functional qualities of regional (residual) materials digitally experienceable.
Context
The necessary resource transition is much more than a technical challenge – it also requires cultural and social change. Which materials will shape our everyday lives in the future? Which (material) aesthetics will we have to say goodbye to? And which new haptic and visual impressions will we have to get used to?
Stellschrauben e.V. from Leipzig is researching these questions, operating at the interface between design, research and the regenerative economy.
The ‘future raw’ project shows how waste materials from regional industries can be made attractive to designers. Digital tools open up new perspectives: 3D scans and prints create the transition from physical to digital – and back again. 360° images provide insight into the locations where this is happening, while profiles and material flows show how residual materials are embedded in material flows. A ‘material mixer’ offers a glimpse of future configurations of residual materials.
Material Inspector UX/UI
Each material consists of a story with different chapters. By scrolling horizontally, the materials can be compared directly with each other. Responsive design: We have designed a custom layout for mobile screens, which simplifies navigation in small spaces.
Animations
For the animations of the material flows, we animated SVGs with Lottie. This keeps the graphics nice and sharp.
Creative Coding
How can the appearance of a material be simulated digitally? We used GLSL, a shader language, to create digital textures that can be manipulated interactively.
Technologies used
- Astro
- React
- GLSL – for generative and interactive textures
- Three.js – for 3D
- Lottie – for animations
