Aperture

Lab

Grid

Agents

Echo

A bend travels along the cut with the voice, and older copies of the cut trail behind it, fading from white into the fill. Speaking bends it away from the person; listening bends it toward them.

Split

Any mark splits into a row of circles and merges back, in one gesture: its cuts close like an aperture while new seams open and the pieces round and part. Arrangement keeps the built stack, row and ring splits.

Eclipse

A second disc overlaps the mark: where they overlap is white, with the cut's gooey corners, and the rest of the disc takes a second colour. While listening, the person's disc moves into the mark with their voice; while speaking, it eases back out.

Card

A small Aperture circle in the top-left of a white card bursts out through the card's edges, and its lines take the card's colour, flooding out from the corner or settling once it lands. The motions are the mark's own, in two systems (Creature, Cant, Inertia; Corner, Pivot, Migrate, Drift), blown out into the card, or Weave, drawn for it.

Agent

An agent card: the agent's own mark is its avatar. Start call bursts the mark out into the card from wherever it sits, and a live transcript, as text or chat bubbles, plays over it while the mark speaks, listens and thinks with the conversation. End call, top-right, lands it back. Detailed shows the agent in full; Simple is just the mark, the name and one line.

Agent grid

A grid of agents in one card, each its own live mark. Pick one and its mark bursts out of its tile to fill the card, covering the others, and the conversation plays over it. End call lands it back in its tile.

import { Aperture, createConversationChoreography, useApertureVoice } from "@smallest-inc/aperture";
import "@smallest-inc/aperture/styles.css";

// A 3×2 grid of agents in one card, each its own live mark (256px, a circle) in its
// motion's preview state. Pick one and its mark bursts out of its tile to fill the card,
// covering the others as it grows (the burst canvas is clipped to the growing circle), and
// the conversation plays over it. End call lands it back in its tile.
//
// The tile's voice engine feeds both its own canvas and the burst, so the burst starts on
// exactly the frame the tile shows. In a call, the conversation drives that engine:
//   agent talking → "speaking", caller talking → "listening", between turns → "thinking".
const { apertureRef } = useApertureVoice({ choreography, size: 256, look, override: state, simulated: true });

Agent fan

The About page's card fan, with an agent's live mark on each card. Hover straightens a card and slides the others aside, and a tooltip names the agent. Pick one and it moves to the centre as the others fall away, then its mark bursts out to fill the card and the conversation plays over it.

import { Aperture, createConversationChoreography, useApertureVoice } from "@smallest-inc/aperture";
import "@smallest-inc/aperture/styles.css";

// The About page's card fan at its own geometry (275×341 cards, 188.8px slots), scaled to 60%,
// with an agent's live mark on each card (surface: 50). Hover straightens a card and the
// others make space; a tooltip names the agent. Pick one: it moves to the centre and grows while
// its mark bursts out to fill it, and the call plays over it. End call lands it back in the fan.
const { apertureRef } = useApertureVoice({ choreography, size: 360, look, override: entry.preview, simulated: true });

Best practices