Skip to content

3D figures

Live drawings of real objects that show what to do, such as the laptop in Arion's onboarding that turns round, opens and closes in on the dictation key.

Live figure

The figure from Arion's dictation key step, drawn with the same camera, shading and timing. Choose another key or press it; the controls stay outside the drawing.

Your dictation key

Hold it while you speak and release to insert.

More figures

The same camera, inks and arrival on three more of Arion's steps. Each figure is one real object, and each answers its step with one physical response.

Live level

The meter lights whole segments as the level arrives: up within 40ms, down over 240ms. The first segment stays lit while the microphone is open, and nothing moves without sound.

Let Arion hear you

The microphone is on only while you dictate.

Progress

The cartridge comes down into its slot along its real axis. The light bar fills in proportion to what has arrived, easing to each amount over 240ms and never moving back; full means done.

Setting up voice input

Recognition downloads once, then works offline.

Two states

A part with two states travels its real path: the shackle rises 10mm in 160ms, then swings open round the long leg in 420ms, and shuts along the same path in reverse. A figure without a move of its own skips the middle slot.

Let Arion type for you

Accessibility access lets Arion put text where your cursor is.

Drawing

  1. 1Model the real object at real proportions, in world units of about a millimetre, with the platform's real layout.
  2. 2Solids, not wireframes: faces filled in paper and shaded by how they face a light from the viewer's left, in steps of a twelfth.
  3. 3One outline where a face turns away and a faint crease where a top meets a side; lines grow from 0.6 to 1px as the camera closes in.
  4. 4Paint back to front by depth, and put a soft two-ring halo under the base.
  5. 5Exactly one part is lit in yellow: the subject. No labels, arrows or callouts inside the drawing.

Choreography

  1. 1The arrival tells the story in overlapping tracks of about one second each, started 250, 650 and 1000ms in, and is done by 2.1s.
  2. 2Zoom evenly in scale ratio, and move the focus from the whole object to the subject with the zoom.
  3. 3A new subject glides the camera to it in 420ms without overshoot, pulling back to 78% of the zoom on the way.
  4. 4Feedback is physical: a press sinks the subject by its real travel, 80ms down, held to 480ms, up by 700ms.
  5. 5With reduced motion the final pose shows at once, and the text beside the figure never moves.

Rendering

  1. 1Draw only when the pose changes; a figure at rest costs nothing.
  2. 2On the desktop, rasterize into one bitmap on the CPU instead of one path per face. On the web, use one canvas with the device ratio capped at 2.
  3. 3Keep a frame under about 10ms at 2×.
  4. 4The figure is one image with a label that says what it shows.