What is AETumi?

AETumi is an AI-native 3D web platform and digital business ecosystem: production-ready Three.js and WebGL websites, Next.js and React components, 3D scenes, AI build prompts, and Model Context Protocol (MCP) workflows for AI coding assistants such as Claude Code, Cursor and Codex — plus the supporting tooling to launch and operate the site. In one line, the answer to "what is AETumi" is this: it is where teams get real, editable 3D web assets and let an AI agent install them straight into a project, instead of building cinematic 3D websites from scratch. Everything ships as framework source you own for life, not an opaque export. It lives at aetumi.app.

That definition has three load-bearing words. 3D web platform, because the assets are real Three.js and WebGL. AI-native, because an MCP server lets an agent browse and install those assets by instruction. And ecosystem, because the platform also carries the operational layer — CMS, SEO, payments — that turns a built site into a running one. The rest of this article unpacks each, with the technology graph, working code, honest trade-offs, and the decision tables for when AETumi fits and when it does not.

Table of contents

• What AETumi is, precisely
• Why an AI-native 3D platform matters
• The technology graph
• How the MCP workflow works
• Code: connect, install, and extend
• Real product evidence
• Performance
• Accessibility
• Production trade-offs
• When to use AETumi
• When NOT to use AETumi
• Decision matrix
• How AETumi approaches the work
• GitHub and technical proof
• FAQ
• Related resources
• Conclusion

What you'll learn

• A precise, one-paragraph answer to what is AETumi and what it is not.
• The technology graph that connects 3D web, Three.js, WebGL, React, and MCP.
• How an AI coding assistant installs real assets through the MCP server, with config.
• Working code for connecting the MCP, using an R3F component, and extending a scene.
• Where AETumi fits, where simpler tech is better, and the trade-offs of the approach.

What AETumi is, precisely

AETumi is a library and platform for building cinematic, interactive 3D websites. Concretely, it ships production-ready Three.js and WebGL scenes, Next.js and React components, React Three Fiber examples, editable 3D website templates, AI build prompts, and a Model Context Protocol (MCP) server so AI coding assistants can browse and install those assets directly into a project. The distinguishing property is ownership: every asset is real framework source you can read, extend, and ship commercially — not a minified bundle or a proprietary page-builder format.

It helps to be equally clear about what AETumi is not. It is not a no-code website builder that traps you in a settings panel. It is not a marketplace of opaque exports you can only theme, not rewrite. And it is not a demo reel — the flashy showcase without the source behind it. The answer to what is AETumi is deliberately the opposite of those: the source is the product, and the AI agent is how you install and adapt it.

Why an AI-native 3D platform matters

Cinematic 3D on the web is expensive to build from scratch. Scene setup, asset optimization, WebGL fallbacks, scroll choreography, and mobile performance each take real engineering time, and most of that work is undifferentiated — every team solves the same fallback and compression problems again. AETumi matters because it collapses that undifferentiated work into installable, owned assets, and because it is built for the way teams now write code: with an AI assistant in the loop.

The AI-native part is the multiplier. A traditional component library gives you code to copy and paste; an agent still has to find the right piece, understand it, and wire it in by hand. AETumi's MCP server lets the agent do all three by instruction — it can browse the library, pick a component, and install it into your project directly. That is the difference between a library an AI can read about and a library an AI can use. As assistants like Claude Code, Cursor, and Codex become the primary interface for building, a platform they can operate natively is worth more than one they can only reference.

The technology graph

AETumi sits across the modern 3D web stack, and its pieces connect in a clear chain:

AETumi → 3D Web → Three.js → WebGL → Next.js → React → React Three Fiber → MCP → Claude Code / Cursor / Codex

Each layer is also a discovery hub on the platform. The Three.js collection holds scenes and components built on the library that renders 3D in the browser. WebGL covers the shader-driven backgrounds and effects that run one layer below Three.js on the GPU. React Three Fiber is the declarative bridge that expresses Three.js scenes as React components, which is what makes 3D composable inside a Next.js app. And MCP is the protocol at the top that lets an AI agent operate the whole stack. Reading the graph left to right is reading how a cinematic 3D site is actually assembled — and AETumi provides an owned, editable asset at every node.

