Helios Tech Demos

Motion Playground

Twelve free, portable UI transitions. Click a card — or hover the avatars — and feel snappy interface motion. CSS-first: transform, opacity, filter.

t-dropdown

Menu dropdown

Origin-aware open with a soft spring and staggered items.

t-modal

Modal open / close

Backdrop fades. The dialog scales in with a slight blur lift.

t-badge

Notification badge

Diagonal slide, then a spring pop onto the bell.

t-number

Number pop-in

Outgoing digit lifts and blurs. The next one lands from below.

t-check

Success check

Ring pops. The mark draws with a short rotate settle.

t-shake

Error shake

A cubic-bezier rattle when the field refuses the value.

t-avatars

Avatar group hover

Distance-falloff lift. Neighbors rise a little; the hovered one leads.

+2
t-pager

Page slide

Forward and back share one track. The incoming screen pushes the old one out.

Inbox

Thursday review

3 clips waiting · Helios desk

Thread

Ship the motion cut

Keep the badge spring. Drop the rest.

t-icon

Icon swap

Scale down, blur, swap, then spring back — sun to moon.

t-toast

Toast

Rises in with fade, blur, and a tiny scale. Holds, then leaves.

Copied to clipboard
t-tabs

Tabs pill

The pill tracks the active tab. No layout jumps — just transform.

t-resize

Card resize

A compact tile grows. Extra copy eases in — no jump-cut.