The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The box that folds itself
A logo intro in the minimal style for a made-up packaging studio: seen from above, a box’s flat die-cut draws itself in thin lines, cuts solid and folds dashed; the camera tilts and the board folds itself up, the sides, the front and the back, then the lid with its tuck flap. The dashed folds become edges, the box lands with a small squash and the name is printed on the front in vermilion. Real 3D, all in SVG.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The box that folds itself</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage aria-label="Hatch packaging: a flat die-cut box folds itself up. Click to fold it again.">
<!-- a flat die-cut, cut lines solid and fold lines dashed, folds up into a box and closes; the name is printed on it -->
<svg class="scene" data-scene aria-hidden="true">
<g data-faces></g>
</svg>
<div class="caption" data-caption>
<p class="caption__title" data-title>Ships flat.</p>
<p class="caption__note" data-note>Hatch, packaging studio</p>
</div>
</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.
17 values to change
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 box that folds itself” from Animorio and fit it into my siteWhat it does
On a warm white page, seen straight from above, a box’s die-cut draws itself: a cross of rectangles with the base in the middle, the sides left and right, the front below and, above, the back, the lid and the bevelled tuck flap. The cut lines, thin and black, are traced from the tuck flap down to the front and the panels fill with the light grey of the inside; the fold lines appear dashed. Then the camera tilts and turns a little round the box, and the board folds itself up: first the two sides, which go a hair past upright and come back, then the front and the back; while the back rises the lid already starts to turn, swings over and closes, and its tuck flap slips inside the front. With every fold the dashes close into a solid edge, and the faces that turn towards the light get paler: the lid is the palest, the right side the darkest. The closed box lands with a small squash and a bounce, and the name of the made-up studio, Hatch, is printed on the front in vermilion, lying on the face as if it were really printed. Underneath, the line Ships flat. rises with the studio’s name. After a breath it all opens back up, the camera goes back above and the die-cut rubs itself out; then it all starts again. A click starts it over.
How it works
Panels on hinges
Each panel is a rectangle in its own (a, b) coordinates with a function that puts it in the world: b is the distance from its fold and the fold’s angle turns it (y = d/2 + b·cos α, z = b·sin α for the front). The lid is attached to the edge of the back and adds its angle to the back’s; the tuck flap adds its own to the lid’s. With every angle at a quarter turn the box is closed.
A camera in three lines
The projection is orthographic: a turn round the vertical axis (TURN), then a tilt (TILT). It gives the x and y on screen and a depth; the faces are sorted back to front and filled with the page colour, so they hide what is behind them. Once it is in, the tuck flap is simply put behind the front and under the lid.
Dashed folds that close
Each panel has three paths: the face, its cut edges (solid, with pathLength=1 so they can be drawn) and its fold edges, with stroke-dasharray «3.5 g» where g goes down to zero as the fold reaches 90 degrees. A face showing its inside takes the --inside colour; an outside face gets paler or darker with the product of its normal and a light from the upper left.
The name printed on the face
A flat face seen in an orthographic projection is an affine transform: the name is an SVG text with transform=matrix(a b c d e f), where (a, b) is where one step along the front’s width goes and (c, d) one step down. So the letters lie on the board at its own slant.
Scale, loop and reduced motion
The scale goes from the die-cut’s to the closed box’s, but on every frame it never goes over the one that keeps all the panels inside the stage: the lid standing up in the air never leaves it. It is all one paused timeline that plays again on onComplete; a click starts it over. With reduced motion the closed box, with the name and the line, fades in and stays.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Hatch' | The name printed on the front of the box. |
BOX | script.js | { w: 1.3, d: 0.9, h: 0.72 } | The width, depth and height of the box. |
TILT | script.js | 56 | The degrees the camera tilts down from straight above once the box is up. |
TURN | script.js | 32 | The degrees the camera turns round the box, to show a side. |
FOLD | script.js | 0.75 | The seconds each panel takes to fold up. |
SETTLE | script.js | 1.5 | How far each wall goes past upright before it settles: 0 = it stops dead. |
HOLD | script.js | 2 | The seconds the closed box stays before it unfolds. |
When to use it
As the brand intro of a packaging studio, an online shop or a delivery service; on the «after your order» page while the parcel is being packed; as the picture for a made-to-measure box service or a subscription delivered home.
On phones
The same animation with the sizes adapted: the die-cut fills the height of the screen, the closed box is nearly as wide as the screen and the line sits underneath; the scale never lets a panel leave the screen.
With reduced motion
Nothing moves: the closed box, with the name printed in vermilion and the line underneath, fades in and stays.
Pitfalls
- The closed tuck flap has its middle higher than the front’s, so by average depth it would come in front of the front and show through the box: once it is in, it is put behind the front and under the lid.
- Halfway through the tilt, with the scale halfway between the die-cut’s and the closed box’s, the lid standing in the air went off the screen: on every frame the scale is limited to the one that keeps everything inside.
- The faces all filled in at once before the cuts were drawn, and at the end of the loop a shadow without edges was left behind: each face now appears with its own outline.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.2 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.
