Product and architecture explainers

A diagram of the system, the camera moving from one part to the next, labels that stay on screen, and a 3D model where a flat icon is not enough.

How it is built

• FlowDiagram lays out boxes and arrows, with icons from Lucide, Tabler and brand logos (icons).
• The camera fits the whole diagram, then zooms onto one step; titles added to the view stay put.
• View3d puts lit meshes and glTF models into the 2D scene, with labels that follow them (3D).
• Every scene renders in 16:9, 9:16 and 1:1 from the same code (rendering).

With an agent

Install the skills, then give your agent a first prompt. The oxframe skill tells it how videos of this kind are made, and oxframe check shows it what is wrong before anything is rendered.

npx skills add oxygenframe/oxframe-sdk

Make a 30-second architecture video: browser, API, queue and database as a diagram with icons, then the camera following one request through it.

Start from an example

• An architecture diagram with icons
• A camera tour of a system diagram
• A lit 3D cube in a 2D diagram