The gift-box logo

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

A logo intro that arrives as a present: the gift drops and bounces, the bow comes undone and the ribbon flies off with real physics, the paper tears along a zigzag and swings open, the lid pops off spinning and the logo springs out on a concertina among strips of tissue paper. 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 gift-box logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/baloo-2@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, wraps the gift, drops it, unties it and lets the logo spring out -->
    <svg class="palco" data-stage role="img" aria-label="Boxbloom" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the room: lighter in the middle -->
        <radialGradient id="room" cx="0.5" cy="0.42" r="0.75">
          <stop offset="0" class="stanza-luce" />
          <stop offset="1" class="stanza" />
        </radialGradient>
        <!-- the wrapping paper: wide stripes and a thin pale line, at a slant -->
        <pattern id="wrap" patternUnits="userSpaceOnUse" width="40" height="40" patternTransform="rotate(35)" data-wrap>
          <rect class="carta" width="40" height="40" data-wrap-base />
          <rect class="carta-riga" width="17" height="40" data-wrap-band />
          <rect class="carta-filo" x="26" width="3" height="40" data-wrap-line />
        </pattern>
        <!-- the soft shadow on the floor -->
        <radialGradient id="shade">
          <stop offset="0" class="ombra" stop-opacity="0.32" />
          <stop offset="1" class="ombra" stop-opacity="0" />
        </radialGradient>
        <!-- each half of the paper only shows its own side of the tear -->
        <clipPath id="clip-left" clipPathUnits="userSpaceOnUse"><path data-clip-left /></clipPath>
        <clipPath id="clip-right" clipPathUnits="userSpaceOnUse"><path data-clip-right /></clipPath>
      </defs>

      <rect fill="url(#room)" data-room />
      <rect class="pavimento" data-floor />
      <ellipse fill="url(#shade)" data-shadow />

      <!-- things lying on the floor behind the box -->
      <g data-back></g>

      <!-- the gift: the box, the logo inside it, the lid, the paper -->
      <g data-gift>
        <g data-inside></g>
        <g data-pop>
          <g data-spring></g>
          <g data-logo-holder><g data-logo></g></g>
        </g>
        <g data-body></g>
        <g data-lid></g>
      </g>
      <!-- the wrapping paper: two halves that tear apart, swing open and fall flat on the floor -->
      <g data-paper></g>

      <!-- the ribbon and its bow, then the tissue paper over everything -->
      <g data-ribbon></g>
      <g data-fly></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.

36 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 gift-box logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

In a peach-coloured room, a present drops from above, wrapped in striped teal paper with a golden ribbon and a bow. It stretches as it falls, squashes as it lands, makes two smaller and smaller bounces and the bow shakes at every hit. Then someone pulls one end of the ribbon: after a tug, the right loop tightens and slips through the knot, then the left one, and the end lifts upwards. The ribbon slides up the front of the gift, over the lid and flies off, twists in the air and falls back on the floor in front of the box in loose curls, its ends cut in a swallowtail. Something inside pushes: the gift swells and the paper tears along a zigzag, from top to bottom, showing the white edge of the tear. The two halves swing open to the sides like two doors, turning to show the pale back of the paper, and fall flat on the floor. Underneath there is a coral box seen three quarters on, its side in shade, with a lid: it shivers, the lid knocks twice from inside, the box squashes and the lid pops off, spinning off the screen. Out of the box comes the logo of a made-up brand, Boxbloom, standing on a golden tray on top of a paper concertina spring that comes out of the dark inside of the box: an elastic boing carries it up, it sways left and right, the letters bounce starting from the middle. Dozens of strips of pink, mint, lilac, yellow and white tissue paper burst out with it, twirl as they fall and settle on the floor or on the rim of the box. The box does a happy little dance, then the logo stays there, bobbing gently on its spring. After a few seconds the logo sinks back into the box, the box vanishes with a hop and a new gift drops, with the strips and the flight of the lid a little different every time. A click restarts it. A picture can take the place of the word: it pops out of the box the same way.

How it works

One size

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. Everything is counted in box widths: the lid is 1.1 times as wide, the paper covers the lid and the box, the ribbon is a tenth. The letters are measured on a canvas in the same typeface (measureText, actualBoundingBoxAscent for the true height) and their size is chosen so that the logo, the spring and the box fit one above the other with some air at the top; on a tall screen the box is wider.

The ribbon, worked out in advance

