Motion study

Bracket Annotation Reveal

Loading…
Scene

Overview

Stagger the lines in. Then draw nested SVG brackets with sliding labels for each region.

Build

  1. 01

    Code lines stagger in.

  2. 02

    Each bracket: stroke-draw, then label slides.

  3. 03

    Nesting order = reading order.

.bracket { animation: bracket-draw 500ms both }
.label { animation: slide-x-in 300ms both 200ms }
Example source React / TSX

examples/bracket-annotation-reveal.tsx · Uses the catalog’s shared composition helpers.

Loading source…