Case study · Astro · Data storytelling

A glacier report, set in melting type.

GLAMOS - Glacier Monitoring in Switzerland, run jointly by ETH Zurich and the Universities of Fribourg and Zurich - documents how the country's glaciers change and shares its data openly. Schmelzpunkt - German for melting point - takes one piece of it, the real-time mass balance for 2026, and presents it as one calm report that's easy to follow: in German, French and Italian, as Switzerland reads, plus English. No photos, no illustrations. Only type, colour and motion, and 404 dots, one for every glacier in the national estimate. Explore the live site (opens in a new tab)

What the scroll does

Scrolling the report moves you through the hydrological year, from October to September. The readout at the bottom shows the national balance on that day, and the big words and numbers take it as their weight: the year's highest value is weight 900, its lowest 200. Drag the slider to try it.

2026 2010–2020 average

Day: 1 October
Balance, m w.e.: 0.00
Font weight: 690

Live, not a recording The live site's opening, ported from its own code and running in your browser: the title drips in and melts, then its full stop grows in and waits for you to scroll. Beside it, what scrolling does on the rest of the page.

The challenge

A research result, read to the end.

Among the data GLAMOS shares openly is a real-time mass balance of the current year. I wanted to take that true, exact data and present it in a way that's easy to understand and easy to follow - with three materials only, type, colour and motion, and without a single photo of melting ice. Every figure stays exactly what GLAMOS published; only the way it's shown changes. And because it's a Swiss story, it had to be written in German, French and Italian, as well as English.

What I made

A report, a signature and a data pipeline.

Art direction

Three materials and nothing else: type, colour and motion. A restrained palette, with red for 2026 and blue-grey for the 2010–2020 average, so the comparison reads at a glance.

Type that carries the data

Scrolling moves through the hydrological year, and the big words and numbers get bolder or lighter with the glaciers' balance on that day.

404 dots, one per glacier

With motion on, one canvas of 404 dots re-forms into the report's charts - a grid, four river basins, the season curve and thirteen monitoring sites.

Data read from the source

The numbers are taken directly from the drawing data inside GLAMOS's real-time mass balance PDF, so they're exact rather than estimated - and the build fails if the data stops supporting a claim the text makes.

Switzerland's languages

German, French and Italian, plus English. Every figure that comes from the data is filled into the text at build time, written the way each language writes it.

Simple, private, accessible

No cookies, no analytics, no third-party requests - and a complete static report for reduced motion, without JavaScript, or when a browser translates the page.

The centrepiece

404 glaciers, 404 dots.

GLAMOS's national estimate covers 404 glaciers, so the report draws exactly 404 dots. With motion on, they live on one canvas behind the text and make up its charts: they gather from all over the screen into a grid, regroup into the four basins the meltwater drains to, draw the 2026 season in time order, and line up as the deviation bars of the thirteen main monitoring sites. On the last screen, they drain away off the bottom.

Each chart is built from the data itself, so the dots always add up: the four basins together hold all 404 glaciers, and the longer a site's bar, the further that glacier is from an ordinary year. Below is a rebuild of the same idea on the same data - pick a chart and watch the dots rearrange.

One dot per glacier in the national estimate.

The dot that carries the story

Punkt is German for point, dot and full stop. Dot 0 is the title's full stop, and the scroll carries it from screen to screen. Some of its stops:

It grows in from a single pixel once the letters have landed, and pulses - impatient to get going.
It stretches into the minus sign of the year's loss.
It marks 2026 in the ranking, one row above 2022.
It lands on 26 September, the last measured day on the curve.
It's the tip of Findelen's bar, the site furthest from its own normal.
And it ends as the decimal point of 0.00, when the count starts again on 1 October.

Data: GLAMOS – Glacier Monitoring Switzerland, real-time mass balance, snapshot 26.09.2026, preliminary.

The approach

Designing with numbers

The tone was sober: the numbers carry the drama, the words stay dry. Every animation had to be simple enough to follow at a glance, and most of them are readings of the data.

One key per screen

Each screen opens with a single word or number set full-screen - typed in, or counted up from zero - which then docks into its place in the layout as you scroll. One idea at a time, like turning the pages of a printed report.

Letters that melt

The title drips in from above the screen. Falling letters shed drops, and once they land, beads of melt swell under their feet and fall away. Drops only form where a letter truly touches its baseline - found by drawing each glyph off-screen and reading its pixels.

