Component · Aurora Timeline Mini

01 · Embeddable timeline · play / scrub3 tracks

opacity

transform

color

0.00s · 0%

Easing:

02 · Export · @keyframes readoutcompile-on-scrub

@keyframes aurora-mini {
  0%   { opacity: 0;   transform: translateX(-120px) scale(0.6); }
  33%  { opacity: 1;   transform: translateX(-40px) rotate(66deg) scale(0.8); }
  66%  { opacity: 0.9; transform: translateX(38px) rotate(132deg) scale(1.0); }
  100% { opacity: 1;   transform: translateX(120px) rotate(200deg) scale(1.2); }
}

UsageAPI surface

Authoring contract

Each .lsd-atm__key declares its time position via data-t (0–100). Drag diamonds to reposition. The scrubber writes --atm-t on the host; the preview reads that value into transform, opacity, and gradient colours. Switch easing via the chip group. Export emits a real @keyframes block ready for production.

Hook	Values	Effect
`data-t` on key	0–100	Time position in % of duration.
`data-prop` on track	opacity · transform · color · <any>	Which property this track animates.
`data-easing`	linear · ease · spring	Tween curve between keyframes.
`--atm-t`	0–1	Live scrub value; CSS reads to compute preview.
JS event	`atm:scrub`	Fires with `detail.t, time`.
`prefers-reduced-motion`	—	Preview transitions disabled; keys still scrub.

View HTML

<div class="lsd-atm">
  <div class="lsd-atm__preview"><div class="lsd-atm__preview-shape"></div></div>
  <div class="lsd-atm__tracks">
    <div class="lsd-atm__track" data-prop="opacity">
      <div class="lsd-atm__key" data-t="0"></div>
      <div class="lsd-atm__key" data-t="100"></div>
    </div>
    <div class="lsd-atm__scrubber"></div>
  </div>
  <div class="lsd-atm__transport">…</div>
</div>