Aurum Singularity: a real 5D hypercube and 68,000 GPU particles in a Three.js dashboard

Aurum Singularity is a premium Three.js dashboard template from AETumi. It is a real-time, dark-luxury "intelligence desk" where ten AI agents pass a single case from launch detection to verdict. Three WebGL scenes do the heavy lifting: a mathematically real five-dimensional hypercube, 68,000 GPU particles flowing along a ribbon, and a particle surface that never stops morphing. A live balance chart, signal scanner, handoff chord, activity log and agent row sit around them.

Most "3D dashboards" are a spinning globe beside a stock chart. This one lets the 3D carry meaning. The hypercube is the strategy space, the ribbon is the flow of launches, and the singularity is evidence fusing into a verdict. This guide walks through how the desk is built: the maths, the data model and the layout system. You can reuse the same patterns in your own WebGL dashboard, or start from the finished premium 3D web template built by AETumi, an AI-native 3D web platform.

What is Aurum Singularity?

Aurum Singularity is a single-page, data-driven dashboard built on three.js r143 with plain ES modules. There is no framework, no build step and no CDN. The three 3D scenes are rendered with WebGL. Every number, label and chart that people or search engines need to read is real HTML, SVG or Canvas 2D sitting on top. One JSON file holds the whole story: brand, labels, the ten agents, a 25-second timeline, colour themes and default settings. Change the file, reload, and you have a different product.

Why a live data desk needs real 3D, not decoration

People remember motion that means something. A rotating logo is decoration. A shape that changes because the data changed is information. On Aurum Singularity every 3D element maps to a concept in the story: dimensions of a strategy, a flow of launches, the fusion of evidence. That turns a showcase into a pitch for fintech desks, AI-agent products, security operations and investor demos, where a founder has thirty seconds to make a system feel alive.

What you'll learn

• How to project a real 5D hypercube to the screen without it collapsing into "a cube inside a cube".
• How to move 68,000 particles along a spline at an even speed, with no banding, using arc-length resampling.
• How to push particles away from the cursor in screen space, even when the object is rotated.
• How to keep every string and number in one JSON file so the same code ships as many products.
• How to fit a fixed-size dashboard to any screen as a full-screen hero, with a clean phone layout.

Project a real 5D hypercube, then let the user drag through the 5th dimension

A 5-cube has 2⁵ = 32 vertices (every combination of ±1 in five coordinates), 80 edges (pairs that differ in one coordinate) and 80 square faces. Rotate it in five planes, then project it twice: 5D → 4D → 3D. The detail that makes it look right is a set of fixed "skew" rotations applied before the animation. Without them the projection lines up with the axes and reads as two nested cubes.

// hypercube-5d.js: 5D rotation + double perspective projection
const PLANES = [[0,1,.23],[2,3,.31],[1,4,.17],[0,3,.11],[2,4,.27]]; // [axisA, axisB, speed]
const SKEW   = [[0,2,.62],[1,3,.48],[3,4,.83],[0,4,.41],[1,2,.57]]; // fixed, breaks symmetry

const P = V.map((v) => {
  const p = v.slice();
  for (const [a, b, k] of SKEW)   rotate(p, a, b, k);
  for (const [a, b, w] of PLANES) rotate(p, a, b, t * w);
  rotate(p, 0, 4, view.drag.x * 0.55);   // dragging turns the 4th/5th-dimension planes
  rotate(p, 1, 3, view.drag.y * 0.55);
  const k4 = 2.2 / (3.2 - 0.6 * p[4]);   // 5D → 4D (denominator always > 0)
  const w  = p[3] * k4;
  const k3 = 2.2 / (3.4 - 0.6 * w) * 1.45; // 4D → 3D
  return [p[0] * k4 * k3, p[1] * k4 * k3, p[2] * k4 * k3];
});

Why it matters: because the drag feeds into the (0,4) and (1,3) planes, not only the camera, the figure really morphs as you drag. It rotates a full 360° with inertia, and double-clicking resets it. Since |p| ≤ √5, the perspective denominators can never reach zero, so the figure never flips inside out.

Move 68,000 particles along a spline without banding

The launch field is a tall "J" ribbon. A naive approach interpolates each path segment with a smoothstep. Speed then drops to zero at every control point, and particles pile up into visible stripes. The fix is to build a Catmull-Rom curve, measure its arc length, and look positions up by distance rather than by segment. That gives even speed everywhere.

// ribbon-field.js: an arc-length lookup table (401 samples) along the centre line
const arc = [0];
for (let i = 1; i < line.length; i++)
  arc.push(arc[i-1] + Math.hypot(line[i][0]-line[i-1][0], line[i][1]-line[i-1][1]));
