The aligned orbits logo

Intro, SVGGSAPMediumCompressed weight: Demo 5.1 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro, like a small orrery: the first letter of the name is the sun, vermilion, and the others go round it on thin elliptic orbits, the nearer ones faster. They slow down and line up one after the other on the line to the right of the sun, gaining weight: the orbits lie down and vanish, and the aligned name slides to the middle. 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 aligned orbits logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the first letter is the sun, the others orbit it on thin ellipses until they line up into the name -->
    <svg class="palco" data-stage role="img" aria-label="oriel" xmlns="http://www.w3.org/2000/svg">
      <g data-system>
        <g data-orbits></g>
        <g data-back></g>
        <text class="sole" data-sun></text>
        <g data-front></g>
      </g>
    </svg>
    <button class="ancora" type="button" data-replay>Replay</button>
  </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.

13 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 aligned orbits logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white page the o of “oriel”, the made-up brand, swells in the middle in vermilion, a little bigger than it should be, and settles: it is the sun. Four thin elliptic orbits draw themselves around it, seen slightly from above, one for every other letter, as wide as that letter’s distance from the o in the finished name. The letters appear on their orbits and set off: the r, the nearest, goes round three times, the l, the farthest, only once; behind the sun they pass smaller and paler, in front of it larger, and they cross each other. Light while they run, they slow down and stop one after the other on the line to the right of the sun, each a pixel past its place and back, and there they gain weight; as soon as a letter is home its orbit lies down flat and vanishes. When they are all aligned the whole name slides to the middle of the page and stays still; a small Replay appears at the bottom.

How it works

Orbits from the finished name

The name is measured on a canvas in the same typeface, Unbounded: the centre of each letter is the width of the letters before it plus half of its own. The radius of each orbit is the distance between that letter’s centre and the centre of the first. So when every letter reaches angle zero on its orbit, the name sets itself, with its true spacing.

The perspective

The orbits are SVG ellipses whose vertical axis is the radius times TILT. A letter’s position is the centre plus the radius times the cosine and the radius times TILT times the sine of the angle; the sine also says whether it is in front of the sun or behind it: behind, the letter is smaller (DEPTH) and paler, and moves into the group drawn before the sun, in front into the one drawn after.

The journey and the arrival

Each letter starts from a negative angle of a few turns plus a different phase (the golden angle, so they do not start in a row) and goes with power2.inOut to an angle that passes zero by SETTLE pixels measured along the orbit, then back to zero with elastic.out(1, 0.35). The nearer ones make more turns in the same time, so they run faster, as in real systems. On arrival the wght axis rises from 300 to 740 and settles at 600.

The ending

As soon as a letter is home its orbit squashes (the vertical axis goes to zero) and fades: it seems to lie down on the line of the name. At the end the whole system slides left by as much as it takes for the name to sit in the middle of the page. The whole intro is one timeline and a single function redraws letters, orbits and sun after every frame.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'oriel'`	The logo: the first letter is the sun, the others go round it.
`TURNS`	script.js	`3`	How many times the letter nearest the sun goes round (the farther ones fewer).
`TILT`	script.js	`0.3`	How flat the orbits look: 1 = seen from above, 0.1 = almost edge on.
`DEPTH`	script.js	`0.14`	How much bigger a letter looks in front of the sun than behind it.
`SETTLE`	script.js	`1.5`	How many pixels a letter goes past its place before it springs back.
`SPEED`	script.js	`1`	The speed of the whole intro: 2 is twice as fast, 0.5 half as fast.
`REPLAY`	script.js	`true`	The small Replay button that appears at the end (a click anywhere on the page restarts the intro anyway).

Try them in the Playground

When to use it

For the opening of the site of a planetarium, an observatory or a science festival, a studio that works with space and time, a brand whose name starts with a round letter; also for a portfolio. It suits short names, from four to seven letters.

On phones

The same system with the same orbits, smaller, so that the widest orbit fits the width of the screen. A tap sends the letters round again.

With reduced motion

Nothing turns: the name fades in already aligned in the middle, with no orbits.

Pitfalls

Orbits centred in the middle of the name would not put the letters in reading order: they are centred on the first letter, so the growing radii are already the order of the word, and at the end the whole system slides to the middle.
A letter passing behind the sun but drawn after it covers it: each letter changes group, before or after the sun, by the sign of the sine, and is only moved when the sign changes.
The same overshoot in degrees on every orbit is one pixel on the small one and twenty on the big one: it is measured in pixels and divided by the radius.

Libraries

GSAP 3.15.0, Unbounded (font variabile) 5.3.0.

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