Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The kite in the wind
A diamond kite of coloured cloth flies with real physics: the string and the bow tail are chains of points (Verlet), the cloth bellies and ripples with the gusts, which pass as drawn wind lines and bend the grass and the letters of the title. You drag to pull the string; a click sends a strong gust and the kite loops the loop.
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>Kite in the wind</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the far things: clouds, birds, the wind lines and the hills, drawn behind the title -->
<svg class="layer layer--back" aria-hidden="true" focusable="false" data-back>
<g data-clouds></g>
<g data-birds></g>
<g data-wind></g>
<path class="hill hill--far" data-hill-far/>
</svg>
<header class="poster">
<h1 class="poster__title" data-title>Kite Day on Hollow Hill</h1>
<p class="poster__line" data-line>An afternoon festival on the windy side of town. Bring a kite, the hill brings the wind.</p>
</header>
<!-- the near things: the kite with its tail, the string and the grass in front -->
<svg class="layer layer--front" aria-hidden="true" focusable="false" data-front>
<g data-tail>
<path class="tail__line" data-tail-line/>
<g data-bows></g>
</g>
<g data-kite>
<g data-kite-body>
<path class="sail sail--a" data-panel="0"/>
<path class="sail sail--b" data-panel="1"/>
<path class="sail sail--a" data-panel="2"/>
<path class="sail sail--b" data-panel="3"/>
<path class="sail-shade" data-shade="0"/>
<path class="sail-shade" data-shade="1"/>
<path class="sail-shade" data-shade="2"/>
<path class="sail-shade" data-shade="3"/>
<path class="sail sail--c" data-heart/>
<path class="fold" data-folds/>
<path class="hem" data-hem/>
<path class="spar" data-spars/>
<path class="bridle" data-bridle/>
</g>
</g>
<path class="string" data-string/>
<path class="ground" data-ground/>
<path class="grass grass--dark" data-grass-dark/>
<path class="grass grass--light" data-grass-light/>
</svg>
<p class="hint" data-hint>Drag to pull the string. Click for a gust.</p>
<!-- the whole sky is the button: a press and a drag pulls the string, a click sends a gust -->
<button class="catch" type="button" aria-label="Send a strong gust of wind" data-catch data-autoclic></button>
</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.
29 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 kite in the wind” from Animorio and fit it into my siteWhat it does
The poster of a made-up kite festival, Kite Day on Hollow Hill: a late summer sky that warms towards the horizon, a green hill, grass in front, clouds drifting by and a few birds far away. The letters of the title fly in as if blown by the wind and land with an elastic bounce. The kite starts lying on the grass: the first gust lifts it, the string goes taut and it climbs to where the wind holds it, with its tail of coral and teal bows fluttering below. The wind changes by itself: now and then a gust comes, seen as a bundle of white lines (some with a curl) crossing the sky from the left; where it passes the grass bends in a wave, the letters of the title sway a little more and the kite tugs, while its cloth bellies, the cross spar bows and the trailing edge ripples. If you drag, you pull the string: the kite catches more wind, climbs and tugs; when you let go, the string springs back to the hand. A click sends a strong gust: the hand lets out a little line, the kite turns its nose and loops a full loop, the tail drawing the circle, then wobbles a little and flies on.
How it works
The string and the tail are chains of points
The string is a row of thirty points integrated with Verlet: each point remembers where it was at the step before, and the velocity is the difference. The first point is the hand (fixed), the last is the kite, heavier. The string constraint only shortens: two points further apart than their piece of string are pulled together, closer ones stay free, so the string pulls but never pushes, goes taut and goes slack. The tail is another chain hanging from the bottom tip of the kite, with rigid constraints in both directions.
How the kite flies
The kite gets a push along its nose, a drag along the apparent wind (the wind minus the kite's velocity), its weight and the air braking it. Push and drag grow with the square of the apparent wind: if you pull the string towards you the kite moves into the wind, gets more push and climbs. Its lean is a spring looking for an angle turned a little downwind, plus turbulence and a jolt upwards when the hand tugs.
Gusts cross the screen
Each gust has a start, a rise and an exponential fall, and comes in from the left at a fixed speed: a point on the screen feels it when the front gets there. So the wind lines (SVG paths with a dash running along stroke-dashoffset), the grass bending, the letters swaying and the kite tugging are the same wave, at the same moment.
The cloth that bellies
The diamond is drawn again every frame: the cross spar is a curve that bows with the billow (a spring that overshoots and comes back), the four panels follow the spar, and the edges are sampled curves that belly outwards and, at the back, ripple with a running wave. A small turn about its own axis (the yaw) narrows the diamond and darkens one side, and when the cloth is full two light creases show.
The loop-the-loop
On a click a strong gust starts and GSAP takes an extra angle from zero to a full turn: the lean spring chases it, the push follows the nose and, during the loop, the velocity is steered onto the nose at a steady speed, so the path is a tight circle. The hand lets out a little line (a yoyo tween on the length) so the string does not cut the circle. At the end the angle goes back to zero by taking off a whole turn, and the lightly damped spring makes the kite wobble as it recovers.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WIND | script.js | 1 | How strong the steady wind is: more wind, the kite flies higher and the clouds run faster. |
GUST | script.js | 1 | How strong and how frequent the gusts are (the click's one too). |
TAIL | script.js | 7 | How many bows the tail has: the tail gets longer with them. |
STRING | script.js | 1 | How long the string is. |
GRAVITY | script.js | 1 | How heavy the kite, the string and the tail are: more weight, the kite flies lower. |
LOOP_TIME | script.js | 1.2 | How many seconds the loop-the-loop takes after a click. |
BIRDS | script.js | 3 | How many birds fly far away. |
--sail-a | style.css | #ec5a3f | The colour of two panels of the cloth (the other two are --sail-b, the diamond in the middle --sail-c; the bows are --bow-a and --bow-b). |
When to use it
For the opening of an outdoor festival, a site for children or a school, a toy shop, a windy weather page, a summer page or a 404 page that makes up for itself: anywhere a light, living picture that people can touch is needed.
On phones
The same scene with the sizes adapted: the hand is further left, the string shorter compared to the height and the kite flies more upright, so it stays inside the narrow screen; there are three clouds. You drag with a finger to pull the string (the page does not scroll) and a tap sends the gust.
With reduced motion
Nothing moves: the kite is already in the sky where the wind holds it (the physics runs a few seconds without drawing, then it is drawn once), and the scene and the title fade in. No gusts, no wind lines, no loop-the-loop, and the line with the instructions is not shown.
Pitfalls
- A loop made only with the push along the nose ended on the ground: the strong gust gave too much speed and the circle became huge. During the loop the velocity is steered onto the nose at a fixed value, the wind drag almost switches off and the string gets a little longer: so the circle is tight and up in the sky.
- Turned clockwise, the loop started downwind and the taut string cut it in half: anticlockwise the kite first climbs, towards the hand, where the string is slack, and the circle closes.
- With an unchanging push the kite, on take-off or after a tug, went over the hand and hung on the other side with a slack string: the push drops when the kite is high above the hand (the wind window) and is almost zero past the vertical, so it always falls back downwind.
- With a constraint that also pushes (a fixed distance), the string behaved like a rod: for a string the constraint must only shorten.
- With thirty points and a heavy kite the string stretched like a rubber band: after the iterations a last check keeps the kite inside the length of the string.
- The letters of the title have two spans: GSAP moves the outer one for the entrance, the wind moves the inner one every frame. On a single element one transform wiped out the other.
- The string drawn behind the cloth looked tied to the bottom tip, where the tail starts: it has to be drawn in front, as the person holding it sees it, with the two bridle lines meeting at the knot.
Libraries
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 10 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.
