Skip to content
187WEB NATASHA technical blueprint — coordinate grid map of the mascot geometry

187MODEL skill

187MODEL — 3D product showcase / configurator.

Builds interactive 3D product viewers: load models, swap materials, set cameras, and design configurator UX.

← Back to all skills/187 reference

Model lab

6 live 3D object systems

Every 187MODEL pattern built as a real, GPU-accelerated CSS-3D demo you can grab and spin — orbital and cylindrical carousels, a hardware cube, a helical tornado, pointer-tilt cards, and a physics cascade. Each labelled with its /187… command; all honour prefers-reduced-motion.

Hover
187MODEL

Mouse-Tilt 3D Card

/187perspective3d

Pointer position maps to clamped rotateX/Y (±15°) with a quickTo lag and a specular sheen.

Drag
01
02
03
04
05
06

Inertia-Orbital Carousel

/187radial3d

Cards placed on a rotateY+translateZ ring; Draggable spins it with inertia, auto-rotates at rest.

Live
123456

Hardware Cube Flip

/187cube3d

Six faces on a preserve-3d cube, backface-visibility hidden; tweens rotateY/X by 90° steps.

Drag
A
B
C
D
E
F
G
H

Cylindrical Carousel

/187cylcarousel

Image panels wrapped on a cylinder via rotateY increments; drag to rotate, inertia snaps to the nearest.

Live

Helical Card Tornado

/187tornado3d

Cards arranged on a helix (rotateY + translateZ + rising translateY); the whole funnel spins.

Live

Physics Cascade

/187physicscascade

A 2D physics engine (Matter.js) drives collisions and gravity, mapped onto stacked 3D objects.

Triggers

How to invoke 187MODEL

Trigger
/187model
187MODEL
model
product viewer
3d configurator
model showcase
three.js product
r3f product
glb viewer

Use cases

When to route to 187MODEL

Build a 3D product viewer

Add material, color, or feature variants

Define camera presets and orbit constraints

Budget load time and frame rate for real devices

Output contract

What 187MODEL delivers

  1. 1Model loading and format plan
  2. 2Variant state map
  3. 3Camera rig spec
  4. 4Performance budget
  5. 5Next actions

Routing

When to hand off to another skill

Route toWhen
187CRAFTUI/UX and design-token work is needed
187HEROthe model anchors a full-screen hero
187ACCESS+the viewer needs keyboard/screen-reader support

Templates

Artifacts 187MODEL produces

TemplateWhen to use
product-viewer-spec.mdA 3D product showcase
configurator-state-map.mdVariant selection and state