Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The prism billboard
In the minimal style, the poster of a made-up concert hall built as a prism billboard: a row of thin three-sided prisms, and on each side of the row one word, «Quiet», «Loud» and «Live» in vermilion, widened or narrowed on the width axis to fill the board. Every few seconds the prisms turn in 3D in a wave from left to right, each passing by a whisker, and halfway through the wave you read half a word and half the next.
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 prism billboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the poster of a made-up concert hall as a trivision billboard: a row of thin three-sided prisms, one word on each
side, each word stretched or squeezed on the width axis to fill the board. The prisms turn in a wave from left
to right, each going a hair past its face and settling; the pointer nudges the one under it. The script builds
the prisms -->
<main class="stage" data-stage>
<div class="poster" data-poster>
<p class="caption" data-caption><span>Kestrel Hall</span><span>Three nights in March</span></p>
<div class="board" data-board aria-hidden="true"></div>
<p class="caption caption--under"><span>14, 15, 16 March</span><span>Doors at 19:30</span></p>
</div>
<h1 class="sr" data-sr>Kestrel Hall: Quiet, Loud, Live.</h1>
</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.
19 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 prism billboard” from Animorio and fit it into my siteWhat it does
On warm white paper there is a board with a thin frame, two small lines above it (the name of the hall and «Three nights in March») and two below (the dates and the time the doors open). The board is a row of narrow three-sided prisms, parted by barely visible lines: they come in at a slant and turn in a wave to their first side, where «QUIET» reads in black, wide and heavy. Every word is set on the width axis of Anybody so as to fill the board: a short word widens, a long one narrows, and if even the widest is not enough it is spaced out. Every two and a half seconds the prisms turn to the next side, one after the other from left to right: each passes by a few degrees and settles, and as it turns the side going away darkens. Halfway through the wave the board shows the end of «QUIET» and the start of «LOUD»; then «LIVE» in vermilion, then «QUIET» again. Moving the pointer across the board gives the prism under the hand a little knock the way the hand goes, and it comes back on an elastic; a click turns the whole board at once.
How it works
A row of prisms
Every prism is an element with preserve-3d as wide as one slice of the board, with three sides: each one turned by 120° and pushed out from its axis by the apothem, width / (2 · tan 60°). The prism moves back by the same amount, so the side facing you is flush with the board. To show side k it is enough to turn it by −120° · k.
A word cut into slices
Every side holds the whole word, as wide as the board and moved left by as many slices as come before it, with overflow: hidden: every prism shows its own slice. The sides are one pixel wider than the prism, so that no light line opens between two slices in 3D.
The word that fills the board
The script measures every word at width 100 of Anybody, almost as tall as the board, and works out the width (from 50 to 150) that brings it to 92% of the board; if it is still too wide it reduces the size, if it is still short it spaces it out, and moves the text by half the spacing to keep it centred.
The wave and the shade
Every round a GSAP timeline takes the angle of every prism 120° further, always the same way, with a back.out(OVERSHOOT) of TURN seconds, staggered by WAVE from left to right. At every update each side takes a shade (a veil of ink) worth (1 − cos of its angle towards you) · 0.55: the side facing you is light, the one going away darkens.
The hand
The pointer passing from one prism to the next gives the new one a little knock of 14° the way the hand goes and brings it back with an elastic.out: it is a separate angle added to the one of the wave, so the two motions do not fight. A click turns the board at once and restarts the count.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORDS | script.js | ['Quiet', 'Loud', 'Live'] | The three sides of the board; the last one is in the accent colour. Each one widens or narrows to fill it. |
PRISMS | script.js | 14 | How many prisms there are across the board (fewer on a phone). |
HOLD | script.js | 2.4 | The seconds every word stays still. |
WAVE | script.js | 0.055 | The seconds between one prism turning and the next. |
TURN | script.js | 0.95 | The seconds one prism takes to turn. |
OVERSHOOT | script.js | 1.6 | How far a prism goes past its side: 0 none, 3 a lot. |
WEIGHT | script.js | 720 | The weight of the words, from 100 to 900. |
When to use it
For the page of a concert, a festival, a theatre season or an exhibition with three words to say (three nights, three artists, three rooms), or for the front page of a shop that alternates three offers like a roadside billboard.
On phones
The same board, almost as wide as the screen and taller in proportion, with nine prisms instead of fourteen: the wave and the words are the same, and a tap turns the board at once.
With reduced motion
Nothing turns: the board fades out and comes back with the next word, every two and a half seconds.
Pitfalls
- Between two slices, turned in 3D, a thin light line opened that cut through the letters: the sides are one pixel wider than the prism and overlap a little.
- «LIVE» and «LOUD», even at width 150 of Anybody, did not reach the edge and the board looked half empty: if the width is not enough the word is spaced out, and the text moves by half the spacing to stay centred.
Libraries
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressed with gzip, the three demo files weigh 5.2 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.
