The black-square logo

Intro, Text, SVGGSAPMediumCompressed weight: Demo 8.2 KBGSAP 28 KBFreeDownload the zip

A minimal logo intro: thin blades cut a black square into strips, the strips slide sideways, stretch out, and the letters of the brand are carved out of the black as they fall back into line, with a one-pixel elastic settle; at the end a thin line underlines the name. In the Playground you type your own name or upload your own logo.

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 black-square logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, cuts the square into strips and slides them into the logo -->
    <svg class="palco" data-stage role="img" aria-label="scindo" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs></defs>
      <g data-world>
        <!-- the hairline the square opens from -->
        <rect class="pieno" data-seed />
        <!-- the square, then the strips, then the logo: one group per strip, each with its own clip -->
        <g data-square>
          <g data-bands></g>
        </g>
        <!-- the blades that cut the square -->
        <g data-blades></g>
        <!-- the thin line under the name -->
        <rect class="riga" data-underline />
      </g>
    </svg>
    <p class="nota">Click or tap to see it again</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.

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 black-square logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white ground, a thin black line draws itself out from the middle and opens into a black square, which arrives a touch too tall and settles with a small elastic. The square takes a breath, shrinking slightly, then very thin red blades cross it one after the other, top to bottom: each cut opens a gap a few pixels wide and drags the strips along the blade for a moment. The strips slide sideways, one right and one left, the outer ones farther, and stretch out into bars as wide as the name. Then the letters of the made-up brand, scindo, are carved out of the black: the bars hollow out wherever there is no ink while they fall back into line, pass their place by a pixel and an elastic pulls them back. The gaps close with a click, the logo is whole and a thin red line underlines it from left to right, runs a little past the end and comes back; a small shiver runs up the strips. While the logo is on show, a blade crosses it and the two halves slip by a pixel, then fall back into place. After a few seconds the line pulls back, the gaps open again and the strips slide out to the sides; it all starts again. A click restarts it. A picture can take the place of the word: it is cut into the same strips and uncovered by the black sliding away.

How it works

One size

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. The letters are measured on a canvas in the same typeface, Jost (measureText, actualBoundingBoxAscent for the true height, actualBoundingBoxLeft and Right for where the ink starts and ends), and everything is counted in letter heights: the square is as tall as the logo, the bars as wide as the ink plus a hair, the sideways slide half a square. The size is chosen so that the shifted bars fit even on a phone.

The strips

Each strip is a group holding its own clipPath: a rectangle that starts as wide as the square and then stretches to the name. The strip edges fall on whole pixels and each clip reaches one pixel into the strip below: it is the same drawing twice, so when the strips touch no light line is left between them. The place, gaps and drag of every strip are written by a single function after every frame, from two numbers per cut: how open it is and how hard it pulls.

Letters carved from the black

The black bars are the letters themselves drawn with a huge outline in the same colour, which fills everything; the outline shrinks to zero and the letters come out of the black. To know how thick it must be at the start, the logo is drawn small on a canvas and a walk out from the ink measures the point of each strip that lies farthest from the letters: so the swap between the solid rectangle and the letters cannot be seen, and every strip starts carving at the same instant. The outline shrinks with expo.out, fast at first and slow on the details.

The extra pixel

The strips fall back into line with power3.inOut towards a point one pixel past their place (SETTLE), then an elastic.out(1, 0.3) brings them back to zero: an almost invisible move that makes the logo feel made of real pieces locking together. The same goes for the gaps, which close passing zero by a pixel, for the square as it opens and for the line under the name, which runs a little past the end and springs back.

Direction and your logo

The whole intro is one timeline, with the labels start, square, cut, shear, carve, lock, line, rest and leave, and timeScale for the speed. The blades are red rectangles a pixel and a half tall that stretch out and then pull in their tail. If IMAGE holds an address, the picture takes the place of the letters, cut into the same strips, and the black is not carved but slides off the way the strip came back. In the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'scindo'`	The logo as a word: the strips are carved into its letters.
`IMAGE`	script.js	`''`	The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the word.
`STRIPS`	script.js	`7`	How many strips the blades cut the square into.
`SHEAR`	script.js	`1`	How far the strips slide sideways, in square widths (0 = they stay in line).
`SETTLE`	script.js	`1`	How many pixels the strips overshoot their place before the elastic pulls them back (0 = they stop dead).
`UNDERLINE`	script.js	`true`	The thin red line that underlines the name at the end.
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`REST`	script.js	`4`	How many seconds the logo stays on show before the strips slide out.
`LOOP`	script.js	`true`	Whether the strips slide out and a new square is cut. With false the logo stays, and now and then a blade crosses it.

Try them in the Playground

When to use it

To present a logo with a clean, precise gesture: the opening of an architecture or graphic design studio's site, a fashion or design brand, a portfolio, a preview for a client, a loading screen, a social post. It suits pages where everything else is quiet. It works with a written wordmark and with a picture.

On phones

The same animation with the sizes adapted: the logo is smaller, so the bars shifted sideways still fit on the screen. A tap restarts it.

With reduced motion

Nothing moves: the black square fades in, then fades into the logo and the line appears under the name. If the animation starts again, the logo leaves with a fade too.

Pitfalls

Strips cut with clips that touch exactly leave a thin light line between them (the antialiasing of the two edges): the edges fall on whole pixels and each clip reaches one pixel into the strip below, which shows the same drawing.
With one outline thickness for the whole logo, the top strips, where there is little ink, stayed solid while the others were already letters: each strip has its own thickness, measured on the canvas, and the outline shrinks with expo.out, otherwise nothing happens for half a second and then everything at once.
Bars as wide as the name plus a generous margin started carving from their tips, with an odd notch at the end: now they end just past the real ink (actualBoundingBoxLeft and Right).
A very short name, such as a single letter, is narrower than the square: the bars then shrink instead of stretching, and the black rectangle under the letters still covers the whole square until the carving starts.

Libraries

GSAP 3.15.0, Jost (font variabile) 5.3.0.

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

Testing

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