The archive frost

Loading, Physics, TransitionsCanvas, GSAPAdvancedCompressed weight: Demo 15 KBGSAP 28 KBFreeDownload the zip

Moving a folder to cold storage, made as a pane of glass that frosts over: from the edges of the pane frost ferns with branches at sixty degrees really grow, a little every frame, with a haze and small six armed stars behind them. How much of the glass has frozen is how far the archive has got. At the end a light crosses the ice and it says Archived; Undo fogs the glass and melts the frost from the middle out.

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, viewport-fit=cover">
  <title>The archive frost</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">
    <!-- moving a folder to cold storage, shown as a pane of glass that frosts over: feathers of frost grow in from the
         edges of the pane with side branches at sixty degrees, little six armed stars settle in the haze behind
         them, and how much of the glass has frozen is how far the archive has got. The frost is grown and painted by
         script.js on the canvas; the words and the button are HTML on top of it -->
    <section class="vault" aria-labelledby="vault-title" data-vault>
      <div class="vault__head">
        <div class="vault__words">
          <h2 class="vault__title" id="vault-title"><span class="vault__swap" data-title>2023 client work</span></h2>
          <p class="vault__meta"><span class="vault__swap" data-meta>1,284 files · last opened 14 months ago</span></p>
        </div>
        <svg class="vault__flake" viewBox="0 0 32 32" aria-hidden="true" data-flake>
          <g>
            <path d="M16 3v26M4.74 9.5l22.52 13M4.74 22.5l22.52-13"/>
            <path d="M19.4 4.6L16 8L12.6 4.6M27.57 13.24L22.93 12L24.17 7.36M24.17 24.64L22.93 20L27.57 18.76M12.6 27.4L16 24L19.4 27.4M4.43 18.76L9.07 20L7.83 24.64M7.83 7.36L9.07 12L4.43 13.24"/>
          </g>
        </svg>
      </div>

      <div class="vault__pane" role="progressbar" aria-labelledby="vault-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not archived" data-pane>
        <canvas class="vault__frost" aria-hidden="true" data-frost></canvas>
        <div class="vault__read" aria-hidden="true">
          <p class="vault__big">
            <span class="vault__swap" data-big>38.6 GB</span>
            <svg class="vault__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
          </p>
          <p class="vault__under"><span class="vault__swap" data-under>Standard storage</span></p>
        </div>
      </div>

      <div class="vault__foot">
        <p class="vault__file"><span class="vault__swap" data-file>Ready to move to Cold Storage</span></p>
        <button class="pill" type="button" data-action data-autoclic><span class="pill__label" data-label>Archive</span></button>
      </div>
      <p class="sr" role="status" aria-live="polite" data-live></p>
    </section>
  </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.

38 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 archive frost” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background a steel blue card 380 pixels wide: at the top 2023 client work, 1,284 files · last opened 14 months ago and a drawn snowflake; in the middle a pane of dark glass with a slanting reflection and, large in the centre, 38.6 GB with Standard storage under it; at the bottom Ready to move to Cold Storage and the Archive button. Pressed, the button becomes an outlined Cancel, the snowflake starts turning with a little bounce and the title says Moving to Cold Storage, with the gigabytes moved and the seconds left; in the centre of the glass the percentage, at the bottom the name of the file going past and how many have gone. From the edges of the glass, first from the corners, white frost trunks grow, bending slowly like feathers and putting out side branches at sixty degrees, shorter towards the tip, which put out twigs of their own: on the growing tips small blue cross shaped glints light up. Behind the branches a bluish haze fills the glass in patches, and small six armed ice stars settle in it. The ice moves on with the transfer and the centre, where the figure is, freezes last; the figure always stays readable, with a dark halo. At 100% the last of the glass freezes, the frost turns thick and pale like frosted glass, a band of light crosses it, the figure becomes Archived in dark blue with a tick that draws itself and the button says Undo. Undo fogs everything for a moment, then the frost melts from the middle towards the edges leaving a wet film behind it, and the card is as it was. One time in two, in the demo, at about 60% a file is open in another app: the glass gives a little jolt, the frost stops and turns grey, the title says Couldn't move 1 file in red and the Retry button starts again from where it was. Cancel, pressed by hand, melts the ice made so far.

How it works

An arrival time for every cell

Over the glass lies a grid of 4 pixel cells. Every cell has an arrival value: its distance from the edge of the rounded rectangle (a signed distance) plus a smooth noise at two scales, plus a little in the middle, where the figure is, which so freezes last. The values sorted give the front F for every amount of progress: the share p of the cells lies behind F, so the frozen glass is exactly the progress.

Tips that grow

