Focus & interaction

Interface Typing

Loading…
Part9s typicallandscape · portrait · square

Overview

Type a proportional query with a synchronized caret. Narrow results as the query becomes specific, then hold the matching document with its workspace context.

Build

  1. 01

    Show an empty search field and three page rows.

  2. 02

    Focus the field, then type Roadmap with uneven character timing.

  3. 03

    Keep the caret at the end of each complete character.

  4. 04

    After a brief pause, remove unrelated rows and hold the matching result.

Example source React / TSX

examples/focus-interface-typing.tsx · Uses the catalog’s shared composition helpers.

Loading source…