The dash relief

A drawing made of thousands of dashes, like an engraving but in relief: it changes shape by flying through a cloud of dust, spins when you drag it and puffs up when you throw it.

WebGL, 3D, HoverWebGL, Canvas, GSAPAdvancedLifetime

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* Il rilievo a trattini
   Un disegno fatto di decine di migliaia di trattini orizzontali, come un'incisione, ma in rilievo:
   le parti chiare stanno più avanti delle scure. Passando sui quattro angoli ogni trattino vola dalla
   forma di prima a quella nuova, ognuno con il suo ritardo e con una curva sua, e per un momento il
   disegno è una nuvola di polvere. Trascinandolo il rilievo gira, e visto di taglio è un foglio sottile;
   lanciato forte si gonfia un poco. Il mouse, passando, spinge via i trattini vicini.
   I disegni nascono in una tela 2D in toni di grigio e diventano trattini con un dither ordinato
   (la matrice di Bayer 4x4): più un punto è chiaro, più è facile che lì ci sia un trattino.
   Un solo triangolo di quattro vertici, ripetuto per ogni trattino (drawArraysInstanced). */

/* ---- valori da cambiare ---- */
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const COLONNE = TOCCO ? 112 : 168;   /* celle del disegno in larghezza (le righe sono 5/4) */
const TRASFORMA = 1.15;              /* secondi di un cambio di forma */
const SFASA = 0.45;                  /* quanto partono sfasati i trattini (0 = tutti insieme) */
const VIAGGIO = 1;                   /* quanto i trattini curvano lontano dalla strada dritta */
const RILIEVO = 42;                  /* profondità del rilievo, in unità del disegno */
const LARGO = 1.5;                   /* spessore di un trattino, in pixel */
const RAMPA = ['#1B5C54', '#2E8F80', '#FF8A3D', '#FFBF80', '#FFF3E0']; /* dal tono più basso al più alto */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const DENTRO = window.self !== window.top;
const MOUSE = matchMedia('(hover: hover) and (pointer: fine)').matches;
const palco = document.querySelector('[data-palco]');
const tela = document.querySelector('[data-tela]');
const bottoni = [...document.querySelectorAll('[data-forma]')];

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.

Lifetime access

What it does

In the middle there is a drawing, for instance a sphere, made only of horizontal dashes: where it is light the dashes are dense and closer, where it is dark they are sparse and further back. Hover one of the four names in the corners and every dash sets off on its own towards its place in the new drawing, curving sideways and in depth: halfway the drawing is a cloud, then it comes back together. Drag it and the relief turns (seen edge-on it is a thin sheet), throw it and it keeps turning and puffs up a little; the mouse, passing by, nudges the nearby dashes away.

How it works

From grey to dashes

Each drawing starts on a small 2D canvas, 168 x 210 cells, in shades of grey. For each cell we check how light it is and whether it sits on an edge; if the value beats that cell’s threshold in the 4 x 4 Bayer matrix, a horizontal dash 72% of the cell long is born there. Depth comes from the same value: light parts sit up to 42 units closer.

One repeated quad

The dashes are a single four-vertex quad drawn thousands of times with drawArraysInstanced. Each copy carries where it starts and ends in the starting shape and in the target one, its tone, a random seed and the curve of its journey: the shader does the rest, rotation and perspective included.

Changing shape

A single number goes from 0 to 1 in 1.15 seconds (power2.inOut), but every dash reads it offset by its seed: t = uMix × 1.45 − seed × 0.45. Halfway through its journey it bends away from the straight line by an arc, sin(π t), sideways and in depth. Live dashes take the new places at random; extra ones shrink to a point.

Turning, throwing, puffing

While dragging, rotation grows by 0.0075 radians per pixel and tilt by 0.005; on release the speed loses e^(−2.6 × dt) and the tilt returns to place in 0.9 seconds. At rest it sways slowly (sin(t × 0.32) × 0.2). The faster it turns, the further each dash moves from the centre, up to 32% more.

Values to change

Name	File	Default	What it changes
`COLONNE`	script.js	`168 (112 al tocco)`	Cells across the drawing: higher, finer and more numerous dashes.
`TRASFORMA`	script.js	`1.15`	Seconds of a shape change.
`SFASA`	script.js	`0.45`	How offset the dashes start. With 0 they all start together.
`RILIEVO`	script.js	`42`	Depth of the relief, in drawing units (the drawing is 380 wide).
`RAMPA`	script.js	`5 colori`	The colours from the lowest tone to the highest: the whole drawing recolours by changing this list.

When to use it

For a portrait, a logo or an object on the first screen of a portfolio: the same drawing becomes material, and changing it is a gesture people remember.

On phones

Fewer cells (112 x 140) and canvas density at most 1.5. The names sit in a grid under the drawing and are tapped; a sideways finger turns the relief, a vertical one stays with the page. No pointer nudge.

With reduced motion

No cloud, no sway, no inertia and no puffing: the drawing changes at once and turns only while you drag it.

Pitfalls

To change shape in the middle of a change, first compute where each dash really is (with the same formula as the shader) and use that as the new start: otherwise the drawing jumps.
Unneeded dashes are not deleted: they become zero-length and the shader discards them. Measure that length in the drawing, not on screen: seen edge-on every dash is tiny, and discarding it would make the whole relief vanish.
A dash is a fraction of a pixel thick: its edge must be feathered in the fragment (coverage), otherwise half of the dashes vanish depending on where they fall.
Inside an iframe on phones a vertical finger must stay with the page: touch-action: pan-y and rotation only sideways.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 27 KB of our own files.

Testing

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

From the same family

Ink that reveals

WebGL, Hover

NewLifetime

Raking light