The clock-hand logo

Intro, SVG, TextGSAPMediumCompressed weight: Demo 9.1 KBGSAP 28 KBFreeDownload the zip

A minimal logo intro: three thin lines spin like clock hands around three different pivots, each at its own speed, slow down and stop one after the other with an elastic tick, locked into the letter of the monogram; then the name arrives beside it letter by letter, each letter widening and taking weight, and the monogram fills. In the Playground you type your own name, choose the letter or upload your own logo.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The clock-hand logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, spins three hands around three pivots and locks them into a monogram -->
    <svg class="palco" data-stage role="img" aria-label="navio" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="mark-box"><rect data-box /></clipPath>
        <clipPath id="mark-inset"><rect data-box-in /></clipPath>
        <clipPath id="name-box"><rect data-name-box /></clipPath>
      </defs>
      <g data-mark>
        <!-- the thin circles each hand sweeps, and the cross on each pivot -->
        <g data-orbits></g>
        <g data-pivots></g>
        <!-- the three hands, then the same three strokes filled and cut square by the box -->
        <g data-hands></g>
        <g data-fill clip-path="url(#mark-box)"></g>
      </g>
      <!-- the name, one letter at a time, or the picture -->
      <g data-name></g>
    </svg>
    <p class="nota">Click or tap to see it again</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.

15 values to change

Open the Playground

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 clock-hand logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white ground, three small thin crosses appear one after the other, spin and stop: they are the three pivots. From each one a thin line grows and starts spinning straight away like the hand of a clock, each at its own speed and in its own direction, and as it turns it draws a very pale grey circle around its pivot: the three circles cross like a technical drawing. The hands slow down and stop one at a time: each runs a few degrees past its place and comes back with an elastic tick, its cross folds away, its circle winds back into the tip, and the hands already stopped feel the knock with a one-degree shiver. The last one, in blue, is the second hand: when it stops, the three locked lines are the N of the made-up brand, navio. The monogram glides aside and shrinks into place, the name arrives beside it one letter after the other (each letter comes in narrow and light, a little low, then widens, takes weight and settles) and meanwhile the lines swell into a solid, square-cut N with a blue diagonal. While the logo is on show a wave of weight runs through the name from left to right. After a few seconds the name leaves, the monogram goes back to thin lines and the hands start again, spinning away into their pivots; it all starts again. A click restarts it. The letter of the monogram is the first one of the name (A, F, H, I, K, N or Z; the others become a triangle), and a picture can take the place of the word: it is uncovered beside the monogram.

How it works

Letters made of three strokes

Each monogram is a list of three strokes, written in cap heights: where each stroke runs from and to, and where its pivot sits (0 one end, 0.5 the middle). The N has its stems pivoting on one end, one at the bottom and one at the top, and the diagonal pivoting in the middle, like a propeller: three different centres. The letters that can be written with three straight strokes are A, F, H, I, K, N and Z; the others get a triangle. The last stroke is the second hand, the only one in colour.

A hand is a line that turns

Each hand is a horizontal line through the pivot, inside a group turned with rotate(angle, x, y). The angle starts from the final one minus one and a half, two or two and a half turns, depending on the hand, and arrives a few degrees past its place with power3.out, which starts fast and slows down like a spring running down; then an elastic.out(1, 0.32) brings it back: that is the tick. A single function, after every frame, writes the angle, length and shiver of every hand from a few numbers.

The circle that follows the tip

The grey circle is a path of several loops around the pivot, starting at the tip of the long arm and turning the same way (scale(1, -1) for the hands that turn the other way). stroke-dasharray shows only a window of it: the head stays on the tip until it has made a whole turn, then a full circle remains; at the tick the tail runs after the head and the circle winds back into the still tip.

From three lines to a solid letter

When the last hand has stopped, the three lines are replaced by the same three strokes in another group, at the same size: the swap cannot be seen. Then they grow thicker; the ends that lie on the edge of the letter get longer and a clipPath as big as the letter plus half the thickness cuts them straight, so the N comes out solid and square, with sharp corners. The blue stroke lies under the black ones and has a clip one pixel smaller, so that no blue hairline shows along the shared edges.

The name, the direction and your logo

The name is set in Archivo, a variable typeface with width and weight: each letter is a text centred on its place, measured on a canvas, and font-variation-settings brings it in at width 62 and weight 200 up to 100 and 600, with an elastic on the width. With a long name the whole logo is small: so while the hands spin the monogram is drawn bigger, with its lines thinned by the same amount, and it shrinks into place when the name arrives. The whole intro is one timeline, with the labels start, spin, locked, reveal, name, rest and leave. If IMAGE holds an address, the picture takes the place of the name and is uncovered by a widening clip; in the Playground there is a button to upload a file.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'navio'`	The brand name, written beside the monogram. Its first letter is also the letter of the monogram, if MONOGRAM is empty.
`IMAGE`	script.js	`''`	The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the name beside the monogram.
`MONOGRAM`	script.js	`''`	The letter the three hands lock into: A, F, H, I, K, N or Z. Empty means the first letter of the name; any other letter becomes a triangle.
`TURNS`	script.js	`1.5`	How many turns the first hand makes before it stops; the others make half a turn more each.
`SETTLE`	script.js	`5`	How many degrees a hand runs past its place before it ticks back (0 = it stops dead).
`WEIGHT`	script.js	`1`	How bold the monogram gets at the end (0 = it stays a drawing of thin lines).
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`REST`	script.js	`4`	How many seconds the logo stays on show before the hands start again.
`LOOP`	script.js	`true`	Whether the hands start again and the logo is put together anew. With false the logo stays, and now and then a wave of weight runs through the name.

Try them in the Playground

When to use it

To present a brand that has a monogram: the opening of a watchmaker's site, an architecture or engineering studio, a design brand, a portfolio, a loading screen, a preview for a client, a social post. The hands and circles speak of precision and time; it suits pages where everything else is quiet. It works with a written name and with a picture.

On phones

The same animation with the sizes adapted: the logo is smaller and the circles of the hands stay inside the screen; with a long name the monogram spins big in the middle and shrinks when the name arrives. A tap restarts it.

With reduced motion

Nothing turns and nothing moves: the monogram fades in already made of thin lines, then fades into the solid letter and the name appears beside it. If the animation starts again, the logo leaves with a fade too.

Pitfalls

The blue stroke under the black ones left a blue hairline along their shared edges (the antialiasing of two edges on top of each other): the blue stroke has a clip of its own, one pixel smaller on each side.
Three thick lines with round or butt caps do not make a clean letter: the corners of the N are left with notches and spikes. The ends on the edge of the letter are lengthened and a single clipPath, as big as the letter plus half the thickness, cuts them all straight.
With a long name the whole logo becomes small and the hands spun tiny in the middle of the stage: while they spin the monogram is enlarged with a scale on the group, and hands, crosses and circles have their thickness divided by the same scale, so they stay thin; it shrinks into place only after the swap to the solid letter.
The name arrived while the enlarged monogram was still shrinking, and with a long name the first letter touched it: the letters start a little later when the starting scale is large.
A circle drawn with a plain dasharray always starts at the point on the right and turns clockwise: the path starts at the tip of the long arm and, for the hands that turn the other way, it is mirrored.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 9.1 KB; the libraries: GSAP 28 KB.

Testing

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