Formation Cards
One deck of cards that rearranges into circle, wave, grid, fan and 3D depth.
Formation Cards treats a dozen portraits as one deck and keeps rearranging it. A click turns the ring into a wave, the wave into a staggered wall, the wall into a grid, a hand held fan, or a room of cards floating at different depths. In the round formations the deck becomes a wheel you can grab and throw, and it keeps spinning with real momentum.
How it works
Twelve portrait cards live in a single deck, and every formation is a set of positions computed per card: a ring for circle, a sine line for wave, an offset lattice for stagger, a tidy lattice for grid, an angular spread for fan, and twelve hand placed depth slots for the 3D mode. Switching modes tweens every card to its new target at once. In circle and fan the whole deck becomes a wheel the visitor can grab and throw, spinning on with real inertia while each card counter rotates to stay upright.
When to use it
Dressed here as a Manchester portrait studio, it fits any brand built on faces or a tight set of cards: photographers, casting agencies, team pages, speaker line ups, trading card drops. It is a full screen piece, best as the centrepiece of a portfolio or people page rather than a widget in a corner.
Why it works
One set of cards shown six ways says versatility without a word of copy. The formations give visitors a reason to keep clicking, and the throwable wheel gives them a reason to stay, because momentum you can feel is the difference between a layout and a toy. Every mode is still the same twelve faces, so the work stays the star.
Recommended for
- Portrait and casting studios
- Team and about pages
- Speaker and event line ups
- Card based collections
Common questions
Can visitors interact with the formations?
Yes. The circle and fan can be grabbed and thrown, spinning with momentum like a real wheel, the 3D depth mode tilts gently with the mouse, and the stagger rows drift with the cursor.
How do the cards stay upright while the wheel spins?
As the deck rotates, every card is counter rotated by the same amount each frame, so the wheel turns while the portraits stay level.
Where does the effect come from?
It follows a public CodePen by designer Filip Zrnzevic, shared under CodePen's MIT licence for public pens, and was rebuilt around the same formation maths for this demo.