Components / Motion / Aurora

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

Preview

Ship the calm version

A slow wash of the accent and the core, moving behind whatever the hero needs to say.

<div class="k-aurora" style="max-width:430px">
  <i class="b1"></i><i class="b2"></i><i class="b3"></i>
  <div class="k-aurora-in">
    <h3>Ship the calm version</h3>
    <p>A slow wash of the accent and the core, moving behind whatever the hero needs to say.</p>
  </div>
</div>

.k-aurora{width:100%;position:relative;overflow:hidden;border-radius:14px;background:var(--k-zinc-950);color:var(--k-on-color);font-family:var(--k-font)}
.k-aurora i{position:absolute;border-radius:50%;filter:blur(34px);display:block}
.k-aurora .b1{width:230px;height:230px;left:-50px;top:-70px;background:color-mix(in srgb,var(--k-accent) 65%,transparent);animation:k-aur-a 13s var(--k-ease) infinite alternate}
.k-aurora .b2{width:190px;height:190px;right:-40px;bottom:-80px;background:color-mix(in srgb,var(--k-core) 55%,transparent);animation:k-aur-b 17s var(--k-ease) infinite alternate}
.k-aurora .b3{width:150px;height:150px;right:28%;top:-50px;background:color-mix(in srgb,var(--k-accent-ink) 45%,transparent);animation:k-aur-a 15s var(--k-ease) infinite alternate-reverse}
.k-aurora-in{position:relative;padding:28px;text-align:left}
.k-aurora-in h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.k-aurora-in p{margin-top:7px;font-size:13.5px;line-height:1.8;color:var(--k-zinc-300);max-width:34ch}
@keyframes k-aur-a{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,26px) scale(1.15)}}
@keyframes k-aur-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-38px,-20px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.k-aurora i{animation:none}}

Usage

As the backdrop of a hero or a featured card. It is a surface, not a decoration: keep the text on top short and let the wash move.

Accessibility

Pure CSS. Under prefers-reduced-motion the wash holds still; text contrast comes from the dark ground, not the moving color.

Used in these blocks

CTA Band

The last thing on the page: one sentence, one button, lit by the Aurora.

Use Cases

A numbered switcher: pick the reader you are, and the picture changes with the story.

Related parts

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Converge beta

Light streams gather into one tile — many inputs, one place where they land.

glowherostreams

Counter beta

Numbers that count up once, when they arrive on screen — machined, not bouncy.

numbercount-upstatsscroll

Follow Frame beta

A dashed frame that trails the cursor and names the action waiting there.

cursortrackingplayful

Timeline

Beam border