The spinning coin logo

Intro, Physics, TextGSAPMediumCompressed weight: Demo 4.7 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro: a coin of thin vermilion lines, with the brand’s initial, falls spinning, lands on its edge and spins like Euler’s disk, leaning more and turning faster, until it lies flat. Flat, it is a line: it stretches out and the letters of the name rise from it. In the Playground you type your own name.

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 spinning coin logo</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>
  <main class="stage" role="img" aria-label="tondo" data-stage>
    <!-- the coin and the line it becomes: drawn by the script -->
    <svg class="scene" aria-hidden="true">
      <path class="line" data-line d="" />
      <g data-coin>
        <circle class="rim" r="1" vector-effect="non-scaling-stroke" data-rim />
        <circle class="rim rim--in" r="0.84" vector-effect="non-scaling-stroke" data-rim-in />
        <text class="mono" data-mono text-anchor="middle" dominant-baseline="central"></text>
      </g>
    </svg>
    <!-- the name: one box per letter, built by the script -->
    <p class="name" data-name aria-hidden="true"></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.

10 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 spinning coin logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white page a coin falls from above, drawn with two thin vermilion circles and the brand’s initial, a “T”, in the middle. It falls spinning, so you see it face on, then edge on like a line, then from the back with no letter. It lands on its edge, makes a small hop and keeps spinning like Euler’s disk: it leans more and more, turns into a flatter and flatter ellipse, wobbles and spins faster and faster, until it lies flat with a last shiver. Seen edge on, a flat coin is a vermilion line: the line stretches out on both sides until it is as wide as the name, and the letters of “tondo” rise from it, the middle one first and then towards the ends, heavy and wide, growing a pixel past their height and coming back while they slim down to their weight. The logo stays still on its line for a few seconds; then the letters sink back into the line, from the ends to the middle, the line draws back and another coin falls.

How it works

A coin made of two scales

The coin is an SVG group with two circles and a letter, scaled in width by the cosine of the spin angle and in height by the cosine of the tilt. The circles use vector-effect non-scaling-stroke, so the line stays thin even when the coin is squashed. The letter only shows when the spin cosine is positive: from the back the coin is empty.

euler disk

The spin on the table is a single number p from 0 to 1, moved at constant speed. The tilt is p to the power of 1.7; the angle grows as (p + 2p³) / 3, faster and faster, seven times quicker at the end than at the start, like a real coin settling. The total is a whole number of turns, so lying flat the coin is exactly as wide as its diameter.

From coin to line

The instant the coin is flat it is hidden and a line of the same colour, as wide as the diameter, appears in its place: the switch cannot be seen. The line shivers a pixel and a half with an elastic.out and stretches to the name with an expo.inOut.

Letters from the line

Every letter is a box whose transform origin sits on the baseline (measured with a zero-height box aligned to the baseline): scaleY from 0 to 1.03 with a power3.out and then 1 with an elastic.out, from the middle to the ends, 70 milliseconds apart. Meanwhile weight and width come down from 900 and 150 to the chosen values, and the name re-centres every frame.

The sizes

The name’s size is the one that fits it in 56% of the width (78% on a phone) and a quarter of the height; the coin’s radius follows the name, at most 0.85 times the font size and a fifth of the name’s width. Everything is worked out again when the window changes size, even mid-spin.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'tondo'`	The brand name: its first letter goes on the coin (up to 12 letters).
`WEIGHT`	script.js	`640`	The name’s weight at rest (100 to 900).
`WIDTH`	script.js	`112`	The name’s width at rest, wdth axis (50 to 150).
`TURNS`	script.js	`8`	How many turns the coin makes before it settles.
`SPEED`	script.js	`1`	2 = twice as fast, 0.5 = half as fast.
`REST`	script.js	`3`	Seconds the logo stays still.
`LOOP`	script.js	`true`	The letters sink back into the line and the intro starts again.

Try them in the Playground

When to use it

For a brand about money, choices or luck, with a light gesture: the opening of a payments or savings app, a young bank, a shop selling coins or collectables, a game, the loading screen of a digital wallet.

On phones

The same animation with the sizes adapted: the name fills 78% of the width, the coin is large in proportion and falls from the same place, above the screen.

With reduced motion

Nothing falls and nothing spins: the name on its vermilion line fades in and stays still.

Pitfalls

In the first tries the coin was small next to the name and looked like a button: its radius now follows the name’s size (0.85 times the font size, at most a fifth of the name’s width).
Before the font arrived the letters showed whole for a moment: in the CSS they start at scaleY(0) and reduced motion sets them back to 1.
A total spin with a fraction would leave the flat coin shorter than its diameter, and the line taking its place would jump: the turns are always whole (TURNS is rounded).

Libraries

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 4.7 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.