← Live page Conversation cards — 3D orbit All tests
01

Orbiting ring

The conversation cards ride a 3D ring. Drag to spin it (or let it idle). Cards face outward — when one travels to the far side of the ring, its real deck back comes into view.

Sparks 1
Sparks 2
Cares 7
Sparks 4
Flow 10
Moments 4
Sparks 7
Virtues 6
Cares 24
Sparks 10
Flow 21
Moments 14

Drag horizontally to spin · backs show on the far side of the ring

02

Tight orbit

Same idea, fewer cards and a tighter radius — reads more like a cylinder of cards than a wide carousel. Useful if the live page only has room for a compact treatment.

Same drag behaviour · denser ring

03

Hover lift

The ring still idles and can be dragged from empty space. Hover a card and it steps forward out of the cylinder, tilting toward the cursor — each card answers on its own.

Hover a card to pull it forward · drag the void to spin

04

Cursor steer

No drag required on desktop — pointer X aims the ring like a dial. Move left and right across the stage and the orbit follows. Touch still drags.

Slide the pointer across the stage · touch to drag

05

Throw / inertia

The ring keeps a constant subtle idle spin. Flick it and momentum rides on top of that drift, then settles back to the gentle turn. Hover a card for a quieter lift/tilt toward the cursor; scroll wheel nudges yaw. This treatment is what now ships on the live homepage under conversation topics.

Idle spin always on · flick to throw · hover a card to tilt · wheel to nudge

06

Magnetic front

The nearest card to the pointer side of the stage eases to face the camera. Click any card to bring it dead-front. Idle spin resumes when you leave.

Aim with the pointer · click a card to lock it front · wheel to nudge

07

Tilt + spin

Full 3D control: pointer Y tips the ring toward or away from you, pointer X drifts the yaw. Drag for direct spin and pitch; scroll wheel yaws. The backs read clearly when the cylinder leans.

Move to aim pitch & yaw · drag for a harder shove · wheel to spin

08

Shipped rail (was on homepage)

The horizontal drag rail that used to sit under “Explore some conversation topics” on the live page. Kept here so the old treatment can be compared against the 3D orbit that replaced it.

Sparks card 1
Sparks card 2
Sparks card 3
Sparks card 4
Sparks card 5
Sparks card 6
Sparks card 7
Sparks card 8
Sparks card 9
Sparks card 10
Sparks card 11
Sparks card 12
Sparks card 13
Sparks card 14
Sparks card 15
Sparks card 16
Sparks card 17
Sparks card 18
Sparks card 19
Sparks card 20