Patterns
The moves that make it feel like WorldStreet. Every glow is built from theme tokens, so flip the theme and watch them re-skin. All motion stops under reduced-motion.
Aurora cards
Blurred fields of gold light drift on different clocks (19s and 26s), so the light never visibly loops. Add aurora to any card.
Bloom
Soft fields that breathe behind the content. The default.
Ribbon
Skewed curtains sliding sideways, like northern lights.
Low
Light pooled along the bottom edge. Good for heroes and CTAs.
Code
<Card aurora="bloom">…</Card> // soft drifting glow
<Card aurora="ribbon">…</Card> // northern-lights curtains
<Card aurora="low">…</Card> // pooled at the bottom edge
<Card aurora="hover">…</Card> // quiet until hovered
<Card aurora="mesh">…</Card> // orbiting pools (see /aurora)
<Card aurora="curtain">…</Card> // folding borealis (see /aurora)
<!-- plain HTML -->
<div class="cx-card cx-lit"><div class="cx-aurora cx-aurora--ribbon"></div>…</div>Hover aurora
In a grid, give every card a quiet aurora that wakes on hover or keyboard focus.
Hold
Every asset in one wallet.
Swap
Move between coins in a tap.
Grow
Track returns as they happen.
Spotlight
A gold light and a lit border follow the cursor. Inside a group, the border light also catches on neighbouring cards as you move across.
Cold storage
Keys held offline, signed on your device.
Live monitoring
Unusual activity is flagged in seconds.
Audited
Reserves verified every month.
Code
<div className="cx-spotlight-group">
<SpotlightCard>…</SpotlightCard>
<SpotlightCard>…</SpotlightCard>
</div>Border beam
A spark travels round the edge. Use it once per view for the featured choice or a live state. It's an animated @property angle on a masked conic gradient.
- Wallet + cards
- 3 free transfers a month
- Unlimited transfers
- Price alerts
- Priority support
- Team wallets
- Invoices + statements
- API access
Code
<Card className="cx-beam" aurora="low">…</Card> // add cx-beam--slow for 9s lapsWallet
The balance history is drawn as the aurora itself: a luminous ridge with shimmering rays, a line that draws once, and a pulse on today's value. The glow carries data, so nothing else needs to.
+₦370,500.00 this month
Code
<Card>
<AmountDisplay value={balance} currency={currency} />
<AuroraChart data={history} label="Balance up 4.2% over 12 weeks" />
<Actions>
<Action icon="send" label="Send" primary />
<Action icon="arrow-down-left" label="Receive" />
</Actions>
</Card>
<PayCard last4={last4} name={name} />
<Limit spent={spent} limit={limit} currency={currency} />Hero
Halo from above, aurora pooled below, film grain on top, and a headline with a slow light sweep.
Money that moves like light
Hold, send and grow every asset from one calm, secure wallet.
Code
<section className="cx-card cx-halo cx-grain">
<Aurora variant="low" />
<Badge icon={<Icon name="sparkle" />}>New · Pro cards</Badge>
<h1 className="cx-h1 cx-shine">Money that moves like light</h1>
</section>Stats band
Big light numbers, tabular figures, hairline dividers. No boxes.
CTA block
The closing pitch. A ribbon aurora carries the energy so the copy can stay short.
Your money, finally calm
Set up in two minutes. No fees to hold.
Code
<Card aurora="ribbon" className="cx-grain">…</Card>
Social proof
A testimonial card and the site's logo marquee. Logos pause on hover, and the track stops under reduced motion.
“We moved treasury over in an afternoon. Settlement went from days to seconds, and the team actually enjoys opening the dashboard.”