Streaming

Content delivered incrementally.

html

<div class="lod-str-stage" data-chunks="two" role="status" aria-live="polite">
  <p class="lod-str-text">
    <span class="lod-str-c1">The response streams in as tokens arrive.</span>
    <span class="lod-str-c2"> No need to wait for the whole reply.</span>
    <span class="lod-str-c3"> Each chunk renders the moment it lands.</span>
    <span class="lod-str-cursor" style="background:#241430;"></span>
  </p>
  <p class="lod-str-caption">two chunk(s) received so far</p>
</div>
<style>
.lod-str-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430; }
.lod-str-text { margin: 0; line-height: 1.6; }
.lod-str-c2, .lod-str-c3 { display: none; }
[data-chunks="two"] .lod-str-c2,
[data-chunks="three"] .lod-str-c2,
[data-chunks="three"] .lod-str-c3 { display: inline; }
.lod-str-cursor { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; margin-left: 2px; }
.lod-str-caption { margin: 10px 0 0; font-size: 11px; color: #241430aa; }
@media (prefers-reduced-motion: no-preference) {
  .lod-str-cursor { animation: lod-str-blink 900ms steps(1) infinite; }
  @keyframes lod-str-blink { 50% { opacity: 0; } }
}
</style>

tailwind

<div role="status" aria-live="polite" class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]" data-chunks="two">
  <p class="m-0 leading-relaxed">
    <span>The response streams in as tokens arrive.</span>
    <span class="tw-str-c2 hidden"> No need to wait for the whole reply.</span>
    <span class="tw-str-c3 hidden"> Each chunk renders the moment it lands.</span>
    <span class="tw-str-cursor inline-block w-[7px] h-3.5 ml-0.5" style="background:#241430; vertical-align:-2px;"></span>
  </p>
  <p class="mt-2.5 text-[11px] text-[#241430]/70">two chunk(s) received so far</p>
</div>
<style>
[data-chunks="two"] .tw-str-c2,
[data-chunks="three"] .tw-str-c2,
[data-chunks="three"] .tw-str-c3 { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .tw-str-cursor { animation: lod-str-tw-blink 900ms steps(1) infinite; }
  @keyframes lod-str-tw-blink { 50% { opacity: 0; } }
}
</style>

react

export function Streaming({
  chunks = "two",
  cursor = true,
  accent = "#241430",
}) {
  const showC2 = chunks === "two" || chunks === "three";
  const showC3 = chunks === "three";
  return (
    <div role="status" aria-live="polite" style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <p style={{ margin: 0, lineHeight: 1.6 }}>
        <span>The response streams in as tokens arrive.</span>
        {showC2 && <span> No need to wait for the whole reply.</span>}
        {showC3 && <span> Each chunk renders the moment it lands.</span>}
        {cursor && <span className="cursor" style={{ display: "inline-block", width: 7, height: 14, verticalAlign: -2, marginLeft: 2, background: accent }} />}
      </p>
      <p style={{ margin: "10px 0 0", fontSize: 11, color: "#241430aa" }}>{chunks} chunk(s) received so far</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .cursor { animation: lod-str-blink 900ms steps(1) infinite; }
          @keyframes lod-str-blink { 50% { opacity: 0; } }
        }
      `}</style>
    </div>
  );
}