EDITFRAMEMotion catalog
← Back to all studies

Focus & interaction

Contrast Isolation

Loading…
Part8s typicallandscape · portrait · square

Overview

Dim the surrounding preferences while keeping type size bright. Change its slider and preview together, then restore context with the new value preserved.

Build

  1. 01

    Establish the two reading-preference controls.

  2. 02

    Dim context and preserve a bright type-size panel.

  3. 03

    Move the size control and show the text preview grow.

  4. 04

    Restore the full interface while preserving the new value.

Example source React / TSX

examples/focus-contrast-isolation.tsx · Uses the catalog’s shared composition helpers.

Loading source…