The Year of Greta

A year in someone's life is usually told on the web as a timeline that scrolls from top to bottom. This site replaces the timeline with a space a visitor can walk around, with Greta herself at the centre. The site describes itself as an illustrated timeline of how Greta Thunberg rose from a solo campaigner to the leader of a global movement in 2019. She was 16 that year and addressed world leaders at Davos in January. In September she made an emotional call for action at a UN climate session, and in December Time magazine named her Person of the Year. Each of these moments has its own card on the site.

The loading screen shows a letter g drawn only in outline, a counter running from 0 to 100 and the line Change is coming, whether you like it or not. Once loading finishes, the middle of the screen asks whether the visitor would like to turn on sound for a more immersive experience. Only after about thirteen seconds does the statue emerge from the fog, with a short introduction and an Explore button in the bottom left corner.

Clicking Explore fades out the introduction and the large title, and the word Drag rises in big serif letters in the middle of the screen. After a few seconds it shrinks into a small line reading Drag or scroll to explore, which tells the visitor they can either drag or scroll to move on. A thin line from JAN to DEC across the top of the page shows which month the visitor has reached, and the abbreviation of that month sits in large serif letters at the bottom centre. The year holds 28 cards in all, one video for every month plus 16 news cards. January's video card reads Our house is on fire. A news card in March reports her nomination for the Nobel Peace Prize, one in July says she released a song with the British band The 1975, and one in December says Time named her Person of the Year.

Behind every card is real reporting or real footage. When a visitor clicks a news card, the browser opens a new tab with the original article, from outlets such as The Guardian, the BBC, Time, The Verge and Deutsche Welle. When a visitor clicks a video card, a dark green layer covers the screen and plays a clip from that month, such as June's 25-second video, an interview in which she talks about children taking part in climate activism. After December the last screen is a short closing statement followed by a Read More button, which opens an article by Conservation International about the facts of climate change.

The picture in The Year of Greta is built from the colours of three things, the dark green fog, the pure white statue and the green-tinted black and white photographs. The background is a greyish deep green, a little lighter in the middle and darker towards the edges. The statue is a matte white all over, like a plaster cast, and only the rock under its feet keeps the dark grey texture of real stone. The news photographs are grey until touched and look as though they sit behind a green filter, so the whole picture seems to be mixed from a single colour.

The makers turned a 16-year-old girl into a monument. She wears a hoodie and tracksuit trousers, keeps both hands in her pockets and looks up into the distance while standing on a dark rock. Real photographs appear only on the cards around her, and the figure at the centre of the picture is always this colourless statue, so every piece of news the visitor passes circles around it.

The large words Greta Thunberg on the home page, the Explore button, the month at the bottom and the counter during loading all use US Blaak, a display serif with very heavy strokes. On the home page the two large words are only a shade darker than the background and sit in front of the fog but behind the statue, so the statue hides a few of the letters. That layering is built on purpose, because the page stacks two drawing canvases, with the fog drawn on the lower one and the statue on the upper one, and the page's text sits between them. The small text for the introduction, the social links and the month labels at the top uses Brown, a geometric sans serif, while the headlines on the cards are set in a serif like the months.

The cards themselves are not lined up either, since they vary in size, height and distance. Some sit close to the camera, others lean at an angle far away in the fog, and a few are slightly curved like a sheet of paper bent by the wind. The card headlines are set in white serif letters that often reach past the left edge of the photograph and lie over the fog.

The main movement on the site is the camera circling the statue. When a visitor scrolls the wheel or holds and drags, the camera moves forward along a circle, and about two notches of the wheel move on by one month. At each month the camera stops at a new angle, that month's cards drift out of the fog into view, and the previous month's cards fall behind. In January the camera faces her, by June it has moved behind her, and by December it has come round to her side. Circling the statue through the whole year averages 60 frames per second, and frames slower than 32 milliseconds make up only 0.3 percent. A visitor who has turned on the reduced motion setting in the operating system sees the same rotation as everyone else, because the site makes no adjustment for that setting.

