The word in the mirage

WebGL, Text, HoverWebGL, Canvas, GSAPMediumCompressed weight: Demo 6.4 KBGSAP 28 KBFreeDownload the zip

In the minimal style, for a made-up house in the desert: the name «Calima» stands on a thin horizon and under the line hangs its mirage, the same word upside down and squashed, in the blue of water that is not there. At first the air is hot and the letters rise shivering; then it calms and everything stands still. The pointer brings the heat back where it passes: the air shivers near the ground, the mirage breaks up, then it settles again.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The word in the mirage</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the name of a made-up house in the desert stands on a thin horizon, and under the line hangs its mirage: the
       same word upside down, in the blue of water that is not there. The pointer brings the heat: the air shivers,
       the mirage breaks up, then the air calms down and everything stands still. The script draws on the canvas -->
  <main class="stage" data-stage>
    <canvas class="canvas" data-canvas aria-hidden="true"></canvas>
    <h1 class="sr" data-sr>Calima</h1>
    <p class="caption" data-caption>A house at the edge of the dunes</p>
    <p class="hint" data-hint>Move to bring the heat</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.

14 values to change

Open the Playground

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 word in the mirage” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper a thin horizon draws itself from the middle out to both edges. Above the line the letters of «Calima», wide and heavy, appear one after the other in a hot air that makes them shiver: they take weight as they rise, and under the line their mirage is born, the word upside down, lower, in the blue of the water heat makes you see on a road. The air shivers most near the ground and the mirage breaks into ripples; then the heat slowly falls, the letters stand still and the reflection turns sharp, like a still sheet of water. Below, a small line says what the place is. Moving the pointer heats the air where the hand passes, the more the faster it goes: the letters nearby shiver at their feet and the mirage under them breaks; when the hand stops the heat fades in little more than a second and everything stands still again.

How it works

The word on a canvas

The word is drawn once on a 2D canvas as big as the page, white on black and sitting with its baseline on the horizon; the shader reads the ink in the red channel. Every letter has its own fade and weight (wide Archivo, from 200 to WEIGHT), and the canvas is redrawn only while they change.

The hot air

The shader moves the point where it reads the word with three slow rising waves mixed together (sines of y minus time, bent by a sine of x). The shift is SHIMMER pixels times the heat at that point, and above the line it fades going up with exp(d / 0.55 caps): the air shivers mostly near the ground, as on asphalt in summer.

The mirage

Below the line the shader reads the word mirrored, SQUASH times higher up (the mirage is lower than the word), with stronger waves and some stretching when it is hot. It fades going down and with the heat, and takes the accent colour: the blue of water that is not there.

The heat of the hand

The heat is the sum of a heat over the whole page and the heat of the hand, a bell a fifth of the page wide around the pointer. The hand raises it in proportion to the distance it travels (HEAT); every frame the heat is multiplied by exp(−dt / COOL). When both reach zero the drawing stops: nothing is redrawn until the hand comes back.

The opening

A GSAP timeline draws the horizon from the middle with a power3.inOut, raises the heat to 1.6 and lowers it while the letters appear staggered by 0.11 s taking weight, lights the caption and at last brings the heat to zero in 3.4 s: the calm is part of the timing too.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Calima'`	The word on the horizon.
`HEAT`	script.js	`1`	How much the hand heats the air: 0 not at all, 2 a lot.
`SHIMMER`	script.js	`9`	How many pixels the hot air bends the letters.
`COOL`	script.js	`1.4`	The seconds the heat takes to fade by two thirds.
`MIRAGE`	script.js	`0.8`	How strong the mirage under the line is: 0 none, 1 as dark as the word.
`SQUASH`	script.js	`1.5`	How squashed the mirage is: 1 as tall as the word, 3 very flat.
`HORIZON`	script.js	`0.5`	The height of the horizon, as a share of the page from the top.
`WEIGHT`	script.js	`720`	The weight of the word, from 100 to 900.

Try them in the Playground

When to use it

For the opening of the site of a hotel or a holiday house in the desert, by the sea or in a hot place, of a summer festival or a brand of sun cream or sunglasses: the name stays still and readable, and the heat comes only with the hand.

On phones

The same word, almost as wide as the screen; a finger dragged over the page heats the air where it passes, like the pointer. The hint says «Drag» instead of «Move».

With reduced motion

The air is still: the horizon, the word and its sharp reflection fade in, and the pointer heats nothing.

Pitfalls

The heat fading by itself in the frame loop was in no timeline: the preview video stopped as soon as the letters were done, with the air still moving. Now the calm of the opening is a GSAP tween that brings the heat to zero.
At the first try the heat of the hand barely made the letters shiver, and moving the pointer it looked as if nothing happened: the air bends by 9 pixels instead of 7 and the hand heats more, up to 1.4 times the heat of the opening.

Libraries

GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

Compressed with gzip, the three demo files weigh 6.4 KB; the libraries: GSAP 28 KB.

Testing

Tested on 19 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.