17scenes
Three.js / R3F primitives for the Mufflermen surface
Procedural exhaust assemblies, realistic vehicle primitives, scanned wireframes, holographic job cards, spark particles, dyno curves, gauge clusters, and interactive card stacks - every scene reduced-motion aware and rendered through a Suspense-wrapped fallback poster.
Production answer
Three.js / R3F primitives for the Mufflermen surface is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Three.js / R3F primitives for the Mufflermen surface states
Generative search brief
Three.js / R3F primitives for the Mufflermen surface: Procedural exhaust assemblies, realistic vehicle primitives, scanned wireframes, holographic job cards, spark particles, dyno curves, gauge clusters, and interactive card stacks - every scene reduced-motion aware and rendered through a Suspense-wrapped fallback poster.
2routes
6routes
93%
Shell contract
Canvas, controls, metadata
The route shell exposes the same primitives around every client-only scene: status chips, keyboard/control bindings, readiness progress, scene metadata, and a reduced-motion state beside the canvas.
Reduced-motion coverage100%
Controls
Input map
OrbitCamera inspection where scene geometry needs it.
HoverDepth, tilt, or callout affordances stay pointer-safe.
ClickSelection drives the card-stack primitive state.
AutoLooping scenes keep a stable reduced-motion snapshot.
100%
Contract status17 / 17
Every overview entry maps to a routed scene island with shell metadata.
Composition spine
Interactive card stackThe card-stack route bridges a live 3D scene to the same primitives used by the 2D quote stack, so the canvas, dock, chips, progress, and stats read as one primitive contract.
ChipKbdProgressStatTile
Open spineScene directory
Pick a routed scene, inspect the control contract, and compare metadata without leaving the primitive gallery surface.
01
Exhaust pipe viewer
Procedural 3D exhaust assembly along a Catmull-Rom curve. Orbit, hover for a part callout, subtle pulse on enter.
- Contract
- Scene island + callout hover
- Control
- OrbitInspect pipe sections
Exhaust pipe viewer shell readiness94%
02
Vehicle showcase
Realistic procedural vehicle primitive with curved bodywork, cabin glass, tyres, rims, lights, reflections, and poster fallback.
- Contract
- Vehicle mesh + fallback
- Control
- OrbitTurntable camera
Vehicle showcase shell readiness96%
03
Rotating logo
Ambient brand mark using drei Text with a metallic outline stroke. Slow Y-axis rotation, warehouse environment.
- Contract
- Logo mesh + motion safe
- Control
- AutoSlow brand rotation
Rotating logo shell readiness90%
04
Welder sparks
MIG welder spark particle field with parabolic gravity and amber-to-red lifetime color ramp.
- Contract
- Particle field + pause state
- Control
- AutoSparks simulation
Welder sparks shell readiness92%
05
Dyno chart
3D RPM × torque × boost curve drawn as a thick tube along a Catmull-Rom path. Auto-orbit camera.
- Contract
- Curve geometry + labels
- Control
- AutoRPM curve sweep
Dyno chart shell readiness93%
06
Parts grid
3×3 grid of placeholder part categories: mufflers, extractors, fittings, brackets. Each tile bobs out of phase.
- Contract
- Part tiles + phase motion
- Control
- HoverRead category depth
Parts grid shell readiness88%
07
Wireframe car scan
Low-poly wireframe chassis with a horizontal scan beam sweeping vertically through the model.
- Contract
- Wireframe + scan beam
- Control
- AutoScan pass
Wireframe car scan shell readiness91%
08
Gauge cluster
Three radial gauges (RPM / boost / EGT) with needles sweeping across their dials in 3D space.
- Contract
- Needles + dial labels
- Control
- AutoGauge sweep
Gauge cluster shell readiness92%
09
Holographic job card
Billboarded job card with a custom scanline ShaderMaterial. Subtle vertical bob, reduced-motion safe.
- Contract
- Billboard + scanline material
- Control
- AutoCard bob
Holographic job card shell readiness90%
10
Interactive card stack
Stack of five job cards in 3D space. Hover lifts the card forward and tilts it toward the pointer.
- Contract
- 3D deck + primitive dock
- Control
- ClickSelect quote card
Interactive card stack shell readiness100%
ChipKbdProgressStatTile
Open scene11
Workshop vehicle showcase
Workshop-ready vehicle turntable with realistic procedural body, exhaust detail, reflective floor, and mobile-safe orbit controls.
- Contract
- Vehicle bay + orbit controls
- Control
- OrbitWorkshop view
Workshop vehicle showcase shell readiness96%
12
Exhaust service hero
Hero scene with highlighted exhaust hardware, warm service-bay lighting, and reduced-motion-safe animation.
- Contract
- Hero canvas + service accents
- Control
- AutoWarm bay motion
Exhaust service hero shell readiness94%
13
Performance car promo
Cinematic performance promo scene with cool rim lighting, premium reflections, and controlled turntable motion.
- Contract
- Turntable + rim lighting
- Control
- AutoPerformance loop
Performance car promo shell readiness94%
14
Parts product scene
Vehicle product composition with floating exhaust, gasket, and bracket primitives for catalogue storytelling.
- Contract
- Vehicle + floating parts
- Control
- OrbitProduct inspection
Parts product scene shell readiness93%
15
Social media vehicle preview
Square-safe social vehicle preview with safe-area frame, strong accents, and generated poster fallback.
- Contract
- Square frame + poster
- Control
- AutoSocial crop check
Social media vehicle preview shell readiness95%
16
Website hero video primitive
Hero-video-ready vehicle scene with local loop and poster fallback behind the WebGL layer.
- Contract
- Video layer + WebGL
- Control
- AutoHero loop
Website hero video primitive shell readiness95%
17
Dashboard vehicle status animation
Dashboard-friendly vehicle status animation with diagnostic scan lighting and a stable reduced-motion state.
- Contract
- Status scan + stable state
- Control
- AutoStatus sweep
Dashboard vehicle status animation shell readiness96%