---
id: "2115843606892384496"
source: https://x.com/0xca0a/status/2115843606892384496
author: "☄︎ (@0xca0a)"
media: "video, 1920x1080, 45.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Parts Manager with Live 3D Robot Viewer

## Summary
A screen recording of a light, dense engineering web app for managing robot parts: a terminal installs a package, then a parts table, an assembly tree and an embedded 3D viewer show a lime-green robot arm that can be rotated, exploded and posed with joint sliders. It ends with code editor, terminal and app side by side. Worth studying as a clean pattern for putting real CAD-style 3D inside a calm admin interface.

## Style
- Theme: light (white panels on a pale gray desktop)
- Mood: precise, technical, calm, productive
- Tags: web-app, 3d-viewer, cad, parts-table, assembly-tree, inspector-panel, developer-demo
- Category: Web app, 3D

## Palette
| Role | Hex |
|---|---|
| App surface | #FFFFFF |
| Desktop gray | #E4E5E8 |
| Sidebar tint | #F2F4F8 |
| Table row hover | #F7F6F6 |
| Robot base gray | #C7CBC8 |
| Status green | #76936B |
| Robot lime | #8EE04A |
| Brand red accent | #E5484D |

## Typography
- UI text (table cells, tree nodes, labels): neutral grotesk sans, regular, about 11 to 12px. Closest free font: Inter 400.
- Page and panel titles ("Parts", assembly name): same sans, semibold (600), about 14px.
- Part numbers and revisions in the table: tabular figures or a small mono such as JetBrains Mono 400.
- Status pills: 10px medium sans on tinted backgrounds (Released green, In review amber, Draft gray).
- Terminal and code editor: monospace, 12 to 13px, light theme.

## Layout
- 16:9 recording of a browser window centred on a pale gray desktop with soft drop shadows (0 8px 24px rgba(0,0,0,0.08)).
- App grid: left nav rail about 140px (logo, Overview, Parts, Assemblies, Suppliers, Orders, Reports, user chip at the bottom), a parts table about 220px, an assembly tree about 180px, and the 3D viewport filling the rest.
- Toolbar of small icon buttons above the viewport; a view cube gizmo top right; vertical viewport controls on the right edge.
- Radii 6 to 8px on window and inputs, 1px #E4E5E8 dividers, very little padding (8px rows).

## Elements
- Parts table: columns Name, No., Rev, Status; selected row tinted pale red with a red icon.
- Assembly tree: nested nodes with chevrons and small part icons, a constraints section below.
- 3D viewer: lime robot arm on a gray base with a parallel gripper, soft studio lighting, no floor.
- Inspector popover: joint fields with numeric inputs, a range slider and an Apply button, floating over the viewport.
- Final layout: three tiled windows (code editor top left, terminal bottom left, app right).

## Motion
- 0 to 3s: typing a package install command in a terminal, about 60ms per character.
- 9.9s: app loads, table and tree populate; viewport shows a loading label for about 500ms.
- 18 to 26s: the robot arm rotates under mouse orbit (damped, about 0.1 factor) and parts highlight on hover in the tree.
- 34s: the inspector opens with a 150ms fade and slide; dragging a slider moves the gripper and joints live.
- 42s: windows tile out to show code, terminal and app together.

## Rebuild it
1. Layout with Tailwind grid: `grid grid-cols-[140px_220px_180px_1fr] h-screen bg-white text-[12px]`, dividers `border-r border-[#E4E5E8]`.
2. Table: a simple `<table>` with sticky header, `hover:bg-[#F7F6F6]`, status pills `rounded px-1.5 py-0.5 text-[10px]`.
3. Viewport: React Three Fiber `Canvas` with `OrbitControls` (enableDamping), `Environment` preset studio and a GLB of an original robot arm; tint the links `#8EE04A`.
4. Tree selection sets a `selectedPart` store value; outline the matching mesh with drei `Outlines`.
5. Inspector: a Motion `div` with `initial={{opacity:0,y:-6}}` and `animate` over 150ms; sliders write joint rotations to refs updated in `useFrame`.
6. Add a `GizmoHelper` with a view cube top right.

## Generation prompt
A clean light-theme engineering web app on a pale gray desktop: a narrow navigation rail, a table of robot parts with green and amber status pills, a nested assembly tree, and a large 3D viewport showing a lime green industrial robot arm on a gray base being rotated and posed with joint sliders in a floating inspector panel; crisp small sans-serif UI text, soft shadows, precise and calm.