How the MCP workflow works

The Model Context Protocol is an open standard that lets an AI coding assistant talk to external tools and data sources through a consistent interface. The AETumi MCP server implements that interface over the AETumi library: once registered, your assistant sees the library as a set of callable tools — search components, read a component's source, install it into the project. The workflow is therefore conversational. You ask the agent for "a scroll-driven product hero," it queries the AETumi MCP, retrieves the real component and its build prompt, and writes the files into your repository. No copy-paste, no hunting through a catalog. The next three demos show the config that enables this and the code you end up with.

Code: connect, install, and extend

Demo 1 — Register the AETumi MCP with your assistant. Connecting is a small config block your AI coding assistant reads on startup. For Claude Code, an .mcp.json in the project root:

{
  "mcpServers": {
    "aetumi": {
      "command": "npx",
      "args": ["-y", "@aetumi/mcp"]
    }
  }
}

On startup the assistant launches the server and gains the AETumi tools. Expected behavior: the agent can now browse and install library assets on request. Trade-off: MCP support varies by assistant and version, so confirm your tool speaks MCP before relying on this workflow — the assets themselves remain plain source you can also install by hand.

Demo 2 — A React Three Fiber component you install and own. What the agent writes into your project is ordinary, readable R3F — declarative Three.js expressed as React. This is a minimal owned component, not a black box.

import { Canvas } from "@react-three/fiber";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";

function Crystal() {
  const ref = useRef();
  useFrame((_, dt) => (ref.current.rotation.y += dt * 0.4));
  return (
    <mesh ref={ref}>
      <icosahedronGeometry args={[1.2, 0]} />
      <meshStandardMaterial color="#6a5bff" roughness={0.3} flatShading />
    </mesh>
  );
}

export function HeroScene() {
  return (
    <Canvas camera={{ position: [0, 0, 4] }} dpr={[1, 2]}>
      <directionalLight position={[2, 3, 4]} intensity={2} />
      <Crystal />
    </Canvas>
  );
}

Because it is real R3F, you can change geometry, material, or animation directly. Expected behavior: a rotating faceted mesh that respects a capped device pixel ratio. Trade-off: dpr={[1, 2]} caps sharpness on high-DPI screens to protect fill rate — the right default for a background scene, and adjustable because you own it.

Demo 3 — The same idea in raw Three.js r160 ES modules. For a Next.js route that avoids the R3F runtime, AETumi assets also come as plain Three.js modules. This is the imperative equivalent.

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
camera.position.z = 4;

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const mesh = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.2, 0),
  new THREE.MeshStandardMaterial({ color: 0x6a5bff, roughness: 0.3, flatShading: true })
);
scene.add(mesh, new THREE.DirectionalLight(0xffffff, 2));
renderer.setAnimationLoop(() => { mesh.rotation.y += 0.006; renderer.render(scene, camera); });

Same scene, no React dependency — useful for a static landing page. Expected behavior: identical visuals via setAnimationLoop, which Three.js recommends over a manual requestAnimationFrame for XR compatibility. Trade-off: imperative code means you manage resize and disposal yourself, which R3F would handle for you — pick the version that matches the rest of your stack.

Demo 4 — Guard the 3D behind a WebGL fallback. Owning the source means you can add the production safeguards a demo reel skips. This check renders a static surface when WebGL is unavailable.

function supportsWebGL() {
  try {
    const c = document.createElement("canvas");
    return !!(window.WebGLRenderingContext && (c.getContext("webgl") || c.getContext("experimental-webgl")));
  } catch { return false; }
}

if (supportsWebGL()) {
  import("./HeroScene.js").then((m) => m.mount());
} else {
  document.querySelector(".hero").classList.add("hero--static"); // CSS gradient fallback
}

