The weightless objects
Physics, 3D, Hover
NewFree
Back to the library
The plush claw machine
The header of a made-up arcade, in the rich style: a claw machine seen in 3D at three quarters, with its glass case, a sign with running stripe lights, the joystick and the yellow button, full of stitched plush animals (a bear, a bunny, a fox, a frog, an octopus, a penguin). Aim with the pointer or a finger, click and the claw drops, closes its three steel fingers and grabs a plush, which hangs and swings; grab it off-centre and it slips away, otherwise it goes down the chute and pops out of the prize door.
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>The plush claw machine</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/baloo-2@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="arcade" data-arcade>
<!-- the header of a made-up arcade and toy shop, Pocket Zoo: a claw machine seen at three quarters, full of plush
animals. Move to aim the claw, click or tap to drop it: it closes its three fingers, lifts a plush (which can
slip away), carries it to the chute and drops it into the prize door -->
<canvas class="arcade__canvas" data-canvas tabindex="0" role="img"
aria-label="A claw machine full of plush animals: a bear, a bunny, a fox, a frog, an octopus and a penguin. Move the pointer or use the arrow keys to aim the claw, click, tap or press Space to drop it."></canvas>
<header class="arcade__bar">
<span class="arcade__brand">Pocket Zoo</span>
<span class="arcade__hours">Arcade & toy shop</span>
</header>
<section class="arcade__copy" data-copy>
<h1 class="arcade__title">Catch a <em>friend.</em></h1>
<p class="arcade__lede">Twelve machines, a hundred plush animals and one very honest claw.</p>
<button class="arcade__button" type="button" data-play><span>Play now</span></button>
</section>
<div class="arcade__prize" data-prize aria-hidden="true">
<span class="arcade__prize-small">Prize door</span>
<span class="arcade__prize-text" data-prize-text>You won a fox!</span>
</div>
<p class="arcade__hint" data-hint>Aim, then click or tap to drop</p>
<p class="sr-only" 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.
32 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 plush claw machine” from Animorio and fit it into my siteWhat it does
Pocket Zoo is an arcade and toy shop. To the right of the headline «Catch a friend.» stands its claw machine, seen at three quarters: the coral red cabinet with the speaker grille, the token plate and the prize door with its «PUSH» flap; above, the glass case with steel posts and two slanted reflections on the glass; on top, the teal «POCKET ZOO» sign framed by running yellow and white stripe lights; in front, the control deck with a red ball joystick and a yellow dome button. Inside, on a teal mat in front of a striped wall, the plush toys are piled up: teddy bears, bunnies, foxes with their tails, frogs, octopuses with their tentacles and penguins, soft, with stitches, shiny little eyes and pink cheeks. Moving the pointer (or dragging a finger) slides the steel claw along the bridge under the ceiling and it sways on its cable; the joystick tilts the same way. A click (or a tap, or Space) presses the button: the claw opens its three fingers, drops, closes them and rises. If it closed near the middle of a plush it holds it: the plush hangs from the fingers, swings while the claw carries it over the clear chute, drops in, the prize door flap swings open and the prize pops out with «You won a fox!». If the grab is off-centre, halfway up the plush slips between the fingers and falls back onto the pile, tumbling. After every win a new plush falls in from above. Left alone, the machine plays by itself: one round it wins, the next it does not.
How it works
A hand-made perspective
Every point in the world (x right, y up, z towards the viewer) turns −0.46 radians around the vertical axis and 0.2 around the horizontal one, then goes into perspective by dividing by its distance from the camera. The machine’s faces are projected quadrilaterals; for text, stripes and reflections on a face, setTransform with three projected corners maps a 100 by 100 square onto the face. The size comes from projecting the machine’s corners and scaling until they fit the free area beside the headline (or below it, on a phone).
The plush toys
Each animal is a 2D drawing made of soft shapes: ellipses with a radial gradient, light at the top left and dark at the bottom right, a slightly darker outline, dashed stitches, eyes with a highlight and pink cheeks. Ears, tail, tentacles and feet always start from the edge of the body. The drawing goes at the projected point, as big as its depth allows; shadows, plush toys and the claw are sorted by distance from the camera before drawing.
The claw
The claw follows the aim with a damped spring and sways on its cable with a pendulum pushed by its acceleration. A round is three GSAP timelines in a row: open and drop to the top of the highest plush under the claw, close; rise; carry over the chute and open. Each finger turns around its own pin on the hub; the front one is shortened because it points towards the viewer.
Grab, swing, slip
Once the claw closes, the nearest plush within 0.2 is grabbed; if its distance from the middle is under GRIP the grip is good, otherwise halfway up it slips and falls back with gravity, with a bounce and a rotation that settles. The held plush is a pendulum with two angles pushed by the claw’s acceleration, and it turns around the point where the fingers hold it.
The prize
The plush released over the chute falls behind the clear wall (it is drawn before the wall). When it disappears below the floor, the prize door flap springs open, the plush pops out with an elastic ease and the «You won …» ticket appears above it, placed at the door’s projected position. Then everything closes again and a new plush falls into the pile from above.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SPEED | script.js | 1 | How fast the claw follows the pointer. |
DROP_TIME | script.js | 0.9 | Seconds to drop down to the plush toys (going up takes a little longer). |
GRIP | script.js | 0.08 | How close to the middle of a plush the claw must close to hold it: higher, easier to win. |
SWING | script.js | 1 | How much the held plush swings while the claw carries it. |
LIGHTS | script.js | 1 | The speed of the stripe lights around the sign. |
PLUSH | script.js | 11 | How many plush toys in the case on a computer; a third fewer on a phone. |
PAUSE | script.js | 2.2 | Seconds between the autopilot’s rounds. |
--cabinet, --trim, --teal, --fox… | style.css | corallo, giallo, verde acqua | The colours in :root: the machine and every plush read them again at every resize. |
When to use it
For the header of an arcade, a toy or plush shop, a fair, a games app or a prize contest page. It is a toy: the real information (opening hours, address, prices) also needs to be in plain text.
On phones
Same machine and same game, adapted sizes: the headline and the Play now button sit on top, the machine below, with a third fewer plush toys. Drag a finger to aim and tap to drop the claw; the canvas has touch-action none.
With reduced motion
No motion: the machine stands still with the lights frozen, the claw neither drops nor swings; Play now, a click or Space show the «You won …» ticket straight away with a fade, with the prize already out of the door.
Pitfalls
- Drawing order matters: the plush falling into the chute must be drawn before the clear wall, the pile and the claw after, sorted by distance from the camera.
- Text on a face in perspective is drawn with setTransform on the three projected corners; remember to go back to the screen transform afterwards, or the rest of the frame comes out skewed.
- The held plush must turn around the point where the fingers hold it, not around its middle, or it looks detached.
- Do not add tweens to a timeline while it is running: a round is separate timelines chained with onComplete.
- Pointer aiming inverts the projection on the plane at the claw’s height with a few Newton steps: with a different plane the claw is not under the pointer.
Libraries
GSAP 3.15.0, Baloo 2 (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 17 KB; the libraries: GSAP 28 KB.
Testing
Tested on 22 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.
