The drop cap that sinks in

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

A short justified paragraph, in the minimal style: its first letter lifts out of the line, the words step aside in a wave from the top and the letter grows into the corner, three lines down, between two thin guides. As it grows the optical size of the typeface changes with it; it takes weight and lands one pixel low, red like an initial painted by a rubricator; then it climbs back into its line and the paragraph closes up again.

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 drop cap that sinks in</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the column: two hairlines mark its edges; the script sets the paragraph inside, word by word. Then the first
         letter lifts out of its line, grows and sinks into the corner, three lines deep, and the words step aside -->
    <div class="measure" data-measure>
      <i class="edge" data-edge aria-hidden="true"></i>
      <i class="edge edge--right" data-edge aria-hidden="true"></i>
      <i class="rule" data-rule aria-hidden="true"></i>
      <i class="rule" data-rule aria-hidden="true"></i>
      <p class="para" data-para></p>
      <span class="cap" data-cap aria-hidden="true"></span>
      <p class="foot" data-foot>
        <span class="foot__brand">Ravelin</span>
        <span class="foot__axis" aria-hidden="true">opsz <b data-op>24</b></span>
      </p>
    </div>
  </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.

14 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 drop cap that sinks in” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On ivory paper two very thin lines draw themselves from the top and mark the edges of a column. Inside, line after line, a justified paragraph is set in a serif typeface: the words rise a little and settle. Below, on the left, the name of the made-up magazine, Ravelin, and on the right the optical size of the type, opsz 28. Then the O of «Open» hops out of the line, a little larger, and hangs above the corner. The words step aside in a wave that runs down line by line: the first three lines slide to the right, each one pixel too far and back, and the words that no longer fit leave at the end of their line and come back in at the start of the next one, once that line has made room. In the empty corner two thin guides draw themselves, with ticks at the ends: the cap height of the first line and the baseline of the third. The O grows and sinks between the two guides; as it grows the optical size follows it (the number below counts up to 72), the drawing of the letter gets finer and more contrasted, it takes weight and in the last moments turns red. It lands one pixel below the baseline, squashes a touch and comes back up, and the first words of the three lines beside it feel the knock, from the bottom up, while the lower guide shakes by a pixel. The guides withdraw. After a rest the letter climbs back, shrinks and turns black again, the paragraph closes up with the same wave and the O drops back into its place in front of «pen»; then the words leave in reading order and it all starts again.

How it works

A typeface with optical sizes

Newsreader has an optical size axis (opsz, from 6 to 72) and weight from 200 to 800: the Fontsource «opsz» file keeps both. With font-optical-sizing: auto the browser picks the optical size to match the size in pixels, so animating the real size of the letter (font-size) rather than its scale is enough: the big drop cap is the display cut, finer and more contrasted, not the text cut blown up.

The lines are set by the script

Every word is a span placed by hand on its baseline. The script measures the words in the browser, breaks them into lines (a line ends when the next word no longer fits) and justifies them, except the last line; if a line would come out too loose it is left ragged. It does this twice: with the O inside the first word and with the first lines indented. So the two layouts are two maps of positions, and GSAP takes every word from one to the other.

The drop cap, measured

The letter has to reach from the cap height of the first line to the baseline of the third: the cap height is read on a canvas (measureText of an H, actualBoundingBoxAscent), and the size of the drop cap comes from it. The left and right edges of the letter’s ink are read on a canvas too, so the ink starts on the edge of the column (a round letter like the O passes it by a hair, as the eye wants) and the indent of the lines is measured from its real edge. The baseline inside a span is found once with an empty element aligned to it.

The wave of words

The lines start one after another, 80 thousandths of a second apart. The words that stay on their line all slide on the same curve, the one at the front of the run first, so they never close up; they arrive one pixel too far and come back. The words that change line slip out sideways, fading, and come back in at the other end of the new line only once it has made room.

The direction

A single GSAP timeline that starts again. The state of the letter (size, position, baseline, squash) is an object the tweens animate, and one function draws it on every update: size and baseline together, with the transform origin on the baseline. Weight and colour are tweens on the element. The landing has the one pixel too far, the squash on a damped spring written as an easing function, the knock to the lines beside it and to the guide.

Values to change

Name	File	Default	What it changes
`TEXT`	script.js	`'Open any good book and the eye finds its way in at once. Before the first word there is only white, a field with no path across it. One large letter, sunk into the first lines, is the door: it tells the reader where the story starts, and how quietly to walk in.'`	The paragraph. Its first letter becomes the drop cap; five or six lines of text work well.
`DROP`	script.js	`3`	How many lines deep the drop cap sinks, from 2 to 4.
`WEIGHT`	script.js	`560`	The weight the drop cap takes as it sinks, from 200 (light) to 800 (bold); the text stays at 400.
`JUSTIFY`	script.js	`true`	The paragraph justified, like a magazine column; off, it is ragged right.
`HOLD`	script.js	`2.4`	The seconds the drop cap rests in its corner before it climbs back.
`SPEED`	script.js	`1`	The speed of everything: 2 is twice as fast, 0.5 half as fast.
`LOOP`	script.js	`true`	Whether the drop cap climbs back and the paragraph is set again from the start; off, the drop cap stays in place.
`--accent`	style.css	`#d63a22`	The colour of the drop cap once it has landed, the rubricator’s red.

Try them in the Playground

When to use it

For the start of a text you want people to read: the first paragraph of an article on a personal blog or in a magazine, the story of a tavern or a winery, the about page of a design studio or a publisher. It works with a short paragraph, five or six lines long, that starts with a well-shaped capital.

On phones

The same animation with the same text: the column is as wide as the screen minus the margins and the type is 18 px, so there are six shorter lines and the drop cap is smaller but still sinks three lines. Both layouts are worked out again at the real size; if the window changes width the paragraph is set again from the start, if only the height changes (the address bar) it goes on.

With reduced motion

Nothing moves or grows: the paragraph fades in, then fades out and back in already with the red drop cap in its corner and the guides, which fade away. After the rest it fades again and comes back with the O in its line; at the end everything fades and starts again.

Pitfalls

The first wave started the words of a line one after another from the left: the ones that started first caught up with the ones still waiting and the letters overlapped («Beforethefirstword»). Now all the words of a line slide on the same curve and the first to start is the one at the front of the run: the space between two words never drops below its starting or ending value.
The words coming in from the line above appeared in their places while the words of that line were still there, and slid over them. Now they come in 0.62 seconds after their line starts, once the line has made room.
Growing the drop cap with scale would have given the text cut blown up, with heavy serifs and hairlines too thick. font-size is animated instead, and with font-optical-sizing: auto the optical size follows: that is why the drop cap is drawn by a function (size, baseline and transform origin together) and not by a tween on scale.
The drop cap is drawn in the tweens’ onUpdate: anyone moving the timeline with tl.seek(t) has to pass seek(t, false), because seek by default does not call onUpdate and the letter would stay at its old size.
Aligning the drop cap by its box made it sink too far and stick out of the column on the left: the box of a letter has room for accents above it and blank margins at the sides. The cap height and the edges of the ink are read on a canvas (actualBoundingBoxAscent, actualBoundingBoxLeft and Right) and the letter is placed by its ink.

Libraries

GSAP 3.15.0, Newsreader (font variabile, assi opsz e wght) 5.3.0.

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

Testing

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