The word behind fluted glass
WebGL, Text, Hover
NewFree
Back to the library
The linen headline that wrinkles
A minimal-style WebGL animated headline: a word printed on a pale linen panel, in the middle of a warm white page. The pointer pinches the cloth and pulls it: the fabric follows the finger and the folds run along the pull, sculpted by the light, while the panel's shadow widens. Let go and the linen springs back and settles; a tap leaves a crease that slowly relaxes.
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>Ordo Linen</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>
<!-- a word printed on a swatch of linen: the pointer pinches the cloth and pulls it, the folds run along the pull
and spring back when you let go; a tap leaves a crease that slowly relaxes -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<div class="ripiego" aria-hidden="true"><span data-ripiego>Woven</span></div>
<h1 class="parola" data-parola>Woven</h1>
<header class="testa">
<p class="marchio" data-entra>Ordo Linen</p>
<p class="testa__nota" data-entra>Washed linen, cut to order</p>
</header>
<footer class="piede">
<p class="nota" data-entra data-nota>Pinch and pull the cloth, tap to crease it</p>
<p class="stato" data-entra>Cloth <span data-stato>resting</span></p>
</footer>
</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.
20 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 linen headline that wrinkles” from Animorio and fit it into my siteWhat it does
In the middle of a warm white page there is a linen panel from Ordo Linen, an invented linen workshop, with the word Woven printed in a serif face and a vermilion running stitch along the top and bottom hems. On arrival the cloth settles with two long waves that die out, and the ink appears as if soaked up by the linen. The pointer pinches it: press to take hold of the fabric at that spot, drag to pull it. The linen near the grip follows the finger, less and less further away, and along the pull the folds appear, a ridge in the middle and two or three lower ones at the sides, as many and as deep as you pull; the word bends with them, the light from the top left sculpts them and the panel's shadow on the page widens where the cloth lifts. Let go and the linen springs back into place, overshoots a little and settles. A tap without dragging leaves a crease: the cloth puckers by itself and slowly relaxes. With a mouse over the cloth, the pointer presses a small dimple. The weave is real: warp and weft pass over and under, every thread a little different, a few paler slubs, and the ink breaks up on the threads. At the bottom a label says whether the cloth is resting, pinched or settling. When nobody touches it, a fake hand pinches and pulls it twice, then creases it with a tap.
How it works
Cloth in a shader
Everything is a single WebGL 2 fragment shader on a triangle as big as the page. For each pixel a function, stoffa(p), says two things: how high the cloth is there, in pixels, and where the linen lying there comes from, that is how far it has been pulled from its place. The folds are the height; the weave, the ink and the hem are read at the original point, so they move with the fabric.
A grip
Each grip has the point where the linen was taken and the point where the finger is now. The linen near the grip moves with the pull, with a Gaussian weight as wide as REACH. The folds lie along the segment between the two points, a little behind it too, and are a cosine across the pull: a higher ridge in the middle and two or three lower ones at the sides, as deep as the pull is long.
Light and weave
The slope comes from the screen derivatives, dFdx and dFdy, so the cloth function is called only once per pixel, and becomes a normal; the light comes from the top left, with a faint sheen. The weave is a grid of THREAD-pixel threads, warp and weft alternating over and under as in plain cloth, each thread with its own random thickness and a few paler slubs; where the threads get thinner than a pixel the weave fades, so it does not shimmer.
The spring
The grips live in JavaScript: held, the cloth follows the finger on a stiff spring with a hint of lag; released, it goes back on a softer spring that overshoots a little; a tap's crease is born already pulled in a random direction and returns slowly. There are at most four grips, and one that is back in place is removed.
The widening shadow
Under the panel there is a soft shadow computed from a rounded rectangle; where the cloth lifts the shadow drops a few pixels and blurs more, as under a cloth held between the fingers.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | Woven | The word printed on the linen. |
REACH | script.js | 1 | How wide the finger's grip on the cloth is: higher, wider and longer folds. |
FOLDS | script.js | 1 | How deep the folds are. |
SPRING | script.js | 1 | How stiff the spring that brings the cloth back is: higher, it returns sooner and wobbles less. |
CREASE | script.js | 1 | How strong the crease left by a tap is. |
THREAD | script.js | 2.4 | The thickness of a linen thread, in px. |
WEIGHT | script.js | 560 | The weight of the word. |
When to use it
As the opening headline of a linen workshop, a fabric shop, a tailor or a clothing brand; behind the name of a hotel or a holiday home that makes a point of its textiles; on a textile product page, where the fabric should feel touchable even through the screen.
On phones
The same animation: the panel is sized on both width and height and stays inside the frame with space around it; a finger presses and drags the cloth, a tap creases it. Without a mouse there is no pointer dimple, and the line at the bottom says press instead of pinch.
With reduced motion
The linen is already flat and still with the word printed: no folds, no springs, no fake hand. The labels fade in.
Pitfalls
- A weave of two-pixel threads shimmers as soon as the cloth folds or shrinks: it fades where the threads get thinner than a pixel, measured with fwidth.
- The weave, the ink and the hem must be read at the point the linen comes from, not where it is now: otherwise the folds move and the word stays still underneath, like a sticker.
- A spring without a limit lets you drag the cloth off the page: the pull stops at a little under half of the panel's short side.
- In software WebGL frames arrive late: the spring is integrated with real time, in two steps per frame and never more than a thirtieth of a second at a time, so it does not blow up.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.4 KB; the libraries: GSAP 28 KB.
Testing
Tested on 24 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.
