A reusable component architecture guide for building WebGL effects and interactive graphics in React and Next.js.
AETumi is an AI-native 3D web platform for production-ready Three.js and WebGL websites, Next.js and React components, 3D scenes, AI prompts, and MCP workflows for AI coding assistants.
WebGL demos are easy to make hard to reuse. Production React components need clear inputs, predictable lifecycles, responsive sizing and graceful fallbacks. This repository focuses on turning GPU-driven visuals into maintainable application components.
- animated WebGL backgrounds
- shader-driven hero sections
- cursor-reactive effects
- particle fields
- distortion and displacement layers
- interactive gradients and noise
- product reveal components
- full-screen scene sections
- lightweight decorative canvas effects
A useful WebGL component should expose page-level behavior without leaking rendering internals.
<WebGLHero
intensity={0.6}
interactive
reducedMotionFallback="poster"
onReady={...}
/>
Internally, the component should own renderer setup, resize behavior, animation lifecycle and cleanup.
- canvas size follows its container rather than assuming the viewport
- animation pauses when off-screen where practical
- high-frequency frame state does not cause React re-renders
- browser-only code stays behind a client boundary in Next.js
- WebGL resources are disposed on unmount
- reduced-motion behavior is explicit
- mobile GPU cost is tested
- fallback content remains useful without canvas support
- pointer effects do not block normal page interaction
Active. Runnable, production-oriented examples now live in examples/ — reviewed for performance (adaptive quality), accessibility, reduced-motion and non-WebGL fallbacks, and clean resource disposal. The set is refined and extended as new patterns land.
See examples/README.md.
AETumi helps designers, developers and agencies build interactive 3D and WebGL experiences with Three.js, Next.js, React, React Three Fiber and AI-assisted coding workflows.
Main site: https://aetumi.app/
Production-ready 3D web you can own the source of — from AETumi, the AI-native 3D web platform:
- WebGL website examples, shaders & components
- React Three Fiber components & examples
- 3D web components (Three.js & WebGL)
Build 3D web directly from your AI assistant with the AETumi MCP for AI coding — claude mcp add --transport http aetumi https://mcp.aetumi.app