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 #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (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

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.interactive-3d-object",
  "kind": "hero",
  "grid": {
    "object": "6-12",
    "eyebrow": "1-4",
    "copy": "1-4",
    "headline": "1-5",
    "hint": "10-12"
  },
  "slots": [
    "eyebrow",
    "subhead",
    "cta",
    "headline",
    "meta"
  ],
  "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.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "align": "stretch",
    "minVh": 0.95,
    "children": [
      {
        "el": "shape",
        "span": "6-12",
        "rowSpan": "1-3",
        "kind": "ring",
        "size": "fill",
        "fill": "accent"
      },
      {
        "el": "text",
        "span": "1-4",
        "rowSpan": "1-1",
        "slot": "eyebrow",
        "role": "eyebrow"
      },
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "2-2",
        "alignSelf": "center",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 32
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "text",
        "span": "1-5",
        "rowSpan": "3-3",
        "alignSelf": "end",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 12
      },
      {
        "el": "text",
        "span": "10-12",
        "rowSpan": "3-3",
        "mobile": "hide",
        "color": "textMuted",
        "alignSelf": "end",
        "slot": "meta",
        "role": "label",
        "align": "right"
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page