Organic Wine Additives Visualization

This React application provides a dynamic visualization of organic wine additives available per the Institut Oenologique de Champagne, allowing users to interactively explore various additive categories. The app employs a combination of React hooks and the Matter.js physics engine to animate and simulate the movement of "additives," each representing a different product within the selected category. As users select or deselect categories, the app dynamically adds or removes these visual elements from the canvas. The use of Matter.js for physics simulation ensures that the visualization feels natural and interesting, with each additive's behavior on the canvas being influenced by the underlying physics model. Full information on each additive is available by clicking the small card added to the canvas.

View the Demo below or visit organic-additive-viz.vercel.app for the full visualization.

• Built with React and TypeScript
• Physics-based animations using Matter.js
• Data sourced from Institut Oenologique de Champagne
• Responsive design for various screen sizes
• Interactive elements for exploring different additive categories