The temple that flies away

WebGL, 3D, ScrollWebGL, GSAPAdvancedCompressed weight: Demo 13 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

A temple engraved in WebGL that, as you scroll, trembles, cracks and flies away in pieces, from the top down, while the sky behind fills with red. The pieces float moving in small jumps and the pointer pushes them aside.

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 temple that flies away</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/cinzel@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="bar">
    <a class="brand" href="#">Opera Aperta</a>
    <nav class="bar__nav" aria-label="Sections">
      <a href="#">Programme</a>
      <a href="#">Tickets</a>
    </nav>
  </header>

  <main>
    <!-- a tall section: while it scrolls past, the scene stays on screen and the temple comes apart -->
    <section class="ruin" data-ruin>
      <div class="ruin__view">
        <canvas class="ruin__canvas" data-canvas aria-hidden="true"></canvas>
        <div class="ruin__open" data-open>
          <p class="kicker">Summer season, in the open air</p>
          <h1 class="ruin__title">Some nights the roof is in the way.</h1>
        </div>
        <div class="ruin__close" data-close>
          <h2 class="ruin__title">Opera under an open sky.</h2>
          <p class="ruin__note">Five nights from 10 to 14 July, with nothing between the voices and the stars.</p>
          <a class="button" href="#">See the programme</a>
        </div>
      </div>
    </section>

    <section class="after">
      <p class="kicker">The programme</p>
      <ul class="nights">
        <li><span class="nights__date">10 July</span><span class="nights__title">Orfeo ed Euridice</span></li>
        <li><span class="nights__date">11 July</span><span class="nights__title">Dido and Aeneas</span></li>
        <li><span class="nights__date">12 July</span><span class="nights__title">The Magic Flute</span></li>
        <li><span class="nights__date">13 July</span><span class="nights__title">Norma</span></li>
        <li><span class="nights__date">14 July</span><span class="nights__title">Gala under the stars</span></li>
      </ul>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.

38 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 temple that flies away” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The opening of an invented open-air opera festival, Opera Aperta: at the top «Some nights the roof is in the way.», below it a Doric temple drawn in WebGL as an engraving, with three steps, a wall of blocks in shadow, six fluted columns, the architrave, the frieze with its triglyphs, the cornice and the pediment. The section is four screens tall and the temple stays on screen while it scrolls past. First the stone trembles in small jumps and the joints open; then the pieces come away from the top down: the pediment, the cornice, the frieze, the architrave, the capitals, then the column drums, each cut in three wedges, and the blocks of the wall. They rise turning on an axis of their own, drift sideways and stay floating, moving in small jumps six times a second, like a hand-drawn animation. Meanwhile the sky fills with red from the top, with an edge torn by the engraving’s own lines, and the words give way to «Opera under an open sky.»; the steps remain. The pointer pushes aside the floating pieces near it, and when it leaves they come back. The hatching belongs to each piece, so it turns with it, and slides along itself eight times a second, so the drawing boils.

How it works

The temple in pieces

The script builds the temple one piece at a time: boxes for steps, blocks and cornices, prisms for the pediment, and for each column five drums cut in three wedges, with twenty flutes (the radius drops by 6 per cent at the bottom of each). Every vertex carries the centre of its piece, a random number, when the piece must leave (the highest first, with a little chance), the direction of its lines and which way its crack opens.

The vertex shader moves everything

The scene is a single buffer: for each piece the shader works out how far it has gone, a rotation on a random axis (SPIN), a rise (HEIGHT screens, a little less for the low pieces) and a sideways drift (DRIFT). The floating uses stepped time, floor(time × STEPS) / STEPS, like the site’s column shader.

Before leaving

Within CRACK, and until it leaves, every piece jumps a little at each step and moves five hundredths away from the axis of its column or the middle of the temple: the joints open and the stone trembles. The scroll drives three numbers, crack, rise and sky, with a 0.8-second lag.

The engraving

The stone’s shader is the site’s: the light on each face is compared with a texture of wavy lines made by the script, LINES per unit; below a first threshold it is ink, above it stone, above a second paper, and the lines push the thresholds about. In the dark half of each line is ink, in the light none, in between the lines break into dots. The lines are read in the piece’s resting place, so they turn with it; the wall under the roof has an extra shadow, which goes when the roof goes.

The outlines

Before the stone, a copy of it swollen by OUTLINE along the smooth normals (the average of the normals at each corner, so the copy has no gaps) is drawn seen from inside, all ink: where it sticks out, it is the outline.

The sky and the pointer

The sky is a triangle covering the screen: the red comes down from the top with its edge pushed about by the lines and by a grain that changes in steps, and it is engraved too, darker at the top. The pointer becomes a point on the temple’s front (a ray from the camera meets the plane of the columns); pieces closer than REACH move away from it by PUSH, breathing between 0.6 and 1, with no memory: when the pointer leaves, they come back.

Values to change

Name	File	Default	What it changes
`CRACK`	script.js	`[0.08, 0.26]`	Where the stone trembles and cracks, as a share of the section (from, to).
`RISE`	script.js	`[0.22, 0.9]`	Where the pieces leave, the highest first.
`SKY`	script.js	`[0.28, 0.7]`	Where the sky turns red.
`HEIGHT`	script.js	`1.25`	How high the pieces rise, in screen heights.
`SPIN`	script.js	`2.4`	How far they turn as they rise, in radians.
`DRIFT`	script.js	`2.6`	How far they drift sideways, in temple units (a column is 5 tall).
`PUSH`	script.js	`1.6`	How hard the pointer pushes the floating pieces near it.
`REACH`	script.js	`2.8`	How far the pointer reaches, in temple units.
`STEPS`	script.js	`6`	How many times a second the floating pieces move.
`LINES`	script.js	`8`	How many engraved lines in one temple unit.
`OUTLINE`	script.js	`0.035`	The thickness of the outlines, in temple units.
`RED`	script.js	`[0.71, 0.14, 0.11]`	The red of the sky: red, green and blue from 0 to 1.

Try them in the Playground

When to use it

For the end of a story or the opening of a page that must leave a mark: a festival, an exhibition, a launch. It suits anything made of pieces, a building, a logo in relief, a sculpture; the engraving shader can be given to any model.

On phones

The camera moves back until the temple fits across, and the view rises, so the temple stays low with plenty of sky above. A finger pushes the pieces where it touches; everything else is done by the scroll.

With reduced motion

The section is one screen tall and nothing moves: the temple is already open, its pieces still in the air under the red sky, with the closing words. The pointer does not push.

Pitfalls

To move every piece in the vertex shader every vertex must know its piece’s centre: the buffer has 20 numbers per vertex, and each piece has vertices of its own even where it touches a neighbour.
The swollen outline copy must be pushed along smooth normals: with the faces’ own normals the outline opens at the corners of the boxes.
Lines read in world position would slide over the pieces as they turn: they are read in the resting position each vertex carries along.
Without stepped time the floating pieces look underwater; at six steps a second they look drawn.
On a tall screen the temple fitted across would leave a sea of ground below: the camera rises as much as it takes to keep the ground a tenth from the bottom.
At the end the pieces must stay above the words: the rise is measured in screen heights, not temple units, so on a phone, where the view is taller, they rise further.
Without WebGL2 the section shows just the red sky with the closing words.

Libraries

GSAP 3.15.0, Cinzel (font variabile) 5.3.0, Manrope (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP + ScrollTrigger 45 KB.

Testing

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