Motion · WorldStreet

Motion

The Cryonix site slides things 60px on a single ease. We resolve them into focus on real spring curves, and only ever animate transform, opacity and blur, so every frame stays on the GPU and edges stay smooth.

Springs

Three curves sampled from spring physics into CSS linear(), so they feel physical with no JavaScript loop. Race them against a standard ease.

Cryonix-style ease

--cx-spring

--cx-spring-snappy

--cx-spring-bouncy

Code

transition: transform 900ms var(--cx-spring);        /* reveals, rolls: no overshoot */
transition: transform 500ms var(--cx-spring-snappy); /* UI state: tabs, toggles */
transition: transform 700ms var(--cx-spring-bouncy); /* pops: 12% overshoot */

Reveal

Rises 24px while resolving from an 8px blur into focus, siblings 60ms apart. Shorter travel than Cryonix's 60px plus the blur resolve reads as coming into focus, not sliding in.

Protected

Keys never leave your device.

Instant

Transfers land in seconds.

Global

Send to 140+ countries.

Code

<Reveal stagger className="grid">
  <Card>…</Card>
  <Card>…</Card>
</Reveal>

<!-- no React -->
<div class="cx-reveal-group">…</div>   <!-- add .is-in when in view -->

Word rise

Each word lifts out of its own mask, 45ms apart. Keep it for one headline per page, where the story starts.

Code

<h1 className="cx-h1"><WordReveal text="Money that moves like light" fade="center" /></h1>

Rolling numbers

Every digit is a 0–9 strip on its own spring, staggered from the right, with a touch of motion blur while it spins. It rolls up from zero on first view, then between values on every change.

Balance

Members

Code

<RollingNumber value={balance} format={{ style: 'currency', currency: 'NGN', currencyDisplay: 'narrowSymbol' }} />

Sliding tabs

The thumb glides between tabs on the snappy spring instead of jumping. It's built into Tabs, and without JavaScript the selected tab still shows its own background.

Code

<Tabs value={range} onChange={setRange} items={…} />   // sliding is automatic

Tilt

The card leans toward the pointer in 3D with a moving glare, then springs back flat. Layers marked cx-depth float 40px above the surface. Edges stay anti-aliased on the rotated plane.

•••• 2048

Adaeze Okonkwo

Vault

The icon and text sit 40px above the card in 3D.

Code

<TiltCard><PayCard last4="2048" name="Adaeze Okonkwo" /></TiltCard>
<TiltCard className="cx-card"><div className="cx-depth">…</div></TiltCard>

Magnetic

The control leans toward the cursor and springs home with a small overshoot. Use it on the one action you most want pressed.

Code

<Magnetic><Button>Open an account</Button></Magnetic>

Float

Cryonix's floating hero shapes, done softer: every piece drifts on its own clock (7–11s), so they never move in lockstep. It sits over a low aurora and the halo.

Portfolio+4.2% this month

Code

<div className="cx-float" style={{ '--float-dur': '9s', '--float-delay': '-2s' }}>…</div>

Theme reveal

Switching theme spreads the new palette as a circle from wherever you clicked, using the View Transitions API. The toggle in the top bar does the same. Browsers without it switch instantly.

Code

const circle = useCircleTransition();
circle(event, () => applyTheme(next));

Rules for smooth motion

Animate only transform, opacity and filter. Never width, height, top or margin.
will-change goes on only while moving. Reveal drops it once settled.
Use one entrance moment per view. Word rise belongs on the hero, not on every heading.
Motion answers a person's action (tabs, tilt, theme) or tells a story once. Only the aurora, float and marquee loop.
Everything goes still under reduced motion, and nothing is ever left hidden.