The word with the day's shadow

Text, HoverGSAP, Canvas, CSS onlyAdvancedCompressed weight: Demo 9.3 KBGSAP 28 KBFreeDownload the zip

A big word on the horizon line and its long, flat shadow made of hairlines: the pointer is the sun and the shadow turns round the word like the light of a whole day, long towards the right at dawn, short and straight down at noon, long towards the left at sunset. The letters follow the sun one after the other: wide and light when the sun is low, narrow and heavy at noon. Minimal style.

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 word with the day's 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>
  <!-- one big word and its long, flat shadow drawn in hairline hatching. The shadow turns round the word like the
       light of a whole day: long at dawn, short at noon, long again at sunset. The pointer moves the sun -->
  <main class="stage" role="slider" tabindex="0" aria-label="Time of day" aria-valuemin="5" aria-valuemax="19"
        aria-valuenow="9.5" aria-valuetext="09:30" data-stage>
    <header class="top">
      <p class="time" aria-hidden="true">
        <span class="time__digits" data-digits>09:30</span>
        <span class="time__phase"><span class="time__word" data-phase>Morning</span></span>
      </p>
      <p class="top__note">Shade, all day long</p>
    </header>

    <!-- the sky: a hairline arc with the hours, the ground at its two feet and the sun -->
    <svg class="scene" aria-hidden="true" data-scene>
      <defs>
        <clipPath id="above">
          <rect data-above></rect>
        </clipPath>
      </defs>
      <path class="arc" data-arc></path>
      <g class="ticks" data-ticks></g>
      <path class="ground" data-ground></path>
      <g clip-path="url(#above)">
        <g class="sun" data-sun>
          <circle r="9"></circle>
        </g>
      </g>
    </svg>

    <!-- the long shadow, drawn in hairlines on a canvas -->
    <canvas class="shade" aria-hidden="true" data-shade></canvas>

    <!-- the word: it stands on the horizon, and below the horizon it is cut off -->
    <div class="horizon" aria-hidden="true" data-horizon>
      <div class="word" data-word></div>
    </div>
    <h1 class="sr-only" data-label></h1>

    <p class="hint">Move the sun across the page</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.

24 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 word with the day's shadow” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper a big word, Umbra, stands on an invisible horizon line under a thin arc that makes the sky, with a tick for each hour from six in the morning to six in the evening (the noon one longer and darker) and a stroke of ground at its two feet. The sun is a small vermilion circle running along the arc. The word casts its shadow: a long, flat shadow as in graphic design, that is the word pulled along the light, drawn in hairlines that cross the light at a slant and fading towards its tip. The pointer is the sun: moving from left to right goes from dawn to sunset. At dawn the shadow runs very long to the right and off the page; as the sun climbs it shortens and swings down, at noon it is a short block of lines under the letters; in the afternoon it stretches out again to the left, at sunset it crosses the whole page and then disappears as the sun goes under the horizon, behind the stroke of ground. The letters follow the height of the sun on Anybody's width and weight axes: with a low sun they are wide and light, at noon narrow and heavy; they change one after the other, the one nearest the sun first, on a spring that goes a hair too far and comes back. When the sun passes a tick, the tick gives a small elastic kick. At the top left the time (09:30) and the moment of the day, Dawn, Morning, Noon, Afternoon, Sunset, Night, which changes sliding inside its little window; on the right Shade, all day long. When the page opens the arc draws itself from left to right with the ticks popping up, the letters rise one by one from under the horizon and the sun comes up to half past nine, with the shadow born long and shrinking. When nobody moves the pointer the day goes on by itself from dawn to sunset and then starts again. The arrow keys move a quarter of an hour, Page Up and Page Down an hour, Home and End go to dawn and sunset.

How it works

The sun on the arc

The pointer's horizontal position becomes the hour, from just after five to just before seven in the evening, and the hour shown follows it on a spring (SUN_SPRING) integrated by hand on GSAP's ticker, with the step capped at 1/30 of a second. The hour becomes an angle on the arc, π at six in the morning and 0 at six in the evening, and the sun sits on the ellipse centred on the word; the sun's height is 62 degrees times the sine of the fraction of the day, negative before six and after eighteen. Below the horizon the sun is cut by a clipPath and the shadow fades away.

The long shadow in nine doublings

The shadow goes from the sun through the word and beyond: its direction is the one from the sun to the middle of the word, its length is SHADOW times the letter size divided by the tangent of the sun's height, so it is very long at dawn and short at noon. The letters are drawn on a canvas, which is then copied onto a second canvas twice, the second time moved along the light; this is repeated nine times doubling the shift, and the copies become 511, a solid shape with no gaps. Only the rectangle holding the letters and the shadow is worked on, and that is what makes it fast.