The ribbon is a chain of 36 points with Verlet integration: each step the points move on with their velocity, gravity pulls them down and eighteen rounds of constraints put every link back to its length (plus a soft one between a point and the one after next, because a ribbon does not fold flat on itself). The points still lying against the gift can only move up; the end is pulled by an invisible hand along an ever faster arc and then let go; the floor has friction and the box is a rectangle the points are pushed out of. The whole simulation runs in build, at 240 steps a second, and stores a frame every sixtieth: the timeline only animates the time and the drawing picks the right frame, so it can be paused, rewound and skipped.

The paper that tears

The paper is two halves sharing a zigzag edge down the middle. Each half is a path drawn again every frame: the zigzag points move apart only above the front of the tear, which runs from top to bottom, and a pale line shows the torn paper. The stripes are a pattern cut out by a clipPath of the same shape. To open, each half gets a matrix that squeezes it around its outer edge by the cosine of the angle (with a touch of slant for perspective): when the cosine turns negative, the back shows. To fall flat, the same matrix squashes it towards the floor.

The spring and the boing

The concertina spring is ten bands, wide and narrow in turn, light and dark, between the bottom of the box and the logo's cap: when it stretches the folds open, when it squashes they close. Its height runs on elastic.out, the top's sideways shift on a series of dying swings, and the bands follow it by the square of their height, so the spring bends. The logo stands on the cap, turns with the top and stretches and squashes with a keyframe for every bounce; the letters rise one after the other from the middle.

Direction and your logo

The whole intro is one timeline, with the labels start, arrive, land, untie, ribbon, tear, open, knock, pop, happy, rest and timeScale for the speed. The tissue strips are S-shaped paths: they rise with power2.out, fall with sine.in, spin and show their edge with scaleX back and forth, and settle on the rim of the box or on the floor, squashing a little. If IMAGE holds an address, the picture pops out in place of the letters; 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	`'Boxbloom'`	The logo as a word: it pops out of the box on the spring, its letters bouncing from the middle.
`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.
`BOUNCE`	script.js	`1`	How springy everything is: the gift's bounces, the squash, the spring's boing and how much it sways (0 = a dead landing).
`SPRING`	script.js	`1`	How tall the spring stands with the logo on top: 0.6 short, 1.5 tall (the logo gets smaller to fit).
`TISSUE`	script.js	`40`	How many strips of tissue paper fly out of the box (0 = none).
`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 a new gift arrives.
`LOOP`	script.js	`true`	Whether the logo sinks back and a new gift drops. With false the logo stays out, bobbing on its spring.

Try them in the Playground

When to use it

To present a logo as a surprise: the opening of a gift shop's site, a bakery, a children's brand or a party, a launch, a greetings page, 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: on a tall screen the box is wider and the logo is almost as wide as the screen; the halves of the paper open only as far as the screen allows and the ribbon bounces off the edges and settles in front of the box. A tap restarts it.

With reduced motion

Nothing moves: the wrapped gift fades in, then fades into the open box with the logo standing on its spring and the tissue strips already lying down. If the animation starts again, everything fades away.

Pitfalls

A physics simulation run every frame with requestAnimationFrame cannot be paused or rewound together with the timeline: the ribbon is worked out in advance and the timeline only animates the time the frame is read from.
The ribbon, squashed on the floor, folded on itself in tight knots: a second constraint between a point and the one after next, pushing only when they are too close, keeps it in loose curls.
The paper's zigzag showed before the tear, like a seam: the outline of each half only draws the outer edge, and the tear is a separate line that grows with stroke-dasharray as the front runs down.
A logo three times as wide as the box cannot hide inside the box before it jumps: it hides scaled to zero on the spring's cap and grows with back.out as it rises.
Seek with suppressEvents also skips onUpdate: when the timeline is stopped at a moment, the drawing has to be called by hand, or it stays as it was.
The gift, the ribbon and the paper share the same bounces while they are tied, then they do not: the ribbon let go and the paper on the floor must not dance with the happy box, so the gift's transform is applied to them only before they come away.
The logo, standing on a narrow cap, seemed to float as soon as it swayed: now it stands on a tray almost as wide as the logo, the foot of the letters on the tray, and tray and letters turn together.
A box seen only from the front, with its top drawn as a trapezoid, did not read as open: it is drawn three quarters on with an oblique projection (front, side shifted up and right, top rim with its thickness, dark inside and inner walls cut out by a clipPath), and the whole box is shifted left by half its depth so that the opening sits in the middle.
The ribbon ended in a straight cut and on a phone it fell off the screen: its ends have a swallowtail drawn apart, outlined on the sides only, and in the simulation the ribbon falls on the floor in front of the box and bounces off the edges of the screen.

Libraries

GSAP 3.15.0, Baloo 2 (font variabile) 5.3.0.

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

Testing

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