Aperture

Smallest brand mark — negative-space cuts through a rounded square, with continuous morphs.

Examples

Click a pose. Openings split and merge — nothing fades. The snippet tracks the selection.

Duotone

<Aperture
  state={APERTURE_CATALOG.plus}
  look={{ size: 280, fill: "#0069F5", background: "#FFFFFF", cut: "#FFFFFF" }}
/>

Playground

Voice moments, form basics, and bloom compositions — diagonal fans, off-center drifts, soft cells. Look morphs with each pose.

DuotoneCircle

<Aperture
  state={VOICE_APERTURE.rest.state}
  look={{ size: 240, fill: "#0069F5", background: "#FFFFFF", cut: "#FFFFFF", cornerRadius: 0.12, roundness: 0.018 }}
/>

Converse with an agent

Prism is the original converse mark. Corner walks two through-cuts around the square. Eclipse blossoms from a rounded slit into cells and voice-driven speak. Diagonal is the third. Listening and speaking use simulated speech unless Voice is on.

Voice input

Best practices

When to use

Use as Smallest’s brand aperture — a graphic mark, loader, or morphing storyboard built from negative-space cuts.
Do not use it as a layout container or icon replacement for Voice Avatar.

Behavior

Any two states morph as a split or merge of full-width openings. Reuse line ids so blades persist; never fade width to zero.
Requires WebGPU. Pause off-screen. prefers-reduced-motion snaps to the target pose.

Accessibility

The canvas is a single image. Provide an aria-label that names the mark, not the cut geometry.

PreviousAlert Dialog NextAvatar