The headline that arrives in pixels

Text, IntroGSAP, CSS onlyMediumCompressed weight: Demo 4.5 KBGSAP + SplitText + CustomEase 35 KBFreeDownload the zip

The opening of a games studio, in the minimal style: two words in a pixel typeface grow out of the middle of the screen while the letters drop into place, one from above and the next from below, in a scattered order. Each letter falls made of thin round dots and lands as solid square pixels. Then the reel card swings in on an elastic and settles at a tilt.

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 headline that arrives in pixels</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bitcount-prop-single@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a made-up games studio, Pixmoor: two words in a pixel typeface grow out of the middle of the
       screen while their letters drop in from above and below in a random order, round dots that turn square as they
       land. Then a card with the reel swings in on an elastic and settles at a tilt -->
  <main class="palco" data-palco>
    <header class="testa">
      <span class="marchio">Pixmoor</span>
      <span class="nota">Independent games studio</span>
    </header>

    <h1 class="titolo" aria-label="Extra life">
      <span class="riga riga--prima" data-riga><span class="riga__dentro" data-dentro>Extra</span></span>
      <span class="riga riga--seconda" data-riga><span class="riga__dentro" data-dentro>Life</span></span>
    </h1>

    <a class="carta" href="#" data-carta aria-label="Play the reel">
      <span class="carta__fondo">
        <svg class="carta__play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" /></svg>
        <span class="carta__nome">Reel</span>
      </span>
    </a>

    <p class="piede">Worlds, characters and trailers for games people keep playing.</p>
  </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/SplitText.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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 headline that arrives in pixels” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

Pixmoor, a made-up games studio, introduces itself with two words, Extra Life, on black. The two lines start at a tenth of their size and grow out of the middle of the screen, not their own, so they spread out towards the edges. Meanwhile the letters drop into place in a scattered order: the even ones come from above, the odd ones from below, fast at first and with a long brake. While they fall they are made of thin round dots; as they land the dots turn into square pixels and the weight rises to solid black. Then from the lower right comes the reel card, in the page’s only colour, on an elastic that makes it swing once before it settles at a tilt. The mouse pulls the two words slightly apart, one to the left and the other to the right. After a pause the letters leave the way they came, faster, and it starts again.

How it works

The typeface

Bitcount is a variable pixel typeface: besides the weight it has an ELSH axis, the shape of its dots (0 round, 50 square). Every letter has its own --forma and --peso CSS properties, read by font-variation-settings and font-weight, so GSAP changes them one by one.

The growth

Each line grows from START_SCALE to 1 in GROW seconds on a curve made with CustomEase (0.5, 0, 0, 1). The origin is not the middle of the line but the middle of the screen, measured on every round: that is why the words open out towards the edges.

The letters

SplitText splits the words into letters. Each one starts from yPercent -100 if it is even and 100 if it is odd and comes back to zero in DROP seconds on the curve 0, 0, 0, 1, all brake. The order is shuffled on every round; the same order decides when the dots turn square, so every letter turns solid right as it lands.

The card and the mouse

The card starts from CARD_FROM and arrives with elastic.out(1, 1) in CARD_TIME seconds while it fades in over one second. The element that moves is the link; the tilt belongs to its child, in the CSS, so GSAP does not wipe it out. The mouse moves the two words with quickTo, in opposite directions, by PARALLAX pixels at most.

Values to change

Name	File	Default	What it changes
`GROW`	script.js	`1`	The seconds the words take to grow out of the middle of the screen.
`START_SCALE`	script.js	`0.1`	How small the words start.
`DROP`	script.js	`0.7`	The seconds of each letter’s fall.
`STAGGER`	script.js	`0.03`	The gap between one letter and the next, in a scattered order.
`FALL_SHAPE`	script.js	`0`	The shape of the dots while the letter falls: 0 round, 50 square, 100 with cut corners.
`LAND_SHAPE`	script.js	`50`	The shape of the dots once the letter has landed.
`LIGHT`	script.js	`200`	The weight the letter falls with; it lands at 700.
`CARD_FROM`	script.js	`[600, 150]`	Where the card comes from, in pixels to the right and down.
`CARD_TIME`	script.js	`1.5`	The seconds of the card’s elastic arrival.
`PARALLAX`	script.js	`14`	How far the mouse pulls the two words apart, in pixels.
`HOLD`	script.js	`2.6`	The seconds the title stays before it leaves and comes back.

Try them in the Playground

When to use it

For the opening of a games studio, an app, an event or a brand that speaks in pixels: two words and a reel to play.

On phones

The same, with smaller words and the card under the headline.

With reduced motion

Nothing falls and nothing grows: the words and the card fade in, already in place, and the mouse does not move them.

Pitfalls

The origin of the growth must be measured with the line at its true size: clear the transforms first, then read getBoundingClientRect.
To have the same sequence for the fall and for the change of shape, stagger with from: 'random' is not enough, since it shuffles differently on every tween: shuffle the order once and use it for both.
Bitcount’s ELSH axis does not go from round to square as you might expect: 0 is round, 50 square, 100 yet another shape. Try it before animating it.
The card’s tilt lives in its child’s CSS: put on the link, GSAP’s inline transform would wipe it out.

Libraries

GSAP 3.15.0, Bitcount Prop Single (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 4.5 KB; the libraries: GSAP + SplitText + CustomEase 35 KB.

Testing

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