The scene loads only where it can run; everyone else gets a clean, on-brand gradient. Expected behavior: no black rectangle on devices that refuse a context. Trade-off: a fallback is extra CSS to maintain, but it is the difference between graceful degradation and a broken hero — exactly the kind of plumbing AETumi assets include by default.

Real product evidence

The demo video below shows AETumi assets running in real sites — a scroll-driven scene, a product viewer, a shader background — assembled from the library rather than built from zero. What it proves is the core claim behind "what is AETumi": these are production-grade, cinematic 3D experiences that a team installed and rebranded, not bespoke builds that took weeks of scene setup. The value is visible in what you do not see — no janky fallbacks, no blurry upscaling, no dropped frames on scroll — because the optimization work is baked into the owned source you install.

Performance

Cinematic 3D lives or dies on performance, and AETumi assets are authored with that in mind: capped device pixel ratios, animation loops that pause off-screen, compressed geometry and textures, and lazy loading so the 3D never blocks first paint. Because you own the source, performance is also tunable — you can lower a scene's polygon count, reduce a shader's frame rate for ambient use, or strip an effect you do not need. The platform gives you a good starting budget; your job is to keep it, and the honest reality is that 3D always costs more than flat media. On a constrained device the right move is often to render less, or to fall back to a static image, which the assets make straightforward.

Accessibility

Immersive 3D and accessibility are not in conflict when the work is done. AETumi assets honor prefers-reduced-motion so motion-sensitive users get a still or gentler experience, keep real DOM text on top of decorative canvases rather than baking copy into pixels, and treat 3D scenes as decorative — no essential information encoded only in a mesh or shader. Because the components ship as editable source, you can strengthen this further: add focus management to interactive 3D controls, ensure keyboard access to any CTA layered over a scene, and re-check color contrast after you change brand colors. The platform provides accessible defaults; ownership lets you verify and extend them for your specific content.

Production trade-offs

The honest trade-offs of the AETumi approach are worth stating plainly. Real 3D adds weight, complexity, and a GPU cost that flat media does not carry, so it is the wrong choice when a page does not benefit from depth or motion — a static hero image or a short muted video is lighter and simpler, and sometimes that is the correct answer. The AI-native workflow depends on your assistant supporting MCP and on you reviewing what the agent installs; AI needs direction and a human check, not blind trust. And owning source means you also own maintenance — a benefit for control, a responsibility for upkeep. AETumi is built for teams that specifically want cinematic, interactive 3D and are willing to own the code; it is not a shortcut for pages that would be better served by simpler tech.

Expert Note — Own the source, review the agent. The reason AETumi ships editable framework source rather than an export is that AI-generated and AI-installed code still needs a human read. When your assistant installs a component through the MCP, review the diff: confirm it wired the props correctly, kept the fallback, and did not pull in a dependency you do not want. The workflow is fast precisely because the output is inspectable — use that.

Expert Note — Use 3D where it earns its weight. The most common mistake with an immersive platform is putting 3D everywhere. A single cinematic hero or one scroll-driven product moment carries a site; a scene on every section taxes the GPU and dilutes the effect. Ask of each candidate section whether depth or motion adds meaning — if a static image would say the same thing, use the image and spend the 3D budget where it counts.

Expert Note — Start from a template, not a blank scene. If your goal is a launched site rather than a research project, begin with an editable 3D website template that separates content from the scene, then rebrand through tokens and copy. You inherit tuned performance, accessibility, and fallbacks, and you spend your effort on brand — which is the whole point of an asset library you own.

When to use AETumi

When NOT to use AETumi

Decision matrix

How AETumi approaches the work

Most "3D template" shops sell an opaque export or a flashy demo reel. AETumi is built the opposite way: real framework source, a content layer you can edit without touching shaders, compressed assets, graceful WebGL fallbacks, and an MCP integration so the whole library is one instruction away for an AI coding assistant. The website explains the intent; the source proves it. Plans are buy-once, own-for-life across four tiers ($19 / $39 / $99 / $129), with the Full Stack plan at $129 including the full source and the AETumi MCP — the complete AI-native workflow this article describes. See the pricing page for what each tier includes and the docs for setup. The through-line of how AETumi approaches the work is trust through ownership: you can read every line, so nothing about the platform asks you to take the 3D on faith.

