hero.interactive-3d-object · Interactive 3D object

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.interactive-3d-object". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A draggable 3D object fills 6–12 for the full hero height; eyebrow top-left; subhead + CTA mid-left in 1–4; the display headline sits bottom-left in 1–5, running up to the object's edge; a 'drag to rotate' hint bottom-right.
Slots
eyebrow, subhead, cta, headline, meta
Grid areas
object 6-12 · eyebrow 1-4 · copy 1-4 · headline 1-5 · hint 10-12 (12-column grid, 1-based inclusive spans)
Notes
The ring shape is the preview's stand-in for a WebGL canvas (three.js or R3F, see the 3D signature looks). Lazy-load the canvas after first paint; show a static render (poster image) first, on low-power devices and under reduced motion.
Tokens
bg #0E0B1F · text #EDE6FF · heading #FFFFFF · accent #FE2D6D · accent2 #00A59F · Orbitron / Space Grotesk · radius 2px · space unit 8px (full list in design/tokens.json)

Do

  • Give the 3D object columns 6–12 and the full hero height; it rotates on drag and idles slowly.
  • Render a static poster image of the object first; mount the canvas lazily after first paint.
  • Run the headline in 1–5 right up to the object's left edge at the bottom (it may touch the canvas, and paints above it).
  • Show a small 'Drag to rotate' hint bottom-right.

Don't

  • Don't block scrolling with the canvas: wheel and touch-scroll must pass through.
  • Don't use a generic floating blob; the object should be the product or a meaningful form.
  • Don't run the render loop when the hero is off-screen.

Phone width

  • Object first as a 1:1 static render (no drag), then eyebrow, headline, subhead, CTA; hide the hint.

Brand & product studio

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

We make complicated companies simple to choose