Skip to content
animorio
IT
Back to the library

Standing letters with a long shadow

A word standing on the ground line, casting its shadow in perspective. The mouse turns the sun, scrolling stretches the shadow.

Text, Scroll, 3DGSAPMediumFree

Scroll inside the preview

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

Download the zip
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lettere in piedi con l'ombra lunga</title>
  <!-- Mona Sans ha l'asse della larghezza (wdth 75-125): serve per allargare le lettere.
       In produzione scarica il font e servilo dal tuo dominio. -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="corsa">
    <div class="palco">
      <div class="cielo" aria-hidden="true"></div>
      <div class="sole" aria-hidden="true"></div>
      <div class="terra" aria-hidden="true"></div>

      <!-- l'ombra: la stessa parola, capovolta, su un piano ruotato in 3D attorno alla linea di terra -->
      <div class="piano-vista" aria-hidden="true">
        <div class="piano">
          <p class="parola parola--ombra"><span class="parola__testo">Piazza</span></p>
        </div>
      </div>

      <h1 class="parola parola--luce"><span class="parola__testo">Piazza</span></h1>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

What it does

The word stands on a plane and casts a long shadow towards the viewer. The shadow turns with the sun: the mouse moves the sun by a few degrees, scrolling takes it towards evening, the shadows grow longer and the letters widen along the font's width axis.

How it works

Two copies of the word

The visible word and its shadow are two elements with the same text. The shadow lives inside a plane (.piano) rotated 72 degrees around the ground line, inside a container with perspective.

The baseline

A zero-height inline element (.base-misura) placed at the end of the text tells where the baseline falls. The word is moved until its baseline sits on the ground line, and the shadow starts exactly there.

The sun becomes a transform

The sun's elevation gives the shadow length (1 / tan(el)), its direction gives the slant (atan(tan(az))). The result is skewX(slant) scaleY(-length) on the shadow.

Scroll and mouse

A scroll-linked tween moves one value from 0 to 1: the sun's elevation, its direction, the sky colours and the letter width all come from it. The mouse adds a few degrees with gsap.quickTo.

One update per frame

Every change marks the scene as dirty; a function on the GSAP ticker redraws it once per frame.

Values to change

NameFileDefaultWhat it changes
LARGHEZZAscript.js0.84How much of the screen width the word takes.
BASEscript.js0.72Where the ground line falls, as a fraction of the height.
MATTINO / SERAscript.js38° / 8°Sun elevation and direction at the start and end of the scroll. Below 10 degrees the shadows get very long.
WDTHscript.js84, 122Letter width on the wdth axis, at the start and at the end. It needs a variable font with a width axis.
--ombra, --ombra-forzastyle.css#0b3b39, 0.52Shadow colour and strength. A dark colour from your palette works better than black.
.corsa heightstyle.css280vhHow far you scroll to bring the sun to evening.

When to use it

A short, important name, at the top or in the footer of a page. Not for long text: the effect carries one word, two short ones at most.

On phones

Without a mouse the sun breathes on its own, back and forth, and stops when the scene leaves the screen. Scrolling works the same.

With reduced motion

Everything holds still: the sun stays in the afternoon, letters and shadow are already in place and scrolling changes nothing.

Pitfalls

  • Measure only after document.fonts.ready: before that the font is not loaded and the baseline is wrong.
  • Size the text on the word at its widest, otherwise it runs off screen as it widens.
  • Letters rise with scaleY: each letter's transformOrigin must sit on the baseline, not in the middle.
  • The shadow uses mix-blend-mode: multiply. On a very dark background pick a lighter shadow colour or drop the blend.

Libraries

GSAP 3.15.0, ScrollTrigger 3.15.0, SplitText 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 11 KB of our own files.

Testing

Tested on 26 September 2026

  • Desktop: Done
  • Phone: Done
  • Reduced motion: Done
  • Safari on iPhone: Done

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.

From the same family

All animations