When the cursor moves onto a card, the card changes from green-tinted grey back to its original colour, and the cursor turns into a hand at the same moment. In the whole field of fog only the card under the cursor is in colour, so a visitor can see at a glance which one they have picked.

The Year of Greta draws its 3D picture with the three.js 3D library and runs its animation on the GSAP animation library. The page is organised with Backbone.js, a fairly old front-end framework, and the background music plays through the Howler.js audio library. Opening the home page downloads about 12.7 MB, and the largest single file is the model of the statue at about 4.3 MB. The second largest is an environment light image of about 1.4 MB, which produces the soft light and shade on the statue's surface. It is a panoramic image that records light from every direction around a point, and the 3D scene uses it to light objects. The two texture images for the rock come to about 2.5 MB together, and the cover images for all 28 cards, about 2.9 MB, are downloaded the moment a visitor arrives.

The largest pieces, the videos and the music, are only downloaded when a visitor asks for them. The twelve videos come to about 40 MB together, and each one loads only when its card is clicked. The background music is about 2.8 MB and starts downloading only after the visitor agrees to turn the sound on, so no one who has not chosen sound is startled by sudden music.

Greta's statue takes more than ten seconds to appear, even though the page starts drawing almost at once. The server returns the first byte in 0.02 to 0.03 seconds, far inside the 0.8 seconds Google recommends. The browser draws its first content (first contentful paint, FCP) after 0.32 to 0.5 seconds, faster than the suggested 1.8 seconds. At that point, however, the screen shows only the name in the top left corner and the loading g, and the statue does not appear until about thirteen seconds in. Loading includes four or five long tasks, pieces of script that each hold the browser for more than 50 milliseconds so the page cannot respond. Together they add up to about 0.8 seconds, and the longest lasts about 0.6 seconds. Layout shift (CLS) is 0, so nothing on the page jumps.

The lower canvas that holds the fog is drawn at twice the width and twice the height of the screen, so on a full HD screen it paints four times as many pixels as the screen has. The upper canvas with the statue and the cards is drawn at the screen's own size. The lower canvas therefore paints four times as many pixels every frame, yet the fog is a soft gradient whose extra detail the eye can barely see.

The site leaves almost no route for visitors who use only a keyboard or a screen reader. All 28 cards are drawn inside the canvas, so the keyboard cannot reach any of them, and the arrow keys, the page keys and the space bar do not change the month either. Pressing Tab moves focus only through the sound button, three social links, the name in the top left corner and Explore, and then onto the Read More link at the end, which has not yet appeared. The style sheet removes the browser's default focus outline from these links and buttons. The page has no top-level heading, and a screen reader finds only the introduction and the names of a few buttons.

The jury's highest mark for The Year of Greta went to Creativity at 8.46, and arranging a year of news around a statue that the visitor can circle is very likely the reason. Awwwards scores four categories in all, the other three being design, usability and content, each out of 10. It scored lowest on Usability at 7.39, and the fact that months can only be found by scrolling or dragging, with no way to change them from the keyboard, may be part of the reason. The site was later also named Awwwards Site of the Month for February.

The developer panel gave The Year of Greta 6.96, just short of the 7 needed for the developer award. Of the five categories, Animations was highest at 8.60 and Accessibility lowest at only 6.00, which matches the cards that the keyboard cannot reach in the engineering chapter.

Eleven days before Awwwards, on February 15, the FWA gave the site 82 points from 24 votes. It filed the site in three categories covering education, resources and community, and other work. The team's description on the FWA is a single sentence calling it a passion project that traces Greta Thunberg's rise in 2019 from a solo campaigner to the leader of a global movement.

Superhero Cheesecake is a regular winner on both Awwwards and the FWA, with 35 Awwwards Sites of the Day and 68 FWA awards to date. Its only Awwwards Site of the Month is this site, and the work listed on its profile also includes websites for the fashion brands Viktor&Rolf and Gucci. Colorbleed is credited only on the FWA, and nothing there says which part of the project it handled.