Motion study

Typewriter Brief

Loading…
Scene

Overview

Type into a growing highlight box with selection handles. The box height follows line count.

Build

  1. 01

    Empty highlight box.

  2. 02

    Characters appear on a schedule.

  3. 03

    Box height grows with lines.

  4. 04

    Optional Figma-style handles.

box.height = lines * lineHeight
text = slice(brief, 0, charsAt(t))
Example source React / TSX

examples/typewriter-brief.tsx · Uses the catalog’s shared composition helpers.

Loading source…