Twin-Layer Reserve & Non-Blocking Selection

In generative AI interfaces, two crucial baselines are frequently violated: viewport stability and the user's freedom to copy streamed text immediately.

The Problem of Scrollbar Jitter During Streaming

In traditional chat streams, containers grow by a few pixels on every token. This continuous reflow causes scrollbars to twitch, bouncing text vertically and making it impossible for the reader's gaze to settle on earlier paragraphs.

Twin-Layer Reserve Pre-Measurement Mechanics

Inside TxStreamElement, TuffEx applies the twin-layer reserve technique:

Live Presentation Layer: Fully visible, accessible, and interactive, emitting paced tokens.
Reserve Copy Layer: In replay or pre-calculated contexts, mounts with aria-hidden="true", inert, and visibility: hidden. It claims the full target grid height upfront, locking the container geometry in place.

Coupled with edge trimming on the first margin-top and last margin-bottom, height reflows and scrollbar jitter are completely eliminated.

Motion Must Never Block Reading or Copying

Some designs apply full-screen overlays or user-select: none during generation, forcing users to "wait for the typewriter effect to finish before copying". TuffEx considers this an unacceptable usability defect!

Instant DOM Availability: The moment a token releases into the DOM, it lands as an accessible text node. Users can drag-select and strike Cmd+C at any millisecond without waiting.
Zero Pointer Interception: Transitions operate strictly on visual layers; pointer clicks, double clicks, and drag events are never blocked.

Skip on Interrupt Capabilities

Power users frequently want to bypass animation during intense workflows:

When the user scrolls rapidly, clicks the bottom tray, or presses ESC, the system emits skip().
The remaining token backlog drains within one frame (16ms), rendering complete static text immediately.
Under prefers-reduced-motion: reduce, all pacing delays bypass entirely, guaranteeing unhindered data consumption.