Columns going opposite ways
Scroll, Images, Hover
NewFree
Back to the library
The melting sheet
Scroll inside the preview
A stone-coloured sheet covers a film still and, as you scroll, melts into blobs and islands: its edge is the contour of a noise that changes over time, recomputed every frame as a clip-path, and the pointer bites it.
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="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La carta che si scioglie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- la scena: più alta dello schermo, il palco resta fermo mentre il foglio si scioglie -->
<section class="scena" data-scena>
<div class="palco" data-palco>
<!-- sotto: il fotogramma del film, disegnato dallo script, e una frase -->
<div class="fotogramma">
<canvas class="fotogramma__tela" data-tela aria-hidden="true"></canvas>
<p class="frase" aria-hidden="true"><span>Non è il mare</span><span>che ci separa</span></p>
</div>
<!-- sopra: il foglio, tagliato da un clip-path che lo script ricalcola a ogni fotogramma -->
<div class="foglio" data-foglio>
<p class="nota" data-nota>Scorri: il foglio grigio si scioglie a chiazze sull’immagine che c’è sotto. Col mouse puoi morderne il bordo.</p>
<h1 class="foglio__titolo">Il faro</h1>
<dl class="crediti">
<div><dt>Regia</dt><dd>Nora Valli</dd></div>
<div><dt>Anno</dt><dd>2019</dd></div>
<div><dt>Con</dt><dd>Livio Sarti, Ada Moretti</dd></div>
</dl>
<p class="foglio__azioni">
<a class="foglio__tasto" href="#">Guarda il film</a>
<a class="foglio__tasto" href="#">Il programma</a>
</p>
</div>
</div>
</section>
<section class="dopo">
<p class="dopo__testo">Un guardiano del faro e una ragazza che arriva col traghetto dell’ultima corsa. Tre settimane di mareggiate, e una lettera che nessuno dei due vuole spedire.</p>
</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.
26 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 melting sheet” from Animorio and fit it into my siteWhat it does
A film page: a stone-coloured sheet with a huge title, credits on thin rules and two buttons, and underneath the still, a lighthouse at sunset drawn by the script with a large sentence. The sheet’s edge is never straight: it moves slowly by itself, like wet paper. As you scroll the stage holds still and the sheet rises, melting into blobs and islands, until only the still is left; with the pointer on it, the paper melts first where you pass, as if you were biting it.
How it works
A field instead of a line
On a grid of 14-pixel cells the script computes a number for every node: (edge − y) / 105 + noise × 1.7. The noise is value noise in three dimensions, x, y and time, with three octaves (0.6, 0.28 and 0.12 at frequencies 1, 2.1 and 4.3) on 190-pixel blobs. Where the number is above zero there is paper; far from the band the noise is not needed and not computed.
Marching squares
In each cell the signs of the four corners give one of sixteen cases: where the sign changes, the contour crosses the side at the point where linear interpolation says zero, and in the two saddle cases the average of the centre decides. The ring of nodes outside the stage is always minus one, so every contour closes: following the two neighbours of each point writes the paths.
A clip-path every frame
The paths become clip-path: path(evenodd, …) on the sheet, which therefore also cuts its text. The evenodd rule makes holes inside the paper and paper islands inside the holes without orienting the contours.
Scrolling and biting
A ScrollTrigger gives the progress of the scene, 2.6 screens tall: the edge goes from 80% of the height to −40%, followed at 7 per second. The pointer digs a bell 80 pixels wide and 2.4 bands deep into the field; its strength rises at 5 per second and falls at 2.2, its position follows at 9. The noise’s time advances by 0.12 per second.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PASSO | script.js | 14 | The side of a grid cell, in pixels: smaller means a finer edge and more work. |
SCALA, BANDA, ONDA | script.js | 190, 105, 1.7 | How big the blobs are, how wide the fraying band is and how far the noise moves the edge. |
VITA | script.js | 0.12 | How fast the edge changes by itself. |
MORSO, RAGGIO | script.js | 2.4, 80 | How deep and wide the pointer’s bite is. |
DA, A | script.js | 0.8, −0.4 | Where the edge sits at the start and end of the scroll, as a share of the height. |
When to use it
To move from a cover to a photograph without a clean cut: the page of a film, a record, a wine, a story with a large image. The sheet can carry the title and the details.
On phones
The sheet melts the same way with scrolling; a finger resting on the stage bites like the pointer, and when it lifts the bite closes slowly.
With reduced motion
No melting: the sheet with the titles sits on top and the still below, both still, and the section is as tall as it needs.
Pitfalls
- Many adjacent polygons, one per cell, leave thin seams between cells because of antialiasing: segments have to be stitched into closed contours.
- Without a ring of always-empty nodes around the grid, a contour touching the edge stays open and the path closes in the wrong place.
- Computing the noise over the whole grid every frame costs too much: far from the band the level alone decides the sign.
- With an empty clip-path: path() the element shows entirely: when the paper is gone the path becomes M0 0Z.
Libraries
GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.9 KB; the libraries: GSAP + ScrollTrigger 45 KB.
Testing
Tested on 28 September 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.
