Examples and production patterns for interactive websites, immersive product experiences and browser-based 3D storytelling.
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.
Interactive, immersive pages where pointer, scroll and motion serve a real goal — exploration, understanding or conversion — not decoration with a power bill.
Customer outcome. Visitors explore and act; the interaction supports the content and conversion path rather than competing with the navigation.
Where it fits. Immersive landing pages, product storytelling, interactive showcases and spatial navigation — anywhere interaction earns its place in the page's goal.
What you customize. Interaction patterns, the HTML-to-3D state connection, feedback and fallbacks — with progressive enhancement so the core message lands before the 3D layer is ready (see the experience model below).
AI-assisted adaptation. A coding assistant can adapt these patterns to a specific page goal when given the experience model as context via the AETumi MCP.
Interactive web should help a visitor understand, explore or act. If an effect only makes the GPU work harder while the user hunts for the navigation, it is decoration with a power bill.
This repository focuses on interaction patterns that support real website goals.
- pointer and touch exploration
- camera-driven navigation
- product hotspots
- scroll-linked scenes
- interactive storytelling
- hover and cursor-reactive effects
- spatial navigation
- animated WebGL backgrounds
- 3D landing pages and showcases
- HTML UI connected to 3D state
A useful interactive page usually has four layers:
content + navigation
↓
interaction intent
↓
3D / WebGL response
↓
feedback + conversion path
The 3D response should never make the first and last layers harder to use.
The page should still communicate its core message before the 3D layer is ready or when it is unavailable.
Pointer, touch and keyboard behavior should be considered independently. Hover is not a mobile strategy.
Users should understand what can be interacted with and what changed after an interaction.
Reduced-motion states should preserve information and navigation even when cinematic movement is removed.
- clear navigation and content hierarchy
- interaction cues are understandable
- mobile touch targets are deliberate
- semantic content exists outside canvas
- progressive loading is visible but not disruptive
- reduced-motion behavior is useful
- focus order remains sensible
- pointer effects do not trap or block page controls
- rendering pauses when unnecessary where practical
- analytics can distinguish meaningful interactions from decorative movement
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 cinematic and interactive 3D web experiences using Three.js, WebGL, Next.js, React, React Three Fiber, MCP and AI coding assistants.
Main site: https://aetumi.app/
Production-ready 3D web you can own the source of — from AETumi, the AI-native 3D web platform:
- Interactive website examples
- 3D website templates & examples
- Three.js website templates & 3D components
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