One dot, carried through

The title's full stop is the one element the scroll carries from screen to screen. It becomes a minus sign, a marker, a point on a curve and finally a decimal point - so the whole story reads as one continuous line.

Colour that stays readable

Red marks 2026 and blue-grey the 2010–2020 average, in a light and a dark theme, with every colour checked for contrast. Colour is never the only cue: the 2026 line is solid, the average dashed, and both are labelled directly on the chart.

Under the hood

Every number traceable

Presenting data simply only works if the data stays exact. Every figure on the page comes from one GLAMOS snapshot, and the code makes sure it stays that way.

Exact values from the PDF

The real-time mass balance comes as one PDF, and its charts are vector graphics, so every line in them is stored as exact coordinates. A Python script reads those coordinates, turns them into values using each chart's own axes, and writes everything into one JSON file. If the PDF's layout ever changes, the script stops with an error rather than guess.

Figures filled in, never typed

Every figure that comes from the data is a placeholder in the text. The build fills it in per language through the standard Intl number and date formats, with a true minus sign - and a misspelt placeholder stops the build instead of going live.

A build that checks the story

Some claims are made in words: “second worst since 2010”, “all four basins end below the range”. On every build a check compares them with the data, and fails the moment the data stops supporting one of them.

Two fonts, cut to size

Mona Sans and Martian Mono, both variable and open-licensed, self-hosted and subset to the characters four languages need: under 150 KB for everything, with the weight axis kept whole for the signature.

Motion that steps aside

One scroll loop drives everything and only redraws when something has changed. With reduced motion or without JavaScript the page is a complete static report, the season chart comes with a data table and the rankings are real lists for screen readers, and when a browser translates the page, the motion hands over to the static layout so the new words can flow.

Private by construction

No cookies, no analytics, nothing loaded from anyone else. The Content Security Policy lets scripts run only from the site's own files, plus two small inline scripts for the colour scheme, each allowed by its exact fingerprint, taken at build time. With no cookies and no tracking, there's nothing to consent to.

Switzerland's languages

Four languages, one set of numbers.

A public report in Switzerland should meet people in their own language, so Schmelzpunkt is written in German, French and Italian, plus English. Each is a text of its own, with the headlines and quotation marks of its language. What the four share is the data: every figure from GLAMOS is a placeholder in the text, filled in when the site is built and written the way each language writes numbers and dates. Correct a value in the data, and all four versions change together - they can never disagree.

Language

In the text · copy/en.json

  "number.big": "{endSigned} m"
 "number.title": "About {ice} metres of ice in one year."
 "season.steps[1]": "Then the melt began. On {zeroDate} the balance turned negative, {earlierDays} days earlier than average."

From the data

{endSigned}: −2.4national balance on 26 September
{ice}: 2.7the same loss, in metres of ice
{zeroDate}: 4 Julyfirst day below zero
{earlierDays}: 33days ahead of the 2010–2020 average

On the page As of 26.09.2026 · preliminary data MELTING POINT. −2.4 m About 2.7 metres of ice in one year. Then the melt began. On 4 July the balance turned negative, 33 days earlier than average.

Results

100

Lighthouse performance on desktop - 99 on mobile

0.4 s

Largest Contentful Paint, desktop

0 ms

Total Blocking Time, desktop

0

Third-party requests, cookies or trackers

Measured with Google Lighthouse on the live site (opens in a new tab). Accessibility and Best Practices scored 100 on desktop and mobile; on mobile, Largest Contentful Paint was 2.0 s and layout shift 0.007.

The concept

A self-initiated piece on how a research result can be published for everyone: one page, three materials, simple motion with a reason for every movement, and every figure traceable to its source.

Independent project, not affiliated with GLAMOS · Data: GLAMOS – Glacier Monitoring Switzerland, snapshot 26.09.2026, preliminary.

Swap glaciers for an annual report or a research result, and the same approach holds: the data in one checked file, a text in every language your readers need, and pages that present the findings plainly enough to be read to the end.

Have findings worth sharing?

Let's turn your data into a report people finish.

An annual report, a research result, a study with one number at its heart - tell me what it should make people understand, and I'll build the page that does it, in German, French, Italian or English.

Start a project See more work Explore the live site