The glass word
WebGL, 3D, Scroll, Text
Free
Back to the library
The sheet that smooths out
In the minimal style, for a made-up writing app: a crumpled sheet of ruled paper under a low light, on a black table. The creases let go one after the other, each passing flat by a whisker, and the sheet is smooth again with its word, «Again.»; only thin lines are left where it was folded. After a while, or at a click, it is crumpled again with new creases: every round the sheet remembers a few more lines.
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>The sheet that smooths out</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 sheet of ruled paper from a made-up writing app, crumpled, lies under a low light. Its creases let go one
after the other and the sheet smooths out, keeping only faint lines where it was folded. A click crumples it
again. The script draws the sheet in 3D on the canvas -->
<main class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<h1 class="sr" data-sr>Again. Redraft, a quiet place to write.</h1>
<button class="again" type="button" data-again data-autoclic>Crumple it</button>
</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
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 sheet that smooths out” from Animorio and fit it into my siteWhat it does
On a black table a crumpled sheet of ruled paper appears, smaller than its size, with creases that the low light from the left shows light and dark. The small creases let go first, one after the other, then the two long ones: each passes flat by a whisker and settles, and meanwhile the sheet straightens, grows back to its size and lies flat. On it is printed «Again.» in a light serif, the name of the app and a small line at the top, the pale ruled lines and the margin line in vermilion, which followed the paper while it was creased. Smoothed out, the sheet keeps only very thin lines where it was folded. After a few seconds it is crumpled at once with new creases and a little twist, and smoothed out again: every round leaves the lines of one more crumpling, as in a real draft. The pointer tilts the sheet a little towards itself; a click, or «Crumple it», crumples it right away.
How it works
A sheet made of creases
The sheet is a grid of 96 × 136 squares in WebGL, in the proportions of an A4. In the vertex shader the height of every point is the sum of the creases: each one is a ridge (or a valley) along a line, falling straight from a sharp crest, max(0, 1 − |distance| / width), and fading towards its two ends. Every crumpling makes fourteen: two long ones across the sheet and twelve short ones.
The paper that draws in
The paper that goes up into a crease comes from the sides: every crease pulls the flat outline towards its line, so when crumpled the edge of the sheet turns ragged; on top of that the whole sheet shrinks by 10% towards its middle. The normals for the light come from the differences of the height one square apart.
The raking light
The light comes low from the left (LIGHT says how low). The colour of the paper is multiplied by 1 + 1.8 · (light − light of the flat sheet): the smoothed sheet has exactly its colour, the faces turned to the light get brighter and the others darker. What is printed (ink in the red channel, accent in the green one) takes the same light.
The memory of the paper
When a round of creases is smoothed out, its lines are drawn thin in the blue channel of the texture, faded at their ends: in the shader they darken the paper just a little. So the creases go back to zero but the sheet remembers where they were, and with every new crumpling (up to three rounds) the lines grow in number.
The timing
Every round is a GSAP timeline: the creases of the round rise almost together in 0.45 s with a power3.out and the sheet shrinks with a slight turn; then they let go staggered by STAGGER, the small ones first and the long ones last, each with a back.out(SPRINGY) that takes it past flat and back; the sheet grows back to its size and straightens. The sheet is redrawn only while something changes.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'Again.' | The big word printed on the sheet. |
BRAND | script.js | 'Redraft' | The name at the top of the sheet. |
LINE | script.js | 'A quiet place to write' | The small line next to the name. |
DEPTH | script.js | 1 | How deep the creases are: 0.3 barely crumpled, 1.6 a lot. |
STAGGER | script.js | 0.07 | The seconds between one crease letting go and the next. |
SPRINGY | script.js | 1.8 | How far a crease springs past flat before it settles. |
MEMORY | script.js | 0.06 | How much of every crease stays in the paper: 0 none. |
HOLD | script.js | 3.2 | The seconds the sheet lies flat before it is crumpled again. |
LIGHT | script.js | 0.75 | How low the light is: 0 from above, 1 grazing. |
When to use it
For the opening of a writing or note-taking app, a personal blog, a magazine or a graphic studio that talks about drafts and starting again: the sheet smooths out and the word can be read. Also as a «try again» page after an error.
On phones
The same sheet, four fifths of the screen wide, with the same creases and the same light; a tap crumples it again. The sheet does not tilt towards the finger.
With reduced motion
Nothing crumples: the sheet fades in already smooth, with the thin lines of an old crumpling, and stays still.
Pitfalls
- Leaving a little of every crease in the geometry, for the memory of the paper, made grey bands as wide as the creases instead of lines: the memory moved to thin lines drawn in the texture.
- With the normals measured closer than one square of the grid, the crests came out saw-toothed: measured one square apart, the light on the creases is smooth.
- The first version had shallow creases and too soft a light: crumpled, the sheet only looked a little dirty. Deeper creases, an outline pulled towards the creases and a lower light make it look like real paper.
- The canvas of the print was called print and covered window.print: now it is called printed.
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 8.5 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.
