The origami-unfolding logo

Intro, SVG, TransitionsGSAPAdvancedCompressed weight: Demo 16 KBGSAP 28 KBFreeDownload the zip

A logo entrance made all of paper: an origami crane flies in flapping its wings, lands and unfolds face after face into a square sheet, which pleats like an accordion into strips; the strips flip one after another and the logo appears on the white side, laid flat and clean. 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 origami-unfolding logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, writes the logo in it and folds the paper -->
    <svg class="palco" data-stage role="img" aria-label="Wrenfold" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the grain of the paper: a fine noise multiplied over everything made of paper -->
        <filter id="grain" x="-10%" y="-10%" width="120%" height="120%" color-interpolation-filters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" stitchTiles="stitch" result="noise" />
          <feColorMatrix in="noise" type="matrix" values="0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0 0 0 0 1" result="grey" />
          <feComponentTransfer in="grey" result="tone">
            <feFuncR type="linear" slope="0.26" intercept="0.84" />
            <feFuncG type="linear" slope="0.26" intercept="0.84" />
            <feFuncB type="linear" slope="0.26" intercept="0.84" />
          </feComponentTransfer>
          <feBlend in="SourceGraphic" in2="tone" mode="multiply" result="printed" />
          <feComposite in="printed" in2="SourceGraphic" operator="in" />
        </filter>
        <!-- the light that runs over the paper once the logo is flat -->
        <linearGradient id="shine-fill" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="lampo lampo--via" />
          <stop offset="0.5" class="lampo" />
          <stop offset="1" class="lampo lampo--via" />
        </linearGradient>
        <clipPath id="card-clip"><path data-card-clip /></clipPath>
        <!-- the logo, written once and shown on every strip and on the flat card -->
        <g id="logo-art" data-art></g>
        <g data-clips></g>
      </defs>

      <g data-world>
        <g data-ground>
          <ellipse class="ombra" data-crane-shadow />
          <ellipse class="ombra" data-paper-shadow />
        </g>
        <g data-fx-back></g>

        <g filter="url(#grain)" data-paper>
          <!-- the logo flat on its card: the corner that lifts in the wind and the light that runs over it -->
          <g data-card>
            <rect class="foglio-ombra" data-card-back />
            <path class="foglio" id="card-shape" data-card-shape />
            <use href="#logo-art" />
            <polygon class="angolo-ombra" data-flap-shade />
            <polygon class="angolo" data-flap />
            <!-- the clip sits on a group: on the moving band it would move with it -->
            <g clip-path="url(#card-clip)"><rect class="lampo-striscia" fill="url(#shine-fill)" data-shine /></g>
          </g>
          <g data-tiles></g>
          <g data-creases></g>
          <g data-mesh></g>

          <!-- the crane: drawn facing right, the point under its body is 0 0. Every face is a triangle with its own
               light, and the script reads them to unfold the paper -->
          <g data-crane-place>
            <g data-part="wing-far" data-wing-far>
              <polygon class="faccia faccia--lontana-scura" data-face points="-74,-178 -44,-56 -26,-60" />
              <polygon class="faccia faccia--lontana" data-face points="-74,-178 -26,-60 -6,-62" />
              <polygon class="faccia faccia--lontana-chiara" data-face points="-74,-178 -6,-62 14,-60" />
              <polygon class="ala-sotto" points="-74,-178 -44,-56 14,-60" data-under-far />
            </g>
            <g data-part="tail" data-tail>
              <polygon class="faccia faccia--scura" data-face points="-66,-42 -140,-130 -52,-49" />
              <polygon class="faccia faccia--chiara" data-face points="-52,-49 -140,-130 -38,-56" />
            </g>
            <g data-part="neck">
              <polygon class="faccia faccia--ombra" data-face points="38,-56 112,-138 52,-49" />
              <polygon class="faccia faccia--chiara" data-face points="52,-49 112,-138 66,-42" />
            </g>
            <g data-part="body">
              <polygon class="faccia faccia--ombra" data-face points="-66,-42 0,-40 0,0" />
              <polygon class="faccia faccia--media" data-face points="0,-40 66,-42 0,0" />
              <polygon class="faccia faccia--scura" data-face points="-66,-42 0,-64 0,-40" />
              <polygon class="faccia faccia--chiara" data-face points="0,-64 66,-42 0,-40" />
            </g>
            <!-- the head: it nods on the top of the neck; its eye has an iris, a glint and a lid that blinks -->
            <g data-part="head" data-head>
              <polygon class="faccia faccia--chiara" data-face points="112,-138 152,-110 124,-126" />
              <polygon class="faccia faccia--ombra" data-face points="124,-126 152,-110 104,-122" />
              <g data-eye>
                <ellipse class="guancia" cx="131" cy="-117.5" rx="4.2" ry="2.2" />
                <circle class="occhio" cx="118" cy="-127" r="4.2" />
                <g data-pupil>
                  <circle class="iride" cx="118.6" cy="-127" r="2.8" />
                  <circle class="pupilla" cx="118.9" cy="-127" r="1.5" />
                  <circle class="riflesso" cx="117.9" cy="-128.2" r="0.8" />
                </g>
                <ellipse class="palpebra" cx="118" cy="-127" rx="4.9" ry="4.9" data-lid />
              </g>
            </g>
            <!-- the near wing, in front of the body; underneath it is darker -->
            <g data-part="wing-near" data-wing-near>
              <polygon class="faccia faccia--scura" data-face points="-36,-198 -38,-54 -16,-58" />
              <polygon class="faccia faccia--media" data-face points="-36,-198 -16,-58 6,-60" />
              <polygon class="faccia faccia--chiara" data-face points="-36,-198 6,-60 28,-56" />
              <polygon class="ala-sotto" points="-36,-198 -38,-54 28,-56" data-under-near />
            </g>
          </g>
        </g>

        <g data-fx></g>
      </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.

