The word behind fluted glass

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

In the minimal style, for a made-up glassworks: the name «Ondelle», large on warm white paper, and in front of it a pane of fluted glass. Behind every reed the word bends, narrows and mirrors itself into thin vermilion slivers, as through tinted glass. The pointer slides the pane along the word on a spring; let go and it goes back to its place, passing it by a whisker.

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 behind fluted glass</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/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the name of a made-up glassworks, large, and in front of it a pane of fluted glass. Through the reeds the word
       breaks into thin mirrored slivers, tinted by the glass. The pointer (or a finger) slides the pane along the
       word; let go and it glides back to its place. The script draws the word and the glass on the canvas -->
  <main class="stage" data-stage>
    <canvas class="canvas" data-canvas aria-hidden="true"></canvas>
    <h1 class="sr" data-sr>Ondelle</h1>
    <p class="hint" data-hint>Move across the glass</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.

16 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 behind fluted glass” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper the letters of «Ondelle», in a light serif, land one after the other: they drop a little, take weight and settle. Under the word a hairline draws itself from the left, and at its two ends two small lines appear, the name of the glassworks and the thickness of the glass. Then a pane of fluted glass, three times as tall as the capitals and edged with a line of ink, comes in from the right: it arrives on a spring, passes its place by a whisker and stops over the last letters. Behind the glass every reed shows a strip of what is behind it, wider than itself, squeezed and mirrored: the word breaks into thin slivers, tinted vermilion as through coloured glass, and the line and the caption break too. Every reed is darker towards its grooves, has a soft gleam to the left of its crest and a fine line at the bottom. Moving the pointer, the pane follows it along the page, always on the spring, and the reeds travel with it; when the pointer leaves, it goes back to its place.

How it works

Everything behind, on a canvas

The word and the caption are drawn on a 2D canvas as big as the page, white on black: the shader reads how much ink there is in the red channel. Every letter has its own state (how visible, how heavy, how far above its place) and is drawn on its own at its weight of the variable typeface Fraunces; the positions are measured on the whole word, to keep the kerning. The canvas is redrawn and uploaded as a texture only when something changes.

A reed is half a cylinder

Inside the pane, for every pixel the shader finds the reed and where it is across it (s from −1 to 1), then reads the paper at x = centre − s · half a reed · BEND · (1 + 0.35 s²): every reed shows a strip wider than itself, upside down, and narrower towards its sides, where the glass curves most. Three nearby readings, further apart towards the grooves, make the frosting (FROST).

The light on the glass

What is seen through takes the colour of the glass: the paper becomes --glass and the ink --accent. Then every reed darkens towards its grooves with s to the fifth, takes a Gaussian gleam to the left of its crest and a fine line at the bottom, a pixel and a half wide at any density. The edge of the pane is a line of ink, and inside the line there is the thickness of the glass, a little darker.

The pane on a spring

The pane chases the pointer (or its place, REST) on a damped spring integrated in steps of 1/240 of a second in the GSAP ticker: SPRING sets how quick it is, the damping of 0.62 makes it go past by a whisker. The reeds are counted from the left edge of the pane, so they travel with it, and the pane is a whole number of reeds wide. When the spring stops nothing is redrawn.

The opening

A GSAP timeline lands the letters staggered by 0.075 s (fade, drop with a back.out, weight from 150 to WEIGHT), draws the line with a power3.inOut and lights the caption; then it moves the place of the pane from off the page to REST, and the spring brings it in.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Ondelle'`	The word behind the glass.
`CAPTION_LEFT`	script.js	`'Ondelle Glassworks'`	The small line under the word, on the left.
`CAPTION_RIGHT`	script.js	`'Reeded glass, 8 mm'`	The small line under the word, on the right.
`REED`	script.js	`26`	The width of one reed of the glass, in pixels.
`BEND`	script.js	`1.8`	How much every reed squeezes what is behind it: 1 barely, 3 a lot.
`FROST`	script.js	`0.35`	How frosted the glass is: 0 clear, 1 milky.
`PANE`	script.js	`0.3`	The width of the pane, as a share of the page.
`REST`	script.js	`0.66`	Where the pane rests, from the left, as a share of the page.
`SPRING`	script.js	`0.5`	How quickly the pane answers the hand: 0 slow and soft, 1 quick.
`WEIGHT`	script.js	`360`	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 glassworks, an interior or architecture studio, a furniture brand or a hotel with fluted glass in its rooms: the name stays readable and the glass turns it into material. It also works for the title of a portfolio with a one-word name.

On phones

The same word, nine tenths of the screen wide, and the same pane, narrower: a finger dragged over the page slides the glass, and letting go it goes back to its place. The hint says «Drag» instead of «Move».

With reduced motion

Nothing slides and nothing lands: the word, the caption and the pane already in its place fade in, and the glass stays still.

Pitfalls

The caption, written in the HTML over the canvas, went in front of the glass instead of behind it: the pane covered it only halfway and did not bend it. Now the line and the caption are drawn on the same canvas as the word, and the glass bends everything.
With the pane as wide as any share of the page, the last reed on the right was cut and looked like a flaw in the glass: the width is rounded to a whole number of reeds.

Libraries

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

Compressed with gzip, the three demo files weigh 7.0 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.