Gradient Edge Streaming Text: CSS AI Animation

Gradient Edge Streaming Text

Paragraph lines write themselves left to right behind a feathered leading edge that glows in the accent color before settling to plain text. A gradient clipped to each line, moved by one @property.

Also known as: ai text reveal animation, streaming text gradient, text fade in left to right, llm response animation.

Your bundle grew because date-fns is imported as one whole module. Switch to per-function imports and you win back about 38 KB on the first load.

Color Base size 16px Dark background

HTML

<div class="aia-gradient-edge-stream" role="status" aria-label="Assistant is replying">
  <span style="--i: 0">Your bundle grew because date-fns is</span>
  <span style="--i: 1">imported as one whole module. Switch to</span>
  <span style="--i: 2">per-function imports and you win back</span>
  <span style="--i: 3">about 38 KB on the first load.</span>
</div>

CSS

@property --aia-gradient-edge-stream-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-gradient-edge-stream {
  --c: var(--aia-color, #7c5cff);
  font-size: var(--aia-size, 16px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
  --t: var(--aia-gradient-edge-stream-t);
  font-size: calc(var(--aia-size, 16px) * 1.1);
  line-height: 1.6;
  animation: aia-gradient-edge-stream-run 8s linear infinite;
}
.aia-gradient-edge-stream span {
  /* e: where the writing edge sits, from just before the line to just past it */
  --p: clamp(0, calc(var(--t) - var(--i)), 1);
  --e: calc(var(--p) * (100% + 4.5em) - 2.5em);
  display: block;
  width: fit-content;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    currentColor calc(var(--e) - 2.2em),
    var(--c) var(--e),
    transparent calc(var(--e) + 2.5em)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes aia-gradient-edge-stream-run {
  0%        { --aia-gradient-edge-stream-t: 0; opacity: 1; }
  64%       { --aia-gradient-edge-stream-t: 4; }
  90%       { opacity: 1; }
  97%, 100% { --aia-gradient-edge-stream-t: 4; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-gradient-edge-stream { animation: none; --aia-gradient-edge-stream-t: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-gradient-edge-stream, .aia-gradient-edge-stream *, .aia-gradient-edge-stream::before, .aia-gradient-edge-stream::after, .aia-gradient-edge-stream *::before, .aia-gradient-edge-stream *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Gradient Edge Streaming Text

HTML

CSS

Customizing this snippet

Similar ai animations