27 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 origami-unfolding logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a sand-coloured background an orange paper crane flies in from the left, folded like a real origami: every face is a triangle with its own light and shade, the folds have a dark line and the paper has a light grain. It flies flapping its folded wings (darker underneath), swoops a little, glides with its wings open, lifts its beak and brakes with two beats, then lands with a squash and two puffs of dust. It looks at us, blinks, bows and closes its eye. Then it starts to unfold: first the head, then the neck and tail, then the wings and the body; every face turns along its crease like real paper, shortening as it rises, changing light and, past a right angle, showing the white side for a moment. In the end it is a square sheet standing upright, full of crease marks. The sheet pleats like an accordion into strips, which hop and spread out to the size of the logo; then they flip one after another, from the orange back to the white side, where the logo of a made-up brand, Wrenfold, is printed. The strips stretch out, the crease marks fade and the clean logo is left, giving a little bounce among paper confetti while a gleam passes over it. At rest, now and then a gleam crosses the paper and a breath of air lifts a corner, which folds over showing its coloured back and falls again. After a few seconds the logo turns back into strips, then a sheet, then a crane: the crane opens its eye, crouches and flies away up to the right, and the entrance starts again with a slightly different flight. A click restarts it from the beginning. A picture can take the place of the word: it ends up split over the strips just like the written logo.

How it works

A stage to size

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. The logo is measured on a canvas in the same typeface (measureText, with actualBoundingBoxLeft and Right for the real ink rather than the advance), and the card, the crane and the sheet all come from that: one size for everything. On a tall screen the card takes almost the whole width and the crane is a little bigger; with a long name the crane still keeps a minimum size.

The crane

The crane is drawn only once in the page: sixteen triangles, each with its own light class (light, mid, shade, deep), a dark outline on every fold, and an eye with an iris, a glint and a lid. Place, size, tilt and squash go into one object written as a transform attribute; the wings fold on the shoulder line with scale(1, f), and when f drops below zero a dark triangle over the wing shows its underside. Head and tail turn on their joints, worked out with getBBox. The flight is a path with a swoop that fades out on arrival, and the tilt comes from its slope.

