Explanation

Text and code on planes

write puts text on any plane. code does the same for code, coloured by a small tokenizer. Both wrap to their box.

Text on any plane

Drag to turn, scroll or pinch to zoom, double click to reset.

import { Scene, ground, write } from 'cseen';

const s = new Scene();
s.add(ground());
// u and v: the directions of the text's right and up
s.add(write(['Hello,', 'floor.'], {
  at: [-4.5, -2.2, 0.01], u: [1, 0, 0], v: [0, 1, 0], size: [3.4, 2], fontSize: 0.7, border: 'faint',
}));
s.add(write('A wall', { at: [0, 3, 0], size: [3.2, 1.3], fontSize: 0.8 }));   // default: x right, z up
s.add(write('A slope', {
  at: [1.5, -2, 0], u: [1, 0, 0], v: [0, 0.5, 0.87], size: [3, 1.2], fontSize: 0.7, color: 'var(--cn-accent)',
}));

u and v are the directions of the text’s right and up, so the plane can face any way: a floor, a wall, a screen.

Screens

Devices with a screen have write and code. The text is laid out inside the screen, from the top left.

Typing code on a screen

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, Timeline, typeOn, wait } from 'cseen';
import { laptop } from 'cseen/devices';

const s = new Scene();
const lap = s.add(laptop({ width: 4.2 }));
const src = lap.code([
  'const s = new Scene();',
  's.add(ground(), laptop());',
  '',
  '// animate it',
  'tl.play(fadeIn(laptop));',
], { numbers: true });

const tl = new Timeline();
tl.play(typeOn(src, 5));
tl.play(wait(1.2));

typeOn types it letter by letter. Wrapping is computed before typing, so words never jump lines in the middle of a word.

A terminal

Terminals start empty. write() puts lines in them.

A terminal

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, Timeline, typeOn, wait } from 'cseen';
import { terminal } from 'cseen/devices';

const s = new Scene();
const term = s.add(terminal({ width: 4.4, title: 'zsh' }));
const out = term.write(['$ npm install', 'added 1 package', '$ npm run build', 'done in 0.4s'], { cursor: true });

const tl = new Timeline();
tl.play(typeOn(out, 4));
tl.play(wait(1.2));

Wrapping and marks

wrap is 'word', 'char' or 'none'. mark colours chosen words with a role or any CSS colour, matching strings, regular expressions or [start, end] ranges.

import { Scene, write } from 'cseen';

const s = new Scene({ view: 'front' });
s.add(write('Deploying to production. This takes two minutes.', {
  size: [4, 1.2],
  fontSize: 'md',
  mark: { production: 'accent', 'two minutes': 's2' },
}));

Text that wraps

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, Timeline, typeOn, wait } from 'cseen';
import { browser } from 'cseen/devices';

const s = new Scene();
const win = s.add(browser({ width: 4.4, url: 'status.example.com' }));
// long lines wrap to the window and shrink to fit, so nothing runs past the edge
const msg = win.write(
  'Deploying the new version to production. This takes about two minutes, and nothing needs to be restarted.',
  { fontSize: 0.22, mark: { production: 'accent', 'two minutes': 's2', restarted: 'faint' }, cursor: true },
);

const tl = new Timeline();
tl.play(typeOn(msg, 4));
tl.play(wait(1.2));

Sizes that fit

Sizes can be world units, a preset ('sm', 'md' or 'lg', relative to the box), or lines: n, meaning n lines fill the box. Text that still does not fit shrinks, or is cut off if you ask for overflow: 'clip'.

Sizes that fit

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, write } from 'cseen';

const s = new Scene({ view: 'front' });
const text = 'Size text by preset, by lines, or in world units.';
// 'sm' | 'md' | 'lg' are relative to the box, so they work at any scale
s.add(write(text, { at: [-4.8, 0, 0.9], size: [3, 1.6], fontSize: 'sm', border: 'faint' }));
s.add(write(text, { at: [-1.5, 0, 0.9], size: [3, 1.6], fontSize: 'md', border: 'faint' }));
s.add(write(text, { at: [1.8, 0, 0.9], size: [3, 1.6], fontSize: 'lg', border: 'faint' }));
// "lines: 2" means two lines fill the box
s.add(write(text, { at: [-4.8, 0, -1.0], size: [3, 1.6], lines: 2, border: 'faint' }));

Limits

Text widths assume a monospace font, which is the default. For another font, give the layout a charWidth. The widths are approximate for custom fonts.