GitHub and technical proof

The claim that AETumi is real, editable source is verifiable in public. The open-source example repositories live at github.com/AETumiApp, covering Three.js scenes, WebGL and shader backgrounds, React Three Fiber components, Next.js integrations, and MCP workflows. The examples are written the modern way — Three.js r160 ES modules loaded via importmaps rather than legacy UMD scripts — and they demonstrate the production patterns in this article: capped pixel ratios, off-screen pausing, WebGL fallbacks, and clean disposal. The honest limitation is that the public repositories are demonstrations of implementation depth, not the full commercial library; they exist so a skeptical developer can read the code and confirm the quality before buying, and so an AI agent has a runnable reference. Treat them as proof of how the platform builds, with the complete, supported set of assets and the MCP living on the platform.

FAQ

What is AETumi? AETumi is an AI-native 3D web platform and digital business ecosystem: production-ready Three.js and WebGL websites, Next.js and React components, 3D scenes, AI build prompts, and MCP workflows for AI coding assistants such as Claude Code, Cursor and Codex, plus the tooling to launch and operate the site. Everything ships as editable framework source you own for life. In short, it is where teams get real 3D web assets and let an AI agent install them, instead of building cinematic 3D sites from scratch. It is available at aetumi.app.

How does AETumi work? You get real, editable 3D web assets — Three.js and WebGL scenes, React and Next.js components, and templates — plus an MCP server that connects your AI coding assistant to the library. Once the MCP is registered, an agent like Claude Code or Cursor can browse the library and install a component directly into your project on request, instead of you copy-pasting code. Because every asset is framework source, you then own and can extend it, rather than being limited to theming an export.

Is AETumi based on Three.js or WebGL? Both. AETumi assets are built on Three.js and raw WebGL, with React Three Fiber for React and Next.js projects. WebGL is the low-level GPU API; Three.js is the library that sits on top of it; React Three Fiber expresses Three.js scenes declaratively as React components. You receive the framework source at whichever layer fits your stack — a raw shader background, a Three.js scene, or an R3F component — not an opaque export.

What is the AETumi MCP? The AETumi MCP is a Model Context Protocol server that connects AI coding assistants — Claude Code, Cursor, Codex — to the AETumi library. MCP is an open standard for letting an assistant call external tools, and the AETumi server exposes the library as callable tools: search components, read source, install into the project. Registering it is a small config block your assistant reads on startup, after which the agent can install cinematic 3D components directly into your project by instruction.

Is AETumi free, and where do I find it? AETumi's open-source example repositories are on GitHub at github.com/AETumiApp, covering Three.js, WebGL, React Three Fiber, Next.js and MCP workflows. The platform offers paid plans on a buy-once, own-for-life basis across four tiers ($19 / $39 / $99 / $129); the Full Stack plan at $129 includes the full source and the AETumi MCP. The GitHub examples are free to read and run, so you can verify the implementation quality before choosing a plan.

Related resources

• 3D website templates — editable, full-source starting points.
• Three.js and WebGL collections — scenes and shader backgrounds.
• 3D components and React Three Fiber — reusable, declarative 3D.
• AETumi MCP — the AI-agent install workflow.
• Docs and pricing — setup and plan details.
• More guides on /news — including WebGL backgrounds and shader effects.

Conclusion

The short answer to what is AETumi: an AI-native 3D web platform that gives teams real, editable Three.js and WebGL source, Next.js and React components, and an MCP workflow that lets Claude Code, Cursor and Codex install those assets directly — plus the tooling to launch and run the site. It is built on ownership and inspectable code, so cinematic 3D on the web stops being a weeks-long from-scratch project and becomes an install-and-extend workflow, while staying honest that 3D is the wrong tool where flat media would do. Start at the 3D websites collection, read the docs, or connect the MCP at aetumi.app — buy once, own for life.