const at = (d) => { /* binary-search arc[], lerp between the two nearest samples */ };
const widthAt = (u) => 190 * Math.pow(Math.max(0, 1 - Math.pow(u, 2.2)), 0.8); // taper

for (let i = 0; i <= 400; i++) {
  const u = i / 400, a = at((u - .004) * total), b = at((u + .004) * total), c = at(u * total);
  const tx = b[0]-a[0], ty = b[1]-a[1], l = Math.hypot(tx, ty) || 1;
  TABLE.push([c[0], c[1], ty/l, -tx/l, widthAt(u)]);     // position, normal, width
}
// per frame: u -= dt * 0.018 → position = centre + normal * (v - 0.5) * width

Why it matters: the lookup table turns 68,000 path evaluations per frame into array reads. Colour comes from the particle's position across the ribbon (sapphire edge to ruby edge), so the ribbon reads as a single volume, not noise. Density is a live setting, and the draw range simply shrinks on slower devices.

Make particles avoid the cursor, even on a rotating object

The singularity is a 200 × 96 torus grid that four slow, out-of-phase sine waves bend into a torus, a pinched double loop and a folded shell. The interaction people love is that particles move away from the pointer. The push has to happen in screen space, where the cursor lives, and then be rotated back into the object's own space.

// core.js: screen-space repel, shared by every particle scene
export function repel(m, X, Y, Z, W, H, pointer, radius, strength) {
  const w  = m[3]*X + m[7]*Y + m[11]*Z + m[15];
  const sx = ((m[0]*X + m[4]*Y + m[8]*Z + m[12]) / w * 0.5 + 0.5) * W;
  const sy = (0.5 - (m[1]*X + m[5]*Y + m[9]*Z + m[13]) / w * 0.5) * H;
  const dx = sx - pointer.x, dy = sy - pointer.y, d = Math.hypot(dx, dy);
  if (d >= radius || d < 0.01) return [0, 0];
  const f = Math.pow(1 - d / radius, 2) * strength;
  return [dx / d * f, dy / d * f];
}
// singularity.js: spring toward the push, then undo the group's rotation
OX[k] += (tx - OX[k]) * 0.14;  OY[k] += (ty - OY[k]) * 0.14;
push.set(OX[k] / pxPerUnit, -OY[k] / pxPerUnit, 0).applyQuaternion(inverseRootRotation);

Why it matters: a single projection matrix per frame (projection × view × model) serves every particle. The spring (0.14) makes the surface part like silk rather than jump. When the pointer leaves, the scene keeps settling until every offset is back near zero, and then it skips the work entirely.

One JSON file drives the whole desk

Every visible string has a data-t key, with the English default written inline. At start-up, app.js fetches the JSON and fills the page. The timeline is data too: keyframes of [second, value, minute], alert windows and status words. The same code becomes a SaaS revenue desk, a security operations centre or a logistics control tower without touching JavaScript.

// data/aurum.json (excerpt)
"timeline": {
  "cycleSeconds": 25, "unit": "ETH", "startValue": 0.0102, "startClock": "16:05", "shiftMinutes": 780,
  "keyframes": [[0, 0.0106, 0], [8, 0.0223, 220], [14, 0.1265, 442], [24, 1.4070, 780], [25, 1.4070, 780]],
  "alertWindows": [[7.4, 9], [17.4, 19]],
  "status": { "scan": "RULE SCAN", "alert": "VETO / RETEST", "ok": "WATCH / REVIEW" }
},
"agents": [ { "code": "ONYX", "name": "ONYX", "role": "launches", "color": "#e8801e", "task": "launchpad v2 / launch detected" } ]

Why it matters: values are interpolated on a log scale with a smoothstep, so growth looks natural and never linear or jumpy. A JSON Schema ships with the template, so VS Code and Cursor validate and autocomplete every field. Add ?data= to the URL to preview a different file, or ?t=12 to freeze the story for a screenshot.

A full-screen hero on any screen, a readable column on phones

Dashboards break when they reflow. Aurum instead lays out every card on a fixed stage and scales the whole stage like one image. On landscape desktops the stage is 1080 px tall and fills the viewport height. Its width follows the screen, so it runs edge to edge, with four columns in a 450 : 430 : 520 : 440 ratio. Portrait screens use a 1440 × 1770 layout. Below 900 px, CSS stacks the cards into one column.

// hero-stage.js: fit a 1080-px-tall stage to a landscape viewport
const wide = innerWidth >= 1100 && innerWidth / innerHeight >= 1.15;
if (wide) {
  let k = innerHeight / 1080, W = Math.round(viewport.clientWidth / k);
  if (W < 1500) { W = 1500; k = Math.min(innerHeight / 1080, viewport.clientWidth / 1500); }
  stage.style.width = W + 'px';
  placeColumns(W);                    // 4 columns share the width 450:430:520:440
  stage.style.transform = `scale(${k})`;
}

