Tiles that rise

SVG, Hover, PhysicsGSAPMediumCompressed weight: Demo 6.3 KBGSAP 28 KBFreeDownload the zip

A tiled floor seen from above at an angle, drawn tile by tile in SVG. Under the pointer the tiles rise like little columns, the one underneath most and the others less and less, each on a spring. A click drops a pebble and a ring of raised tiles runs away from it; the two pieces standing on the floor go up and down with their tile.

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>Tiles that rise</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/dm-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="room" data-room>
    <header class="bar">
      <a class="brand" href="#">Grout &amp; Co.</a>
      <nav class="bar__nav" aria-label="Sections">
        <a href="#">Terracotta</a>
        <a href="#">Zellige</a>
        <a href="#">Showroom</a>
      </nav>
    </header>

    <div class="words">
      <h1 class="words__title">Floors you want to touch.</h1>
      <p class="words__line">Hand-glazed terracotta and zellige, laid by people who care about the grout.</p>
      <a class="words__button" href="#">Book a showroom visit</a>
    </div>

    <!-- the floor: an isometric grid drawn by the script, one group per tile (two sides and the top) -->
    <svg class="floor" data-floor aria-hidden="true"></svg>

    <p class="hint" data-hint>Move over the floor. Click to drop a pebble.</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.

24 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 “Tiles that rise” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The home page of an invented tile shop, Grout & Co.: at the top left the headline “Floors you want to touch.”, a line and a button; the rest of the screen is a chequerboard floor of terracotta and cream seen from three quarters, starting from a corner in the middle of the page and running past the edges. Every tile is a shade off its neighbours, like handmade ones, and has a visible edge. On it stand a plant in a terracotta pot and a blue vase. On arrival the two pieces are set down on the floor and a first pebble starts a wave. Moving the pointer, the tiles under it rise: the one underneath by 34 pixels, the others less and less up to two and a half tiles away; as they rise they show their darker sides, and they bounce a little before they stop. A click drops a pebble: a ring of raised tiles runs away at seven tiles a second and dies down in two or three seconds. If a tile with a piece on it rises, the piece goes up with it. With no pointer for two and a half seconds, an invisible pointer walks over the floor.

How it works

The floor in perspective

The floor has its own coordinates, u and v, in tiles; on screen they become x = X0 + (u − v) · L/2 and y = Y0 + (u + v) · L/4, where L is a tile’s width from corner to corner. The same formula backwards takes the pointer onto the floor. Only the tiles that can be seen are made, plus a margin for raised ones.

Three faces a tile

Every tile is an SVG group with three polygons: the two front sides and the top. The top moves up by THICK plus the height; the sides run from the corners on the floor to those of the top, so at rest they are a thin edge and they stretch as the tile rises. The sides take the tile’s colour at 80% and 66%.

Front and back

The tiles are added diagonal by diagonal, from the furthest to the nearest, so a raised tile covers the ones behind it and is covered by the ones in front without sorting anything. Each piece goes in right after its tile, and rises with it through a group that gets the same height.

Height and spring

For every tile the height wanted is LIFT · (1 − d/RADIUS)², where d is the distance from the pointer measured on the floor, in tiles: that is why the raised area is a circle on the floor and an ellipse on screen. The real height follows it on a spring, SPRING, stiffness and damping, which overshoots a little and comes back. Tiles at rest and at zero are not redrawn.

The pebble

A click adds a growing ring: at distance d and time t it is worth PEBBLE[0] · e^(−PEBBLE[2]·t) · e^(−((d − PEBBLE[1]·t)/0.9)²). The rings add up with the pointer and go through the spring too, so the tiles sway as one passes.

Values to change

Name	File	Default	What it changes
`TILE`	script.js	`74`	A tile’s width on screen, corner to corner, in pixels; on a narrow screen it shrinks.
`RADIUS`	script.js	`2.4`	How far around the pointer the tiles rise, in tiles.
`LIFT`	script.js	`34`	How high the tile under the pointer rises, in pixels.
`SPRING`	script.js	`260, 15`	Every tile’s spring: stiffness and damping. With less damping they bounce more.
`PEBBLE`	script.js	`26, 7, 1.6`	The pebble: its ring’s height in pixels, its speed in tiles per second, how fast it dies down.
`WANDER`	script.js	`2.5`	The seconds without a pointer before an invisible one walks over the floor; at 0 never.
`GLAZES`	script.js	`#c8694a, #efe3cf`	The chequerboard’s two glazes.
`JITTER`	script.js	`0.05`	How far each tile’s glaze strays from its neighbours’, as in handmade tiles.
`THICK`	script.js	`4`	A tile’s edge at rest, in pixels.

Try them in the Playground

When to use it

For an opening page that should make people want to touch: tiles, floors, board games, a map, a chequerboard of products. It works with tiles big enough to be seen rising, 50 to 90 pixels, and a calm background; with small tiles the picture becomes a shimmer.

On phones

The floor starts lower and the tiles are smaller (at least 44 pixels). A finger on the floor raises them like the pointer and a tap drops the pebble; when the finger lifts, after two and a half seconds the invisible pointer walks. Over the floor the page does not scroll.

With reduced motion

The tiles do not move and there are no pebbles and no walks: under the pointer the top faces lighten, up to a third of the way to white for the one underneath, and go back to their colour when the pointer leaves.

Pitfalls

If an object’s height adjustment and the animation that sets it down on arrival touch the same element, one wipes out the other. Each object has three groups: where it stands, how high its tile is, and the object GSAP sets down.
The distance from the pointer must be measured on the floor, not on screen: measured on screen, the raised area would be a circle squashed the wrong way, deeper than wide.
A spring with no floor, after a hard bounce, takes the top below the floor and the sides turn inside out: the height never goes below −THICK.
A CSS transition on the transform, as on the original site, does not run on the page’s clock: slow motion and frame-by-frame would not stop it. Here the spring runs in the frame loop.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, DM Sans (font variabile) 5.3.0.

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

Testing

Tested on 2 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

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.