Lines & data

Editorial Rule Draw

Loading…
Motif4s typicallandscape · portrait · square

Overview

Reveal the chapter heading first, then scale a full-width hairline from the reading edge. A small caption follows the rule, creating an ordered headline → line → detail sequence.

Build

  1. 01

    Design the final title page with a large two-line serif heading and one accent color.

  2. 02

    Fade and lift the heading over 600ms.

  3. 03

    Start the rule after 500ms and draw it from scaleX(0) to scaleX(1) over 1.1s.

  4. 04

    Reveal the short supporting line at 1.4s and hold the full page.

Example source React / TSX

examples/rule-draw.tsx · Uses the catalog’s shared composition helpers.

Loading source…