Behind the Scenes of the Rams Radial Menu Build

By nuwudorder | September 6, 2025
Case Study · 3D/Interactive · Three.js

⚡ Bringing the Rams’ Visual Identity Into 3D

A behind-the-scenes build of a Rams-inspired 3D radial menu with SoFi Stadium as the centerpiece— designed for real-world use across WordPress, Shopify, or microsites.

View Repo Contact Nuwud

Why This Build

The Los Angeles Rams site features bold circular UI motifs. I reimagined that energy as an interactive 3D radial menu so the brand feels tactile, navigable, and alive.

This prototype doubles as portfolio work and a vision piece for a Senior Graphic Designer role: experiential design that merges brand + code.

Highlights

  • Radial layout with orbiting items
  • Center stage: SoFi Stadium (glTF)
  • Per-item 3D models (Legal → Gavel, Coaching → Whistle, etc.)
  • Keyboard & A11y: ←/→ navigate, Enter/Space select
  • Drop-in script (WordPress/Shopify) & modern Web Component


Behind the Build

  1. Scaffold: a clean TypeScript project that emits a drop-in IIFE and an ESM/Web Component.
  2. Behavior: shortest-arc rotation, snap tolerance, and lock guards to prevent highlight flicker.
  3. 3D Integration: lazy-load Three.js only when a center model is set.
  4. Assets: batch-processed .glb/.gltf models and generated a manifest for quick mapping.
  5. Demos: a dev playground + a static example for CMS use.
  6. Tuning: CSS injection, camera lift, guide ring, and auto-fit for 3D bounds.

Tech & Implementation

  • Three.js (lazy-loaded for the center stage)
  • TypeScript exports with typed API
  • Accessible controls & reduced-motion respect
  • Dispose() cleans listeners, RAF, and WebGL

Drop-in Usage (any site/CMS)

<div id="rams-menu"></div>
<script src="/path/to/rams-radial-menu.dropin.js"></script>
<script>
  const items = [
    { id: 'legal', label: 'Legal', modelUrl: '/models/icons8_judges_gavel_with_law_books_and_scales.glb' },
    { id: 'pr', label: 'Public Relations', modelUrl: '/models/Podium.glb' },
    // ...add the rest
  ];
  const api = RamsRadialMenu.init('#rams-menu', {
    items,
    centerModelUrl: '/models/05cbd1ca51f2.../model.gltf' // SoFi Stadium
  });
</script>

Swap paths as needed. In WordPress, host the JS + models in your theme or CDN.

Where This Shines

  • Rams.com fan engagement or campaign microsites
  • In-stadium interactive hubs (SoFi)
  • Recruitment/training portals with immersive navigation

Next Iterations

  • Touch drag + inertia for mobile
  • Model cross-fades and transitions
  • Skinnable themes (seasonal/throwback)
  • API hooks for ticketing or loyalty

Closing

At Nuwud Multimedia, the goal is simple: build experiences that look incredible and feel interactive. This Rams-inspired radial menu shows how brand systems can become tactile, navigable worlds.

Browse the Repo Invite Me to Collaborate

Inspiration: visual motifs from the Los Angeles Rams website. This is an independent design/development study.

Posted in Blog

About nuwudorder