The hairlines inside the shadow

The letters themselves are cut out of the shape (destination-out), then a gradient along the light fades it towards its tip (destination-in). On the visible canvas, at screen resolution, the hairlines (HATCH) are drawn at ANGLE degrees to the light, counted from the middle of the page so they do not slide; the shape keeps them only where there is shadow. Lines parallel to the light would not read as a shape, only as streaks.

Letters that follow the sun

Each letter is a span with font-variation-settings: a single number from 0 to 1, the sun's height, becomes width (WIDTH) and weight (WEIGHT). Each letter reads the height as it was STAGGER seconds earlier for every place between it and the side of the sun, from a short memory of the last second, and gets there on a spring of its own. On the canvas the letters are drawn again with the same weight, the nearest of the widths the canvas knows and the measured box of the real letter.

The opening and the day on its own

A GSAP timeline draws the arc with stroke-dasharray on pathLength 1, pops the ticks up with back.out as the drawing reaches them, raises the letters from under the horizon (a container with hidden overflow that ends exactly on the baseline) and brings the sun to the hour START. After 2.4 seconds with nobody there a repeating timeline takes the sun from dawn to sunset in DAY seconds; when it starts again the sun jumps under the horizon without the spring, so it never runs back across the sky.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Umbra'`	The word on the horizon: short is better, the size fits the page by itself.
`START`	script.js	`9.5`	The hour the opening lands on, from 5 to 19 (9.5 is half past nine).
`DAY`	script.js	`11`	How many seconds the sun takes from dawn to sunset when it goes by itself.
`SHADOW`	script.js	`0.5`	How long the shadow is: higher, longer shadows at every hour.
`HATCH`	script.js	`[6, 1]`	The lines of the shadow: the distance between them and their thickness, in pixels.
`ANGLE`	script.js	`62`	The angle between the lines and the light: 90 sets them across, under 30 they turn into streaks.
`SUN_SPRING`	script.js	`[120, 15]`	The spring the sun follows the pointer on: how stiff, and how much it is held back.
`WIDTH`	script.js	`[146, 70]`	The width of the letters with a low sun and at noon (50 to 150).
`WEIGHT`	script.js	`[250, 820]`	The weight of the letters with a low sun and at noon (100 to 900).
`STAGGER`	script.js	`0.07`	How many seconds pass between one letter and the next as they follow the sun.

Try them in the Playground

When to use it

For a name or a word about light, sun and shade: the title of a holiday home or a seaside hotel, the sign of a bar with a terrace, a brand of parasols, sun cream or sunglasses, the page of a photographer who works with natural light. It works where there is a single scene and the word is the message; it does not suit a heading among lots of other content.

On phones

The same animations with the sizes adapted: the word takes up almost the whole width, the arc of the sky is taller than it is wide, the texts at the top and bottom are a little smaller. The sun follows the finger while it drags anywhere on the page (the page does not scroll there, it is a single scene) and stops when it lifts; then the day starts again by itself.

With reduced motion

No springs, no rising letters, no kicking ticks and no day going by itself: the scene fades in already in place at half past nine, and with the pointer or the arrow keys the shadow and the letters go straight to the chosen hour.

Pitfalls

The first version made the shadow with an SVG filter, nine feOffset and feMerge on the word: right but very slow, over a second per frame in a browser with no graphics card, and nested CSS drop-shadows stayed slow too. On a canvas, working only in the rectangle of letters and shadow, it costs about as much as a word changing weight.
A canvas drawn onto itself is first copied whole: with nine doublings that was nine copies of the page every frame. With two canvases handing the drawing to each other the time was halved.
A canvas cannot draw any width of a variable font (fontStretch only knows nine words, from ultra-condensed to ultra-expanded): the shadow letters take the nearest width and are stretched to the box of the real letter. Where they stayed a hair wider the lines peeked out round the letter edges: now the letters are cut out of the shadow and only paper is left there, invisible.
Lines parallel to the light were lovely at dawn but at noon they turned into vertical streaks that did not read as a shadow: slanted 62 degrees to the light the shape reads at every hour.
With an absolute y on each letter of an SVG text every letter became a chunk of its own, centred on its own, and the word piled up: the letters are now HTML spans that rise with a transform.
The day timeline, created paused, wrote five o'clock into the state straight away through fromTo: with reduced motion the scene opened at night. It needs immediateRender: false.

Libraries

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

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

Testing

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