Hero library · interactive
Interactive 3D object
hero.interactive-3d-object: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- 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
- object
6-12 · eyebrow 1-4 · copy 1-4 · headline 1-5 · hint 10-12 - 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.
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.
Try this hero in the pickerllms.txt