The crystals are branches with a tip: trunks that start from the edge every 20 to 36 pixels heading inwards, at a slightly random angle. At each step a tip moves on 1.8 pixels only if the cell ahead has an arrival lower than F plus LEAD; otherwise it waits. It dies if it leaves the glass or enters a cell of another grid, of 3 pixels, already taken by another crystal (other than its parent). The trunks bend slowly, the side branches stay straight.

Branches at sixty degrees

Every 2.6 to 5 pixels a branch may put out, with probability BRANCHING, a child at plus or minus sixty degrees from its direction, sometimes two: as long as a share of what is left to its parent, so shorter towards the tip, like a fern. The children's children do the same, down to the third generation. Where the haze has already arrived and nothing is near, stars settle: six branches at sixty degrees from one point.

In pieces, and only what is new

Every tip gets the steps its speed allows (GROWTH pixels a second), but the whole frame has a ceiling of BUDGET milliseconds: when it runs out, the tips left wait for the next one. The new segments are drawn in a single stroke per generation onto a canvas that keeps them; the glass is composed again only if something grew or a glint is alive. The haze is an image of one cell per pixel, enlarged smoothly; the glow is the crystals' canvas shrunk five times and drawn back large in lighter mode.

The light, the thick ice and the thaw

At the end the haze thickens and the words turn dark with a pale halo; a band of light passes in source-atop, so it lights only the ice. The thaw is a second front M that falls from the highest value to the lowest: a mask, one cell per pixel, cuts the crystals in destination-in and the haze, and just behind the edge leaves a pale film that fades, the water.

Values to change

Name	File	Default	What it changes
`SECONDS`	script.js	`6.5`	How long the archive takes in the demo, in seconds (a real one follows its files).
`FILES`	script.js	`1284`	How many files are in the folder.
`SIZE`	script.js	`38.6`	How big the folder is, in gigabytes.
`FAIL_EVERY`	script.js	`2`	In the demo, one archive in how many stops on a file in use (0 never).
`FAIL_AT`	script.js	`0.6`	How far the archive that stops gets, from 0 to 1.
`BRANCHING`	script.js	`0.6`	How readily the crystals put out side branches at sixty degrees: 0.2 sparse, 1 dense.
`LEAD`	script.js	`22`	How far the tips of the crystals run ahead of the haze, in pixels.
`STARS`	script.js	`0.7`	How many six armed stars settle in the haze: 0 none, 1 many.
`HAZE`	script.js	`0.42`	How opaque the frost is between the crystals while it grows.
`GLOW`	script.js	`0.5`	The cold glow round the crystals.
`GLINTS`	script.js	`1`	The glints on the tips while they grow: 0 none, 2 many.
`GROWTH`	script.js	`150`	How fast a tip grows, in pixels a second.
`MELT`	script.js	`1.3`	The seconds the frost takes to melt away.
`BUDGET`	script.js	`4`	The milliseconds a frame may spend growing frost.

Try them in the Playground

When to use it

For moving old files into cold storage (cloud storage, backup, media management, a NAS), for compressing or freezing a project, for confirming an archive in a photo or document app, and in general for progress whose result is something put away in the cold.

On phones

The card takes the width of the screen less 16 pixels a side (358 at 390): the glass is measured again, the grid is rebuilt and the frost, if it was growing, grows back at once to where it was. The button is 44 tall and works by touch; the pill that swells under the pointer is only there with a mouse. A long file name ends in an ellipsis.

With reduced motion

The frost is made all at once, out of sight, and appears with a fade that follows the progress: no growing branches, no glints, no band of light and no jolt in the error. At the end the ice thickens with a fade and the tick appears; Undo and Cancel fade it away. The snowflake does not turn and the words change with a fade.

Pitfalls

The words on the glass had a dark halo that ended in a rectangle: the box of the words that change has overflow: hidden and cut the text-shadow. Inside the glass it has to be visible.
At 100% the last cell had exactly the value of the front, and the haze there stayed half way: at the end the front runs past the last value by a whole soft edge.
On the white glass of the end the glow of the crystals made pale blotches: when the ice thickens the glow drops by 65%, and the words go from white with a dark halo to dark blue with a pale halo.
A perfectly horizontal trunk looked like a thick bar: the trunks bend slowly (their base direction takes a small random walk) and thin out over their last 36 pixels.
Turning the SVG snowflake with a CSS transform-origin and GSAP together moved it out of place: GSAP wants svgOrigin: '16 16'.
Cancelling half way, the thaw started from the highest value and for half a second nothing happened: it starts from the current front.
The growth loop added the new branches to the list while running through it: it grows them at once in the same pass, but when the time ceiling runs out the ones left must all be kept for the next frame.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

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

Testing

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