The logo that falls into its shadow

Intro, TextGSAP, CSS onlyMediumCompressed weight: Demo 5.8 KBGSAP 28 KBFreeDownload the zip

A wordmark intro in the minimal style: the shadows of the letters show up first on the line of earth, wide and pale as under things still very high up; then the letters drop one after the other, narrow and light, and each lands in its own shadow gaining width and weight, while the line gives under the blow. The full stop drops last, in the accent, and the shadows gather into a line under the 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 logo that falls into its shadow</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="scena">
    <!-- the stage: the script measures the word, places one letter and one shadow per slot and draws the ground -->
    <div class="palco" data-stage role="img" aria-label="Settle.">
      <svg class="terra" data-ground aria-hidden="true"><path data-ground-path /></svg>
      <div class="ombre" data-shadows aria-hidden="true"></div>
      <span class="riga" data-bar aria-hidden="true"></span>
      <div class="lettere" data-letters aria-hidden="true"></div>
      <!-- a hidden row in the final face, only to measure where every letter sits -->
      <div class="misura" data-measure aria-hidden="true"></div>
    </div>
    <button class="pillola" type="button" data-replay data-autoclic>
      <span class="pillola__scritta" data-testo="Replay">Replay</span>
    </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.

20 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 logo that falls into its shadow” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page, empty. A thin line of earth draws itself out from the middle. Above it, out of sight, hang the letters of the wordmark ‘Settle’: first you see their shadows, soft wide pale patches, as under things still very high up. One letter after another drops: as it comes down its shadow tightens and darkens under it, and the letter, narrow and light while in the air, lands exactly in its shadow; it squashes a hair, sinks one pixel into the line and settles with a small elastic, widening and gaining weight. The line of earth gives under the blow like a taut string and straightens again, and the letters already standing ride along with it. Last comes the full stop, red, with its red shadow. At the end the shadows melt away and in their place a thin line grows from the middle under the name. Replay appears at the bottom: the letters are lifted back up, last one first, the shadows widen again and they drop once more.

How it works

Measuring the name

A hidden row writes the name at its final width and weight (font-stretch and font-weight of Anybody, a variable face with both axes): from there you read where every letter sits and how much room it takes. The font size is the one that fits the name in 66% of the width (84% on a phone) and never more than a third of the height; the baseline is found with a zero-height box sitting on the line of text.

Everything is a number

Every letter has an object with a few numbers: how high it is (from 1 to 0), how far it has landed in width and weight, the squash, the pixel it sinks, how much its shadow shows and how far the line gives under it. GSAP animates only these numbers; a single function on the ticker turns them into transform, font-stretch, font-weight, opacity and blur. So resizing the window halfway through a fall breaks nothing: it measures again and the next drawing is already right.

The shadow comes first

The shadow is an ellipse with a radial gradient. Its shape depends only on the letter’s height: up high it is 2.2 times as wide as the letter, pale and blurred by 11 pixels; on the ground it is as wide as the letter, dark and almost sharp. The shadow appears 0.6 seconds before the letter sets off, so you see it alone on the line, and during the fall (power2.in, like a body speeding up) it tightens under it.

The blow

On arrival, in seven hundredths of a second, the letter squashes and sinks one pixel; then two elastics put it back. Meanwhile the line of earth takes a bell-shaped dip under the letter, which comes back with elastic.out: the line is a path redrawn with a point every four pixels, and the letters already standing move with it, so they feel their neighbours’ landings.

The line and Replay

When the full stop lands, the shadows melt away and a solid line grows from the middle under the name. Replay lifts the letters backwards, last one first, pulls in the line of earth and plays the entrance again from the start. With reduced motion the wordmark appears already in place, with its line, in a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Settle'`	The name: its letters fall one after the other (up to 12 letters).
`STOP`	script.js	`true`	The full stop in the accent that drops last.
`DROP_HEIGHT`	script.js	`0.9`	How high the letters fall from, in screen heights: higher means wider shadows at first and a longer fall.
`STAGGER`	script.js	`0.2`	The seconds between one letter and the next.
`ORDER`	script.js	`'left'`	The order of the fall: 'left' from the left, 'center' from the middle out, 'edges' from the ends in.
`SQUASH`	script.js	`0.08`	How much a letter squashes as it lands (0 = it stays rigid).
`SETTLE`	script.js	`1`	How many pixels a letter sinks into the line before it settles.
`DIP`	script.js	`4`	How far the line of earth gives under a landing, in pixels.
`SPREAD`	script.js	`2.2`	How wide a shadow is while its letter is still high up, in times the letter.
`NARROW`	script.js	`62`	The width of a falling letter (font-stretch, in per cent).
`WIDE`	script.js	`116`	The width of a landed letter.
`LIGHT`	script.js	`220`	The weight of a falling letter.
`HEAVY`	script.js	`720`	The weight of a landed letter.
`--ground`	style.css	`#f3f0e8`	The background.
`--ink`	style.css	`#161513`	The letters, the line of earth and the line under the name.
`--shade`	style.css	`#161513`	The colour of the shadows (drawn faint).
`--accent`	style.css	`#e2462b`	The full stop that drops last and its shadow.

Try them in the Playground

When to use it

To present a wordmark with calm and weight: the opening of the site of a studio, an estate agency or a furniture brand, a welcome page, a loader, the end of a video or of a post. It suits pages that are pared back and names that are short.

On phones

The same animation with the sizes adapted: the name takes more of the screen’s width, the line of earth stays inside the edges and Replay is tapped with a finger.

With reduced motion

Nothing falls: the wordmark fades in already in place on the line, with the line under the name. Replay fades it out and in again.

Pitfalls

The letters change width as they land: in a normal line they would push their neighbours. Each letter stands alone, centred on its slot measured at the final width (translate of minus 50%), so it widens symmetrically and arrives exactly where it should.
With the transform origin in the middle of the box, the squash lifted the letter off the line: the origin sits on the baseline, measured with a zero-height box.
Shadows gathered into a line, made from the same flattened ellipses, left a row of beads: at the end the shadows melt away and a separate solid line grows from the middle.

Libraries

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

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

Testing

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