The colour columns
Hover, SVG
NewFree
Back to the library
The word with a vanishing point
In the minimal style: the name of an architecture studio, Plinth, drawn in one-point perspective as on a drawing sheet. The front faces of the letters are solid, every corner runs with a hairline to the same vanishing point on the horizon, the back faces are dashed. The vanishing point follows the pointer on a spring and the word turns in space; the nearest letter lifts and its edges turn red, and a click pushes the depth out.
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>Plinth</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one word drawn in one-point perspective: every corner runs to a vanishing point that follows the pointer -->
<main class="stage" data-stage>
<header class="top">
<span class="brand">Plinth</span>
<span class="what">Architecture & interiors</span>
</header>
<svg class="drawing" data-svg role="img" aria-label="Plinth, drawn in perspective">
<g data-guides class="guides"></g>
<line data-horizon class="horizon" x1="0" y1="0" x2="0" y2="0" />
<g data-ticks class="ticks"></g>
<g data-depth class="depth"></g>
<g data-back class="back"></g>
<g data-front class="front"></g>
<g data-vp class="vp">
<circle class="vp__ring" r="9" />
<line class="vp__arm" x1="-14" y1="0" x2="14" y2="0" />
<line class="vp__arm" x1="0" y1="-14" x2="0" y2="14" />
<text class="vp__label" x="12" y="-12">VP</text>
</g>
</svg>
<footer class="bottom">
<p class="hint" data-hint>Move to drag the vanishing point. Click to push the depth.</p>
<p class="read" aria-hidden="true"><span>Depth</span> <b data-read-depth>0.00</b> <span class="read__sep"></span> <span>Horizon</span> <b data-read-h>0%</b></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.
21 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 word with a vanishing point” from Animorio and fit it into my siteWhat it does
On a paper-coloured ground there is the word PLINTH in squared letters, drawn in one-point perspective: the front faces are black and solid, from every corner a hairline runs back to the same corner further away, and the back faces are a dashed outline. Faint dashed construction lines carry on from the corners of every letter to the vanishing point, a small red crosshair labelled VP, sitting on a thin horizon line with ticks that get longer near the point. At the start the horizon and the construction lines draw out from the middle, the crosshair opens with a little snap, the letters drop in one after another and settle with a one-pixel bounce, and then the depth opens on a spring. Moving the pointer, the vanishing point follows it on a spring, goes a little past and comes back: every line turns towards it and the word is seen from above, from below, from the right or from the left. The letter nearest the pointer lifts a few pixels and its edges and its back face turn red. A click pushes the depth out, which swings back, and a ring leaves the crosshair, widens and fades. At the bottom small print gives the depth and the height of the horizon, changing live. If nobody moves the pointer, after a while the vanishing point wanders off on its own.
How it works
Letters made of polygons
The six letters of PLINTH are written by hand as polygons on a grid five units wide and seven tall (the P has a second ring, its empty bowl, drawn with fill-rule evenodd). So every corner is a real point, and from every point a line can be drawn towards the vanishing point. The size of the word is the smaller of three quarters of the width and a good quarter of the height, recomputed on every resize.
Perspective in one line
The back face of every letter is the front face moved towards the vanishing point by a fixed share, the depth: every point P becomes P + (VP − P) · depth. The depth lines join every front corner to its twin at the back; the construction lines start from the four corners of every letter and run all the way to the vanishing point.
The springs
The vanishing point, the depth and the lift of every letter are springs with a frequency and a damping, computed in fixed steps of a two-hundred-and-fortieth of a second inside gsap.ticker. FOLLOW and WOBBLE decide how quickly and how softly the point follows the pointer; the click kicks the speed of the depth, so it goes out and swings back.
The nearest letter
Every frame looks for the letter nearest the pointer inside an oval as tall as the word: that one lifts by LIFT pixels on a spring and its edges and back face take the accent colour, through a CSS class.
The entrance and the readout
A GSAP timeline draws the horizon and the construction lines from the middle (expo.out), opens the crosshair with back.out, drops the letters one every nine hundredths of a second and finally opens the depth with a kick to the spring. The small print at the bottom reads the depth and the horizon height every frame.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
DEPTH | script.js | 0.2 | How deep the letters go, as a share of the way to the vanishing point (0.05 to 0.5). |
PUSH | script.js | 1.9 | How much a click pushes the depth out (1 = not at all). |
FOLLOW | script.js | 3.4 | How quickly the vanishing point follows the pointer, in hertz. |
WOBBLE | script.js | 0.42 | The damping of the spring: 0.2 overshoots and swings, 1 arrives without overshooting. |
LIFT | script.js | 4 | How many pixels the letter under the pointer lifts. |
GUIDES | script.js | 0.7 | How visible the construction lines are (0 = hidden, 1 = full). |
IDLE | script.js | 2.4 | After how many seconds without a pointer the vanishing point wanders on its own (0 = never). |
--accent | style.css | #e2482c | The colour of the vanishing point and of the letter under the pointer. |
--ink | style.css | #161513 | The colour of the front faces. |
--paper | style.css | #f3f0e8 | The background colour. |
When to use it
For the header of an architecture, interior design or engineering studio, a drawing school, an architecture magazine or a builder: a heading you can turn with the mouse. The letters are polygons, so the word is changed by redrawing the letters on the grid.
On phones
The same lines and the same springs, with the word measured on the height too: it fits the phone box. The vanishing point follows a finger dragging sideways (vertically the page scrolls), and a tap pushes the depth. Without a touch, the point wanders on its own.
With reduced motion
Nothing moves: the drawing fades in with the perspective already open and the vanishing point still. The letter nearest the pointer only changes colour.
Pitfalls
- With the letters written as text there are no corners to join to the vanishing point: you need real polygons, written by hand, with the bowl of the P as a second ring in evenodd.
- A spring computed with the frame step becomes unstable when a frame is long: the vanishing point and the depth use fixed steps of 1/240 of a second.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 23 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.
