Aurora & animation

Two new auroras

Mesh orbits four light pools on two counter-rotating layers (34s and 47s clocks), so the field never visibly repeats. Curtain folds three sheets of rays at different depths, the classic borealis. They join Bloom, Ribbon, Low and Hover on the Patterns page.

<Card aurora="mesh">…</Card>      // orbiting light pools
<Card aurora="curtain">…</Card>   // folding borealis rays

<!-- plain HTML -->
<div class="cx-card"><div class="cx-aurora cx-aurora--mesh"></div>…</div>

Aurora field

A section whose light pool glides after the pointer and parks in the centre when you leave. The loop only runs while the light is moving. On touch and under reduced motion it stays as a still glow.

<AuroraField as="section" size={520} ease={0.08}>…</AuroraField>

Aurora frame

A slowly turning ring of light round one card, bleeding a soft glow outside it. It marks the one featured thing in a view: the plan we recommend, the live call, today’s drop.

<AuroraFrame>
  <Card>…</Card>
</AuroraFrame>
<AuroraFrame fast>…</AuroraFrame>   // 3.5s laps, for live states

Aurora text and rule

The brand ramp flowing slowly through a headline, with a hairline under it that a glint travels along. In light theme the text steps down to the deep shades so it keeps its contrast.

<h1 className="cx-h1"><AuroraText>Your money, lit up</AuroraText></h1>
<AuroraRule />

Aurora pulse

Light that breathes behind one thing: the balance that just changed, or whoever is speaking. Add live for the faster breath.

<AuroraPulse><AmountDisplay value={balance} currency="$" /></AuroraPulse>
<AuroraPulse live><Avatar name="…" /></AuroraPulse>

Success moment

The aurora button pools light under the one action you want pressed and sweeps a sheen across it on hover. When the action succeeds, sparks burst from the press point and the reference settles out of noise.

const burst = useBurst();

<Button variant="aurora" onClick={(e) => { send(); burst(e); }}>Send now</Button>
<ScrambleText text={reference} />

Ripple and sheen

Pressing a card spreads light from your finger. Hovering sweeps a sheen across it. Both are for big tappable surfaces, where a colour change alone is too small to feel.

const ripple = useRipple();

<Card interactive onPointerDown={ripple}>
  <Sheen />
  …
</Card>

Scramble

Characters settle out of noise, left to right. It works for confirmations, references and figures. Screen readers get the final text straight away.

<ScrambleText text="$125,000.00" duration={1100} />

Flip card

Two faces of one thing, turning over on the bouncy spring. It's a real button: click, Enter or Space, and aria-pressed tells assistive tech which face is up.

<FlipCard label="Card details" front={<PayCard … />} back={<CardDetails />} />

Loading, in light

A spinning ring, a comet running along the track, and an aurora sweep across skeletons. Use them for waits long enough to notice: quotes, KYC checks, AI answers.

<AuroraSpinner size={32} />
<AuroraBar label="Getting your quote" />
<div className="cx-skeleton--aurora" style={{ height: 14 }} />

Scroll-linked

These run on the scroll position itself (CSS animation-timeline), with no JavaScript and no observers. Scroll this page and watch: cards rise into focus, the card zooms up to size, and the tiles drift at different depths. The bar along the top of the page fills as you read. Browsers without support simply show the content.

<div className="cx-scroll-rise">…</div>
<div className="cx-scroll-zoom">…</div>
<div className="cx-parallax" style={{ '--speed': 0.3 }}>…</div>
<ScrollProgress />   // the reading bar

Marquee

An endless row that pauses on hover. Run two rows in opposite directions for depth. Under reduced motion it becomes a wrapped list.

<Marquee speed={30}>…</Marquee>
<Marquee speed={38} reverse>…</Marquee>

Across the platform

Where each effect belongs in Cryonix. The rule still holds everywhere: one looping signature per view, and motion that answers the person or marks a moment.

Rules for light

• Use one looping signature per view: a mesh, a curtain, a frame or a field. Two compete, and three are noise.
• Gold light carries meaning: the featured thing, the primary action, a live state, a success. It's never wallpaper on every card.
• Bursts are for success only. Errors get a calm message, not light.
• Pointer effects (field, tilt, magnetic) switch off on touch, and everything goes still under reduced motion. Nothing is ever left hidden.
• Colour comes from tokens only, so a new brand or theme re-skins every effect for free.