EDITFRAMEMotion catalog
← Back to index

Focus & interaction

Selective Blur

Loading…
Part8s typicallandscape · portrait · square

Overview

Keep spacing sharp while it changes, transfer sharpness before changing type size, then restore both completed adjustments to full clarity.

Build

  1. 01

    Establish both reading-preference controls.

  2. 02

    Keep spacing sharp as its setting changes.

  3. 03

    Transfer sharpness to type size before its value changes.

  4. 04

    Restore both panels to sharp focus with both adjustments preserved.

Example source React / TSX

examples/focus-selective-blur.tsx · Uses the catalog’s shared composition helpers.

Loading source…