Core

Scenes you can turn, change and read: coordinates, text, arrows, animation and whole small scenes.

First steps

• The smallest sceneA ground lattice, the axes and a box. at is the point the box stands on.
• Where things gox runs right, y runs into the scene, z runs up. Always.
• More than one thingTwo boxes, two labels and an arrow between them. Everything you add is drawn together.
• Make it moveThe same scene on a timeline: things fade in one after another, the arrow draws, then the result moves.

Cameras

• A parallel cameraYaw and pitch set the angle. Parallel lines stay parallel.
• A perspective cameraThe same scene from a pinhole camera: distant things get smaller.

Controlling things

• Position, rotation, scaleat, rot (degrees around x, y, z) and scale work on every object.
• GroupsPut things in a group to move, turn or scale them together.
• Colour rolesYou pass a role, and CSS decides what it looks like. Change the theme to see everything follow.
• Things that follow thingsanchor() is a point that stays attached to an object, so an arrow between two anchors follows both.

Arrows

• A flow of dataArrows and pulses between devices, driven by one timeline.

Animation

• Building a scene upfadeIn, draw, stagger and seq. A chapter marks a step you can jump to.
• Moving the cameraThe camera animates with the same tween as everything else.

Text and code

• Text on any planewrite(text, { at, u, v, size }). u and v are the directions of the text's right and up.
• Typing code on a screenScreens have code(), and typeOn types it letter by letter.
• A terminalTerminals start empty. write() puts lines in them.
• Text that wrapsText wraps to its box and marks colour chosen words.
• Sizes that fitSizes can be world units, sm, md, lg or a number of lines.

Drawing

• A hand-drawn looksketch: true makes lines wobble and draw twice, the same way every time, on the server and in the browser.
• A pen drawingA line drawn by a pencil that follows it.
• A cube, folded from its netSix squares are drawn on the ground, each gets its letter, then the net folds shut into a cube that turns on its base. The home page uses it.
• Letters that trade placesThe letters c s e e n stand on five squares, c and n in the accent colour. The c steps over the s and the n over an e, so the word reads s c e n e, then they swap back, in a loop.
• A 404, traced on the groundThree digits written as strokes on the lattice, seen from an angle, then lifted off their footprints. The page for a missing address uses it.

Whole scenes

• A small studioSeveral devices in one scene.
• A deployA terminal, a cloud and a status badge, told in steps.