Playful Streaming
Adds wave, spectrum trail, magnetize, spin-in, and scale-slam effects to the smooth Markdown reveal.
Wave
Lifts newly arrived tokens into a traveling wave.
Spectrum Trail
Shifts newly arrived characters from a pink core through a purple trail into the text color.
Magnetize
Pulls newly arrived characters in from varied directions, then overshoots and settles without reflow.
Spin In
Rotates newly arrived characters through two turns, then settles them without reflow.
Scale Slam
Scales newly arrived characters down from 2.5×, then rebounds and settles without changing text flow.
PlayfulStreaming is the expressive counterpart to the calmer Streaming
component. Use it when the motion is part of the interface's personality, not
for routine reading surfaces.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Provides the complete Markdown accumulated for the current response. |
isStreaming | boolean | false | Enables pacing and animation while the response is active. |
animation | "wave" | "spectrumTrail" | "magnetize" | "spinIn" | "scaleSlam" | "wave" | Selects the Wave, Spectrum Trail, Magnetize, Spin In, or Scale Slam effect. |
PlayfulStreaming also accepts standard div props except children.
Behavior
Pass the complete Markdown received so far on every render. The component
inherits Streaming's grapheme-safe buffering, cumulative Markdown rendering,
bounded reveal pacing, dir="auto", and aria-busy behavior. Reduced-motion
preferences disable both the pacing and the effect, so content appears
immediately.
Wave moves newly arrived inline tokens with a relative top offset. It does
not turn them into inline blocks, so line wrapping remains stable while the
text moves.
Spectrum Trail uses each character's arrival time to form a pink-to-violet history. A bright pink core and two purple shadows converge behind the inline reading direction, then return to the inherited text color within the shared 400ms reveal. It keeps the spans inline, uses no cloned text or per-frame JavaScript, and mirrors the trail for right-to-left text. Forced-color mode falls back to a plain fade.
Magnetize adapts TrickleKit's scattered-character entrance to cumulative
streaming. New graphemes begin 60ms apart, approach from one of nine
deterministic translate-and-rotate origins, lock into place, overshoot to
1.05, and settle over 900ms. A paint-only copy moves while the real
character preserves line layout and remains the accessibility source.
Reduced-motion preferences show the real text immediately, and forced-color
mode falls back to a plain fade.
Spin In rotates and scales a paint-only copy of each newly arrived character through two turns over 700ms, overshoots, then settles it into place. The real character stays in the inline flow as the layout and accessibility source, so the visual transform does not change wrapping or duplicate copied text. Reduced-motion preferences show the real text immediately, and forced-color mode falls back to a plain fade. Streamdown 2.5 builds animation spans by Unicode code point, so decomposed combining sequences and ZWJ emoji may not rotate as one glyph.
Scale Slam follows TrickleKit's original four-stage motion: each newly arrived
character scales from 2.5 to 0.95, rebounds to 1.02, and settles at 1
over 700ms. New graphemes start 50ms apart, matching the original stagger
without relying on Streamdown's render-scoped delay values. As with Spin In, a
paint-only copy performs the transform while the real character remains in the
inline flow, so small text and mixed-language wrapping stay intact.
Forced-color mode falls back to a plain fade.
The registry item declares Streaming as a registry dependency. Installing
Playful Streaming installs the shared renderer and pacing system as well; it
does not add FlowToken or another animation dependency.
Credits
Wave is inspired by FlowToken. Spectrum Trail uses the same local one-shot streaming lifecycle with an original chromatic convergence effect. Spin In adapts the motion language of TrickleKit SpinIn while preserving the original text flow. Magnetize adapts the varied origins, snap, and overshoot from TrickleKit Magnetize. Scale Slam similarly adapts the motion language of TrickleKit ScaleSlam, including its four scale stops and spring easing, while preserving normal wrapping. Playful Streaming does not depend on these projects.