Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The sheet with a plumb line
In the minimal style: a sheet in a hairline frame tilts with the pointer, and from its top edge hangs a plumb line, a real damped pendulum that always stays vertical while the sheet turns. A vermilion notch reads the angle on a scale of fine ticks, the figures give it in degrees and get heavier the more the sheet leans; back to level, the plumb comes to rest on zero.
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>Aplomb</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one sheet in a hairline frame that tilts with the pointer; a plumb line hangs from its top edge and stays
true while the sheet turns, and the angle is read on the scale and in figures -->
<main class="stage" data-stage tabindex="0" role="slider" aria-label="Tilt of the sheet" aria-valuemin="-22" aria-valuemax="22" aria-valuenow="0" aria-valuetext="0.0 degrees, level">
<svg class="scene" data-scene aria-hidden="true">
<g class="world">
<path class="guide" data-guide-top d="" />
<path class="guide" data-guide-bottom d="" />
</g>
<g data-sheet>
<rect class="paper" data-paper />
<path class="frame" data-frame-l d="" />
<path class="frame" data-frame-r d="" />
<text class="brand" data-brand>Aplomb</text>
<g data-ticks></g>
<g data-labels></g>
<path class="sweep" data-sweep d="" />
<g data-notch-at><path class="notch" data-notch d="" /></g>
<g data-pend>
<path class="thread" data-thread d="" />
<g data-bob-at><path class="bob" data-bob d="" /></g>
</g>
<circle class="pin" data-pin r="4" />
<text class="num" data-num><tspan data-digits>0.0</tspan><tspan class="num__deg" data-deg dx="0.04em" dy="-0.5em">°</tspan></text>
<text class="say" data-say>Level</text>
</g>
</svg>
<p class="hint" data-hint>Move the pointer to tilt the sheet.</p>
</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.
20 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 with a plumb line” from Animorio and fit it into my siteWhat it does
A warm white room with a single dashed vertical line, the true vertical. In the middle the frame of a sheet draws itself: two half lines leave together from the middle of the top edge and meet at the bottom. A small pin appears, the ticks of the scale spring up from the middle outwards with a bounce, then the line comes down with its black plumb, goes taut with a small elastic jerk (the pin feels the blow) and the plumb arrives swinging. Below come the figures in degrees, narrow at first and then wide, and the word Level. Moving the pointer right or left tilts the sheet that way, on a measured spring. The pin is fixed to the sheet: when the sheet turns it carries the pin sideways and a little up, so the line lags, swings like a real pendulum and comes back to the vertical while the sheet under it is askew. A vermilion notch marks where the line crosses the scale, a thin vermilion arc shows how far it is from zero, and the ticks under the line grow a little, as under a lens. The figures read the angle the way the plumb reads it: heavier the more the sheet leans, narrower while the plumb is swinging; underneath, Leaning right or Leaning left. When the plumb stops the notch clicks into place with a small elastic kick and the figures nod with their weight; if the sheet is level the notch rests on zero, and the zero tick and the word Level light up in vermilion. With nobody there, after a couple of seconds the sheet tilts on its own to the right, then to the left, and back to level.
How it works
A sheet on a spring
The pointer only sets a target: its distance from the middle, as a share of the width, times the largest tilt. The sheet gets there on a damped spring (a frequency in hertz and a damping of 0.62, so a hair of overshoot and then it sits), worked out in fixed steps of a two-hundred-and-fortieth of a second inside gsap.ticker. Everything is one SVG as big as the page; the sheet is a group with translate and rotate, and its size is worked out so that, tilted all the way, it stays on the screen.
A pendulum on a moving pin
The pin sits on the sheet, above its centre: its acceleration comes from the rotation of the sheet (the tangential and the centripetal parts). The plumb follows the true equation of a pendulum whose point of suspension accelerates: the acceleration of the pin acts like extra gravity, towards the other side. The damping is chosen from the time the plumb takes to stop, and gravity from the length of one swing, so the motion is the same at any screen size. At the ends of the scale there is a stop: the line knocks against it and comes back.
The scale that reads the plumb
The pendulum is drawn inside the group of the sheet, turned by the difference between the angle of the plumb and the angle of the sheet: so it stays vertical in the room while everything around it turns. That difference is the reading: the accent notch and the arc from zero are drawn at the same angle, and every tick of the scale grows on a Gaussian bell around the line, as under a lens.
Figures with weight
The number is SVG text in Roboto Flex, a variable typeface. The script writes two CSS variables: --k, how far the sheet leans, which moves font-weight between --light and --heavy, and --s, how fast the plumb is swinging, which narrows font-stretch. The figures are tabular, so they do not dance as they change.
When the plumb stops
When the plumb and the sheet stay almost still for three tenths of a second the reading locks: the notch stretches and comes back on elastic.out, the figures nod with their weight, the word underneath changes with a little hop. When everything is truly still, sheet and plumb glide to their exact place and the maths falls asleep: a level sheet always reads 0.0, and the zero tick and Level light up. The invisible hand that tilts the sheet when nobody is there is a GSAP timeline that moves the target, and it steps aside as soon as a pointer arrives.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'Aplomb' | The small word at the top of the sheet (it can be empty). |
MAX_TILT | script.js | 22 | How far the sheet tilts, in degrees, with the pointer at the edge of the page: the higher it is, the smaller the sheet gets to fit. |
SHEET | script.js | 1.5 | How quick the sheet is to follow, in hertz: 0.6 is a heavy board, 3 a card. |
SWING | script.js | 1.5 | How many seconds one full swing of the plumb lasts: longer feels like a longer line. |
SETTLE | script.js | 3.5 | How many seconds the plumb takes to stop after a push: little is a plumb in oil, a lot swings for a long time. |
MAGNIFY | script.js | 0.7 | How much the ticks under the line grow (0 = not at all). |
IDLE | script.js | 2.4 | How many seconds without a pointer before the sheet tilts on its own (0 = never). |
--light | style.css | 280 | The weight of the figures with the sheet level, from 100 to 1000. |
--heavy | style.css | 720 | The weight of the figures at the steepest tilt, from 100 to 1000. |
When to use it
For an opening you can touch: the portfolio of an architecture or design studio, the page of a tool or a measuring app, a furniture or picture-frame shop, a 404 page that says something is off. It also works as a small instrument inside a page, in place of a still illustration.
On phones
The same physics with the sizes adapted: the sheet is a little narrower and taller, it tilts by dragging a finger right or left anywhere (the page does not scroll there, it is a single scene) and goes back to level when the finger lifts. The hint becomes «Drag a finger to tilt the sheet.».
With reduced motion
No springs, no swinging and no invisible hand: everything fades in already in place, the sheet goes straight to the pointer's angle and the plumb is already still and vertical; the figures and the word underneath change with a short fade.
Pitfalls
- The plumb has to be drawn inside the group of the sheet, turned by the difference between the two angles, not on a separate layer on top: so the drawn pin and the point the line leaves from always match, to a tenth of a pixel, even while the sheet turns.
- With gravity written in pixels the pendulum would change its pace with the screen size (on a phone, with a shorter line, it would swing much faster): gravity comes from the length of one swing and the length of the line.
- With a reading that changes at every step the word underneath would jump between Leaning right and Leaning left at every pass of the plumb through zero: the word only changes beyond three tenths of a degree.
- The 0 label of the scale sat right where the line rests and was always cut in half: zero is told by the longest tick, which lights up at rest.
- The card's video stops when the picture stays the same for a second with no GSAP animation scheduled: the invisible hand is a gsap.delayedCall with a timeline, not a timer, and at rest the maths falls asleep at the exact spot.
Libraries
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.6 KB; the libraries: GSAP 28 KB.
Testing
Tested on 16 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.
