The two gratings logo

Intro, SVGGSAPMediumCompressed weight: Demo 5.0 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro, on the old barrier-grid optical trick: black stripes grow down into an even field that hides the name, shifted half a stripe inside the letters; a second grating slides over it with a vermilion edge, the name flickers slower and slower and locks solid when the two gratings are in step. Then the stripes thin away. In the Playground you type your own name.

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 two gratings logo</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-scene>
    <!-- the stage: a field of stripes hides the name; a second grating slides over it and the name appears where the
         two line up -->
    <svg class="palco" data-stage role="img" aria-label="VEIL" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs></defs>
      <g data-field></g>
      <g data-sheet-clip><g data-sheet></g></g>
      <g data-solid></g>
      <rect class="bordo" data-edge />
    </svg>
    <button class="ancora" type="button" data-replay>Replay</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.

13 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 two gratings logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white page vertical black lines grow from top to bottom, one after the other from left to right, until they make an even striped field. The name, VEIL, the made-up brand, is in there, but inside the letters the stripes are shifted by half a stripe and it barely shows. From the right a second grating comes in, the same stripes on a clear sheet, its edge marked by a thin vermilion line: wherever the two gratings fill each other’s gaps the field turns solid black, and as the sheet slides the name flickers, dark on stripes and then striped on black, very fast at first. The sheet slows down, the flicker slows, it passes its place by a pixel and comes back: the name locks solid black among the stripes. Then all the stripes thin down to threads, from the middle to the edges, and vanish; the vermilion line goes out. The name is left, wide and heavy, still; a small Replay appears at the bottom.

How it works

The barrier-grid trick

The stripes are half a pitch wide, so they cover half of the field. Outside the letters they sit on the even half pitches, inside on the odd ones: the same name is used as an SVG mask twice, white on black for the inner stripes and black on white for the outer ones. The second grating has its stripes on the even half pitches: in step, outside the letters the two gratings coincide (stripes), inside they complete each other (solid black), and the name reads.

The flicker

The sheet is an SVG group cut by a clipPath as big as the field, moved with translate. Every pitch it travels, the name goes from full to empty and back: it flickers faster the faster the sheet slides. The slide is a power3.out tween lasting SLIDE seconds towards a point SETTLE pixels past register, then elastic.out(1, 0.35) brings it back to zero: the flicker slows, hesitates and stops.

The stripes one by one

Each stripe is its own rectangle, not a pattern: so it can grow from the top with its own delay (left to right) and, at the end, thin towards its own middle with its own delay, from the middle of the name to the edges. The pitch of the stripes is PITCH times the size of the letters, rounded to a whole pixel so the two gratings match with no fringes.

From stripes to name

When the gratings are in step the name inside is already solid black: at that instant the same name appears on top as real text, identical, and the stripes can vanish without the name changing. The face is Archivo with the wdth and wght axes at their top: thick stems that hold many stripes, so the flicker reads on a phone too.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'VEIL'`	The logo, hidden in the stripes.
`PITCH`	script.js	`0.036`	The distance from one stripe to the next, in letter sizes (smaller = finer stripes).
`SLIDE`	script.js	`2.9`	The seconds the second grating takes to slide into place.
`SETTLE`	script.js	`1`	How many pixels the grating passes its place before it springs back.
`WIDTH`	script.js	`125`	How wide the letters are: from 62 (narrow) to 125 (wide).
`WEIGHT`	script.js	`900`	How heavy the letters are: heavy letters hold more stripes.
`SPEED`	script.js	`1`	The speed of the whole intro: 2 is twice as fast, 0.5 half as fast.
`REPLAY`	script.js	`true`	The small Replay button that appears at the end (a click anywhere on the page restarts the intro anyway).

Try them in the Playground

When to use it

For the opening of the site of a film or photography festival, a graphic design or optics studio, a fashion or eyewear brand, an exhibition about illusions; for a short, strong name in capitals. It suits pages that are otherwise black and white.

On phones

The same grating and the same flicker. The pitch of the stripes never goes below four pixels, so on a phone, with a smaller name, the stripes are a little coarser compared with the letters. A tap hides the name in the stripes again.

With reduced motion

No stripes and no flicker, which can bother people who ask for less motion: the name fades in.

Pitfalls

With a pitch that is not a whole number the stripes of the two gratings fall on different half pixels and in step they leave light threads between them: the pitch is rounded to a whole pixel and the field starts at a whole x.
The width of the name cannot be measured on a canvas, which cannot set the wdth axis: it is measured on the SVG text itself with getComputedTextLength, after the font has loaded.
With an SVG pattern the stripes cannot each have their own delay: they are real rectangles, about a hundred per grating, which GSAP moves without effort.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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