Falling tools
Physics, Hover
NewFree
Back to the library
The business cards to flick
In the minimal style: a stack of thin white business cards, one line of type on each. The top one can be held by any point and turns around it like paper on a table; thrown, it flies off spinning, turns back as soon as it is clear, slips underneath and lands at the bottom of the stack, while the others move up one place on staggered springs.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halden Vos, business cards</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hubot-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole table is the button that sends the top card to the bottom; the top card can be dragged and thrown -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A stack of business cards. Press to send the top card to the bottom of the stack.">
<div class="pile" data-pile aria-hidden="true"></div>
<p class="hint" data-hint>Drag the top card and throw it</p>
<p class="sr" aria-live="polite" data-live></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
28 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The business cards to flick” from Animorio and fit it into my siteWhat it does
A warm grey table and, in the middle, the six business cards of an invented studio, Halden Vos: white cards with a hairline edge, a little askew on top of each other, each with a single line at the bottom left, the name in black and the role. At the start the cards drop onto the table one at a time, from the bottom of the stack up, and each lands on a spring, a little bigger while it is in the air and then down into its place. Only the top card wears the colour: when it reaches the top its line opens on the width axis of the typeface with a spring, and the role turns from grey to red. The top card can be picked up with the mouse or a finger at any point: it rises a little, its shadow grows and always falls straight down, and pulled by a corner it turns around that point and trails behind like a real sheet of paper. Let go slowly it goes back to its place with a small bounce; thrown, or pressed without dragging, it pulls back a hair and leaves spinning. As soon as it no longer touches the others it changes layer, comes back along a curve, slips under the stack and lands at the bottom; arriving, it gives a light push to the cards above it, strongest to the lowest one. Meanwhile the others move up one place each, from the top down, one after the other on springs that just bounce, and their angles change too; the ones further down are a breath darker.
How it works
A rigid body for each card
Each card is a div with a position, an angle, a velocity, a spin and a «lift» that becomes its scale and its shadow. The script moves them in fixed steps of a two-hundred-and-fortieth of a second inside gsap.ticker and only writes the transform: translate3d, rotate and scale. Every place in the stack has its own angle and small offset, written in two lists, so the stack at rest always looks the same; when everything is still the physics goes to sleep and puts every card in its exact place.
The hand holds a point
On pointerdown the point of the card under the hand is worked out in the card's own coordinates (turned back by its angle). While dragging, a stiff spring pulls that point towards the hand: the force moves the card and, crossed with the lever arm, turns it in proportion to its moment of inertia ((W² + H²) / 12). The table brakes at the middle, so pulled by a corner the card trails behind on its own, with no rule about tilting at all.
The throw and the way back under
On release the speed is measured over the last 90 milliseconds of the pointer: above THROW the card flies, its speed kept between a minimum (so it always gets out of the stack) and a maximum, and slowed by the air. A test between turned rectangles (the separating axes of the two rectangles) tells when it no longer touches any other card: only then does its z-index drop below all of them, so the change of layer never shows. Then a softer spring brings it back to the bottom place, at the nearest angle in the direction it was spinning, so it finishes the turn instead of unwinding.
The stack moving up in a wave
When the top card leaves, the order of the stack changes at once, but each card moves to its new place RIPPLE seconds later per position: the new top first, the last one last. Each gets there on its own spring (SETTLE: frequency and damping) with a small kick to its lift, so the stack rises like a wave. The card slipping back underneath, as it lands, gives the ones above a push in the direction it was coming from, strongest at the bottom and almost nothing at the top.
The colour and the type
The typeface is Hubot Sans variable, with the weight and width axes (font-stretch). The card that reaches the top gets a gsap.fromTo on the --wd and --wg variables, from a narrow light line to the full one, with elastic.out: the line opens like a breath. The role turns from grey to red with gsap.to on the colour and goes back to grey when the card slips underneath. The lift shadow is a layer inside the card, moved by the opposite angle, so it always falls straight down. With reduced motion the card fades out and comes back under the others, without moving.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
CARDS | script.js | [['Halden Vos', 'Studio'], ['Mira Halden', 'Partner'], …] | The cards, top first: a name and a role, on the same line. |
THROW | script.js | 650 | How fast, in pixels a second, a card must be let go to fly off: slower, it springs back. |
REACH | script.js | 0.8 | How far the thrown card flies before it turns back, in card widths. |
SPIN | script.js | 1 | How much the thrown card spins: 0 not at all, 2 twice as much. |
SETTLE | script.js | [4.2, 0.48] | The springs of the stack: how quick they are, in hertz, and how much they are held back (1 = no bounce). |
RIPPLE | script.js | 0.05 | The seconds between one card and the next as the stack moves up a place. |
LIFT | script.js | 0.05 | How much bigger a card looks when it is lifted off the table. |
--accent | style.css | #d6452c | The colour of the role on the top card, the only colour on the page. |
When to use it
For the «about» or contact page of a studio, an agency or a freelancer, for a portfolio that introduces people one at a time, for the team of a landing page or the speakers of an event: each card is a person, and flicking through them is the fun.
On phones
The same physics with the card smaller relative to the screen. You drag and throw it with a finger; a tap throws it on its own, and on a tall screen the card leaves upwards, where there is room, instead of sideways.
With reduced motion
Nothing moves: the stack fades in all at once. A click or a tap fades out the top card; it comes back under the others and the role on the new top card takes the colour.
Pitfalls
- The first automatic throw left upwards on a fixed diagonal: on the wide computer screen the card went out of the top of the page and the way back under the stack could not be seen. The direction now depends on the shape of the screen: sideways on a wide one, upwards on the tall phone screen.
- The card coming back was darkened like the ones at the bottom while it was still flying outside the stack, and looked like a grey sheet: the shade only comes when it has landed. In the same way its lift shadow, turning under the stack, made a halo around the whole stack: underneath it has no shadow.
- With the cards fading in one at a time at the start, two lines of text showed on top of each other as they arrived, the new card's and the one below: the opacity now arrives in seven hundredths of a second and, with reduced motion, the whole stack fades in together.
- The first click, arriving shortly after the opening, was ignored: the stack only called itself ready at the end of the whole opening timeline, hint included. Now it is ready as soon as the last card is on the table.
Libraries
GSAP 3.15.0, Hubot Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 14 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
