Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The windmill hole
A mini golf hole seen from above in a slight perspective: the putter follows the pointer, winds up and strikes, and the ball rolls with real physics between wooden rails, windmill sails that close the tunnel in turn, a little bridge and a ramp. In the cup it circles the rim, drops and the flag jumps.
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 windmill hole</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="campo">
<header class="testa">
<p class="sopra">Breezeway Mini Golf</p>
<h1 class="titolo">Beat the windmill</h1>
<p class="riga">Aim with the pointer: the farther away it is, the harder the putt. Click the green to swing, and time it between the sails.</p>
</header>
<!-- the hole is drawn by the script: turf, wooden rails, the windmill, the bridge, the ramp, the cup and the putter -->
<div class="buca" data-buca>
<svg class="buca__svg" data-svg role="img" aria-label="A mini golf hole seen from above: a windmill guards the tunnel, then a wooden bridge, a ramp and the cup with its flag"></svg>
</div>
<div class="piede">
<div class="conti">
<p class="conto"><span class="conto__nome">Strokes</span> <span class="conto__num" data-colpi>0</span></p>
<p class="conto"><span class="conto__nome">Par</span> <span class="conto__num">3</span></p>
<p class="conto"><span class="conto__nome">Holed</span> <span class="conto__num" data-fatte>0</span></p>
<p class="stato" aria-live="polite"><span class="stato__testo" data-stato>Tee is set</span></p>
</div>
<button type="button" class="tiro" data-tiro data-autoclic>
<span class="tiro__fondo" aria-hidden="true"></span>
<span class="tiro__testo">Caddie putt</span>
</button>
</div>
</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.
41 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 windmill hole” from Animorio and fit it into my siteWhat it does
At Breezeway Mini Golf, an invented course, the hole builds itself: the wooden rails pop up one after the other with a bounce, the little bridge arches over the stream, the windmill rises from the turf and its sails open and start turning, the shrubs and the sign spring up, the flag comes out of the cup and the ball drops onto the tee mat, bouncing. The course is a U: up the left lane and into the tunnel under the windmill, off the slanted bank in the corner, over the bridge, down the other slanted bank, up and down the ramp to the cup. The putter follows the pointer: it turns smoothly and the farther the pointer is the more it draws back, and a line on the turf shows the direction. On click it winds up, pauses for a moment and strikes. The ball really rolls (its printed line turns with it), slows down on the turf, bounces off the rails with a little squash, goes up and down on the bridge and the ramp, and if it reaches the windmill while a sail sweeps by it is knocked back with a flick of wood chips. A line tells the story of the putt: through the windmill, over the bridge, up the ramp. If it arrives slowly at the cup it circles the rim, sinks, the flag jumps out and lands back with a bounce, and the counter says how it went (hole in one, birdie, par). The caddie button plays by itself: it reads the green by trying hundreds of putts in advance, then waits for the right moment between two sails; its first putt from the tee, as a lesson, hits the sail.
How it works
A perspective written by hand
No WebGL: each point of the hole has three coordinates (x, y on the turf, z in height) and a small function brings it to the screen as a camera tilted by half a radian would see it, with distant things a little smaller. Rails, windmill, bridge and putter are prisms: only the faces that look at the camera are drawn, then the lid. To know where the pointer clicked, the sum is done backwards, from the screen to the turf.
Who stands in front of whom
Each raised piece has a key, its farthest y, and the pieces sit in the SVG from the farthest to the nearest. On every frame the ball and the putter are slotted into their place in that row: so the ball disappears into the tunnel, passes behind the near rail of the bridge and in front of the far one, and the flag covers it when it is behind.
Physics in fixed steps
The ball moves in steps of a hundred-and-twentieth of a second, split into smaller steps when it runs fast: the slope of the bridge and the ramp pushes it, the turf slows it (a constant friction plus one that grows with speed), and every rail is a segment the ball is pushed out of and bounces off. The sails are moving segments: where a sail cuts the height of the ball there is a wall sliding sideways, and the bounce takes its speed into account.
The caddie who plays ahead
Precisely because the physics runs in fixed steps, a putt can be played entirely in advance with the same code. The caddie tries every direction and strength without the sails, then refines the best ones until it finds the cup, working a few milliseconds per frame (it is a generator). With the putt ready and the putter wound up, every frame it replays the putt with the sails as they will be at the strike, and strikes when it gets through. The ball leaves after a fixed number of steps, so the prediction is exact.
The lap of the rim and the flag
When the ball is over the cup slowly enough it leaves the physics and a GSAP timeline spins it around the rim the way it was running, speeding up, then sinks it inside a clipPath that cuts everything below the near rim. The flag jumps with power2.out and falls back with bounce.out, while the cloth flaps with an elastic.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
POTENZA | script.js | 1500 | The ball’s speed on the hardest putt, in course units per second (the course is 1000 wide). |
ATTRITO | script.js | 150 | How much the turf slows the ball down. |
SPONDA | script.js | 0.72 | How much the ball bounces off the wooden rails (1 = losing nothing). |
PENDENZA | script.js | 1 | How steep the bridge and the ramp are (0 = flat). |
VENTO | script.js | 0.9 | How fast the windmill turns, in radians per second. |
PALE | script.js | 4 | How many sails the windmill has: more sails, less room to get through. |
GUIDA | script.js | true | The aiming line on the turf. |
When to use it
For the page of a mini golf, a park or a venue, a playable 404 page or a moment of fun inside a site: it is a toy, and belongs where visitors have time.
On phones
The hole stays large and the camera follows the ball, sliding sideways. With no hover, a tap does it all at once: it aims at the finger and putts, with the strength given by the distance. The caddie button plays just like on a computer.
With reduced motion
No motion: the sails stand still with the tunnel open, the putt is computed all at once and the ball fades out and reappears where it stops; if it is holed it disappears and the counter updates, then it reappears on the tee.
Pitfalls
- To predict a putt the physics must run in fixed steps, the same in play and in the trial: with steps tied to frame time the same putt ends in a different spot every time and the caddie misses.
- If the ball leaves when the strike animation ends, GSAP time and physics time drift apart on slow computers and the sails are not where the caddie thought: the ball must leave after a fixed number of physics steps.
- Finding the right putt tries thousands of putts: done all at once it freezes the page for a second. As a generator it works a few milliseconds per frame, and it starts while the ball is still rolling towards where it will stop.
- A rail cut into pieces to follow the ramp shows the faces of the cuts as dark lines: only the two long faces are drawn, and the lids get a thin stroke of the same colour that closes the gaps.
- Winding up next to a rail, the putter head goes through it: the room behind the ball is measured and the wind-up stops short of the wood (the strength of the putt does not change).
- With proportional friction the speed drops without ever reaching zero: below a threshold the ball is really stopped, but only if the slope is not stronger than the friction, or it would hang halfway up the ramp.
Libraries
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 21 KB; the libraries: GSAP 28 KB.
Testing
Tested on 11 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.
