The logo in the rangefinder

Intro, TextGSAPMediumCompressed weight: Demo 5.8 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro borrowed from an old rangefinder camera: four thin corners make the viewfinder, under it sits the distance scale of the focusing ring, and in the middle of the name, in a small window, the second image of the rangefinder, red and shifted to the side. The ring turns from infinity to two metres, the second image slides until it meets the name, a pixel past and back, and the name comes into focus: it gains weight, narrows and the corners hug it. Drag it sideways and it goes out of focus 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 logo in the rangefinder</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-stage>
    <p class="marca">Nadir <span>Optical studio</span></p>

    <!-- the viewfinder: four corners, the name and, in the middle, the rangefinder patch with the second image -->
    <div class="mirino" data-finder>
      <span class="angolo angolo--a" data-corner></span>
      <span class="angolo angolo--b" data-corner></span>
      <span class="angolo angolo--c" data-corner></span>
      <span class="angolo angolo--d" data-corner></span>

      <h1 class="nome" data-name aria-label="Nadir">
        <span class="nome__base" data-base aria-hidden="true">Nadir</span>
        <span class="finestra" data-patch aria-hidden="true">
          <span class="nome__fantasma" data-ghost>Nadir</span>
        </span>
      </h1>
    </div>

    <!-- the distance scale of the focusing ring, sliding under a fixed index -->
    <div class="ghiera" data-ring aria-hidden="true">
      <div class="ghiera__nastro" data-tape></div>
      <span class="ghiera__indice" data-index></span>
    </div>

    <p class="motto" data-tagline>Sharp, at last.</p>

    <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.

31 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 in the rangefinder” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page. Four thin corners pop up one after another with a small snap and make the viewfinder; under it the distance scale of the focusing ring lights up, 0.7, 1, 1.5, 2, 3, 5, 10 and infinity, with its ticks, and a fixed vermilion line is the index. The name, Nadir, appears pale and light; in the middle, inside a small rectangular window, sits the second image of the rangefinder, the same name in vermilion, shifted far to the side. Then the ring turns: the scale slides from infinity to two metres and the second image glides towards the name, slowing down, goes a pixel past and springs back. In that moment the name is in focus: it turns solid, gains weight and narrows with a small bounce, the second image and the window go out, the index gives a tick and the corners close in around the name. The motto and the Replay button arrive. Drag the name left or right and the second image comes apart again, the name blurs and lightens; let go and it springs back into focus.

How it works

Two copies of the name, one inside a window

The name is there twice. The first is the real name. The second, vermilion and in multiply, sits inside an overflow hidden span a third of the name wide and as tall as the capitals, in the middle: the rangefinder window. Inside the window the copy is offset by as much as the window is offset in the name, so with no shift it matches the real one letter by letter.

One number for the focus

Everything depends on f, from 0 (out of focus) to 1 (in focus). The second image sits (1 - f) times SPLIT times the font size to the side; the scale of the ring slides so that the index reads infinity at 0 and the chosen mark, two metres, at 1. A timeline takes f one pixel past 1 with power3.inOut and back to 1 with elastic.out: the second image crosses the name by a pixel and returns.

Focus you can see in the type

Archivo variable: out of focus the name is wide and light (wdth 112, wght 280) and pale; in focus it turns solid, narrow and heavy (wdth 88, wght 760) with back.out, which gives it a slight bounce. The window is measured again on every frame, because the name changes width as it narrows.

Out of focus with a finger

Once the entrance is over, dragging the name turns the horizontal distance into distance from focus: the second image comes apart on the side of the finger, the name lightens and blurs. On release f goes back to 1 with elastic.out and the weight with back.out. With reduced motion the name appears already in focus, with a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Nadir'`	The name: short, five or six letters.
`TARGET`	script.js	`3`	Which mark of the ring it focuses on (3 is two metres).
`SPLIT`	script.js	`0.42`	How far the second image starts, as a share of the font size.
`FOCUS_TIME`	script.js	`1.7`	How many seconds the ring takes to turn into focus.
`SNAP`	script.js	`1`	How many pixels the second image overshoots before it stops.
`LIGHT`	script.js	`280`	The weight of the name out of focus.
`HEAVY`	script.js	`760`	The weight of the name in focus.
`WIDE`	script.js	`112`	The width (wdth axis) out of focus.
`NARROW`	script.js	`88`	The width in focus.
`HUG`	script.js	`6`	How many pixels the corners close in when the name is sharp.
`SPEED`	script.js	`1`	2 is twice as fast, 0.5 half as fast.

Try them in the Playground

When to use it

For the opening of a photographer’s site, a photo studio or an optician, the loader of a one-word wordmark, the launch of a lens or a camera.

On phones

The same animation: the name is smaller, the ring’s scale shorter, and the name goes out of focus when dragged with a finger.

With reduced motion

Nothing slides: the logo appears already in focus, with the corners and the ring, in a fade; then the Replay button.

Pitfalls

The name changes width as it narrows: the rangefinder window, measured only once, ended up off centre. It is measured again on every frame.
GSAP puts its own transform on the copy inside the window: the window and the copy are two different elements, one for CSS and one for GSAP.
The Replay button only shows up once the entrance is over: a click halfway (the preview autopilot’s too) would start everything over.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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