Samer Noufal
All Projects
LiveWeb App

Container Configurator

A working parametric configurator built with React and Three.js: adjust dimensions, pick materials and toggle features with instant 3D feedback. It is backed by a real parametric engine rather than a mockup — the same codebase drives DXF, PDF and SVG export — which makes it the closest of these demos to a shippable CPQ front end.

Live Demo

Screenshots

Key Highlights

  • Real-time 3D preview with orbit controls
  • Dimension sliders with instant visual feedback
  • Material and colour selection system
  • Backed by a real parametric engine with DXF/PDF/SVG export
  • Responsive — works on desktop and mobile

Tech Stack

React 19TypeScriptThree.jsReact Three FiberNext.jsTailwind CSS

Tags

ReactTypeScriptThree.js3DWeb Configurator

Related Projects

Interactive DemoLiveWeb App

Web CAD Viewer

Browser-based 3D CAD viewer with wireframe mode, exploded view, cross-section slider and view presets.

Three.jsWebGLReact Three FiberCAD
View Details →Live Demo
MixFltCoolHeatFanAttenΔp 3.45 in.wg5,000 CFM | 12.5 Tons | 8.2 BHP
Interactive DemoLiveWeb App

HVAC AHU Configurator

Air handling unit configurator with section-by-section component selection, pressure-drop analysis and live engineering calculations.

ReactTypeScriptHVACConfigurator
View Details →Live Demo
Interactive DemoLiveWeb App

Door Industry Configurator

Interactive 3D door configurator with panel styles, materials, glass options, hardware choices and live engineering specifications.

ReactTypeScriptThree.js3D
View Details →Live Demo