Why it matters: nothing reflows mid-animation, text never wraps into a chart, and canvases stay crisp because each renderer re-fits its pixel ratio to the stage scale. The desk looks designed at 1366, 1920 and 2560 px, and it still works on a 390 px phone.

See it live, then drag it

Open the live Aurum Singularity demo and try the following:

• Drag the hypercube and watch it change shape, not just turn.
• Sweep the cursor through the ribbon and the singularity so the particles part around it.
• Hover the chord to isolate one agent's handoffs.
• Open the ⚙ panel and switch between seven themes (Aurum, Sakura Pastel, Kintsugi Gold, Cyber Neon, Aurora, Ocean Deep and Monochrome), or change speed, density, particle size, 3D depth and zoom.

Settings are saved per visitor, and the page respects prefers-reduced-motion.

Production trade-offs: performance, accessibility, mobile, SEO

Performance: all three scenes share one tiny particle shader. Heavy per-frame maths is reduced to lookup tables, and each scene pauses off-screen. Accessibility: every canvas has a descriptive aria-label, KPIs and the log are real text, the controls are native buttons and inputs with Escape-to-close, and reduced motion freezes the story on a representative frame. Mobile: one-column layout, a density slider, and a pixel-ratio cap. SEO: a canvas is invisible to crawlers. That is why every title, number and explanation stays in HTML, and why the page carries a written article under the desk. The 3D is the hook; the text is what ranks.

Decision matrix: how to get a 3D data dashboard like this

What ships in the template package

The package is organised so a person or an AI coding assistant can take it over. It comes in four parts:

• 1 · Source data template: the live aurum.json, a blank template, a JSON Schema and a field-by-field guide, plus a complete re-skin example (a SaaS "Vega Growth Desk") made only by editing JSON.
• 2 · Full build prompt: one brief that rebuilds the whole desk from an empty folder in Claude Code, Cursor or Codex. It covers the design system, the layout measurements, the maths of every scene and an acceptance checklist.
• 3 · Components: eleven stand-alone ES modules. They are core, hypercube-5d, ribbon-field, singularity, area-chart, signal-scanner, handoff-chord, activity-log, agent-row, scene-controls and hero-stage. Each comes with its API, a build-from-scratch prompt, a customise prompt and a runnable demo.
• 4 · Usage: a five-minute manual guide, plus a master prompt with a client brief, tasks and a self-check across five screen sizes.

Fonts are the free Jost and Onest (SIL OFL), and Three.js is bundled locally. There are no external requests and no tracking.

How AETumi builds premium 3D web templates

Every template in the AETumi library follows the same rules as this one. The 3D must carry meaning. Text stays real text. Data lives outside the code. Each scene has one owner, one loop and a way to pause. The layout is designed for three shapes of screen, not one. That is what separates a premium 3D web template from a demo reel: you can put a client's name, numbers and colours on it by Friday. Browse the AETumi Three.js library, see the Intelligence Router, its sister template, or read Three.js scene architecture for production websites for the engineering rules behind both.

FAQ

Is Aurum Singularity 100% WebGL? No, and deliberately so. The three 3D scenes (5D hypercube, ribbon field, singularity) are Three.js on WebGL. Charts, numbers, labels and controls are HTML, SVG and Canvas 2D, so they stay sharp, accessible and indexable by search engines.

Is the 5D hypercube mathematically real? Yes. It has 32 vertices and 80 edges in five dimensions. It rotates in five planes and is projected with two perspective divisions (5D → 4D → 3D) before Three.js renders it. Dragging rotates the 4th- and 5th-dimension planes, which is why the shape morphs.

Can I use my own data and brand? Yes. All text, numbers, agents, timeline, themes and settings live in one JSON file with a JSON Schema. The package includes a blank template and a full re-skin example. A master prompt lets an AI coding assistant do the rebrand and check it for you.

Does it need React, a build step or a CDN? No. It is plain HTML, CSS and ES modules with Three.js r143 bundled locally. Serve the site folder from any static host.

Will it run on phones? Yes. Below 900 px the desk becomes one readable column. A density slider and a pixel-ratio cap keep the particle scenes smooth, and reduced-motion users get a still frame.

Are the numbers real trading data? No. The balance, PnL and events are an illustrative simulation driven by the timeline in the JSON. They are not financial or trading advice. Replace them with your own data or API.

Conclusion & next step

Aurum Singularity shows what a Three.js dashboard can be when the 3D is the argument, not the wallpaper. It combines a real 5D projection, arc-length particle flow, screen-space interaction, a data-driven story and a layout that fills any screen. Explore the live desk, then make it yours.

Open the live demo → Get the AETumi library →

← All guides · See the Three.js library · WebGL guides