Paper that unfolds

The script reads the crane’s sixteen triangles and pairs them with the sixteen wedges of a square: both in order of angle around their centre, with the shift that matches them best, and the corners chosen so that no triangle turns inside out. For each face two corners are the crease and slide from crane to sheet; the third swings round the crease by an angle that rises and falls: seen from the front it moves towards the crease by the cosine of that angle, like paper lifting towards us. The light comes from the normal of the turned face; past ninety degrees the white side shows.

Accordion and tiles

Each strip is its own slice of the card (an orange back, a white front with a use of the logo cut by a clipPath) carried where it is needed by a single matrix: width, height and a vertical slant that alternates from strip to strip, so the edges meet and make the accordion zigzag. Four numbers drive everything: spread (from the square to the size of the logo), pleat (the depth of the fold), flip (the turn, one strip after another) and seam (the crease marks). The flip squeezes the strip by the cosine and, past zero, shows the front.

The clean logo and the rest state

Once the strips are flat, the whole card fades in over them, identical but without seams: the crease marks disappear. The corner that lifts is a cut of the card along a diagonal plus a triangle going from the corner towards its mirror image: past halfway it is the coloured back. The gleam is a band with a white gradient that slides across, clipped by the outline of the card.

Direction and your logo

The whole story is one timeline, with timeScale for the speed and a label for every moment (arrive, land, unfold, sheet, pleat, flip, reveal, flat, rest, leave). The way out uses the same numbers backwards: strips, sheet, crane, then the flight away and a restart from «arrive», with a new swoop. If IMAGE holds an address, the logo is that picture and it is split over the strips in the same way. In the Playground, next to the field, there is a button to upload a file from your computer, which goes into the code as a data: address.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'Wrenfold'`	The logo as a word: it is printed on the white side of the paper and split over the strips.
`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	`8`	How many strips the sheet folds into, like an accordion: each one flips on its own.
`FOLD`	script.js	`0.7`	How deep the accordion folds are: 0 flat, 1 almost shut.
`FLIGHT`	script.js	`1`	How much the crane swoops on its way in: 0 is a straight glide.
`CRANE`	script.js	`1.5`	How tall the crane is, in heights of the logo card.
`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 still before it turns back into a crane.
`LOOP`	script.js	`true`	Whether the logo turns back into a crane, flies away and the entrance starts again. With false it stays, with the gleam and the lifting corner.

Try them in the Playground

When to use it

To present a logo gently and with a touch of wonder: the opening of a stationer’s, a design studio’s or a craft brand’s site, a preview for a client, a loading screen, a social post. It works with a written wordmark and with a picture.

On phones

The same animation, with the sizes adapted: the card takes almost the whole width, the crane is a little bigger and starts low enough not to leave the screen. A tap restarts it.

With reduced motion

Nothing moves: the perched crane fades in, then the square sheet with its creases takes its place, then the logo on its card. If the animation starts again, the way out is a fade too.

Pitfalls

Strips side by side let thin lines of the background through where they touch (antialiasing): while they make the square a whole sheet sits beneath them, and in the end the whole card fades in over the seams.
A clipPath with userSpaceOnUse follows the transform of the element using it: put on the sliding gleam band, it slid along with it and the gleam never showed. It goes on a still group holding the band.
Pairing the crane’s and the sheet’s corners at random turned half the triangles inside out: the corners are chosen among the permutations that keep the triangle’s winding (the sign of its area).
With every face starting almost together the crane turned into a cloud of shards: the delays per part (head, neck and tail, wings, body) are short and each face has a long window, so the paper holds together.
A white gleam on almost white paper cannot be seen: the white side is a warm ivory and the gleam is nearly opaque.
With a long name the card is low and the crane, sized on it, became tiny: it has a minimum size tied to the screen.
The crane starting high on the left went past the top edge with its wings on a phone: the start takes its height and the swoop into account.

Libraries

GSAP 3.15.0, Manrope (font variabile) 5.3.0.

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

Testing

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