The Turn of the Screw

An opera trailer is usually an edited video that the audience watches from start to finish. Opera North is an opera company based in Leeds, England, and in 2020 it was staging Britten's opera The Turn of the Screw, based on the novella of the same name by the American writer Henry James. Instead of cutting a video, this trailer places five pieces of music from the opera inside a 3D scene and lets visitors walk in and listen for themselves. The site's own introduction puts it plainly, saying it combines music recorded with spatial audio techniques and interactive graphics to create an eerie, haunted landscape. It also invites visitors to hover over the figures to hear them up close, or to hear voices coming from behind them.

Visitors are greeted by the publicity poster for the production. A man stands outside a tall window looking in, the sheer white curtains inside are blowing open, two dolls lie on the carpet and a small bicycle leans against the wall. Below the poster the visitor is asked to choose a quality setting for their device. Low uses compressed MP3 audio at about 30 MB and Medium uses standard MP3 at about 45 MB. High uses lossless FLAC audio at about 100 MB and is the largest download. While the trailer loads, four tips replace the buttons. The first recommends wearing headphones, and the second says that moving and dragging the mouse turns the view and changes what the visitor hears as well. The third says that hovering over a figure brings its voice closer, and the fourth says a visitor can sit back and let it play or look for their favourite parts.

Once a quality is chosen, the trailer starts by itself and runs through five chapters in about six minutes and forty seconds. The chapters are called Opening, Dawn, Day, Dusk and Night and move from the prologue to the middle of the night, and each one opens with its name, a line from the libretto and a one-sentence synopsis. The Dawn chapter quotes I have not forgotten your charge of silence, and its synopsis says the governess has not slept and writes at daybreak to the children's uncle that something seems wrong. In the Night chapter, two ghosts call to the two children late at night and draw them nearer and nearer. When all five chapters are over, the screen shows only END and a button to start again.

All six characters of the opera are in the scene, and the cursor lets a visitor pick out the one they want to hear clearly. They are the governess, the housekeeper Mrs Grose, the two children Miles and Flora, and the two ghosts of the former valet and the former governess. While a character is singing, a visitor who moves the cursor onto that character hears the voice change from a reverberant distance to a clear close-up in under half a second. After the cursor leaves, the close voice takes almost five seconds to fade back, so it sounds as though the singer is slowly walking away. In the Day chapter two figures stand side by side, and a cursor placed between them draws both voices closer at once.

Every chapter of The Turn of the Screw has its own time of day, but all of them sit inside the same fog. Opening is a deep teal night, while Dawn switches to a lilac lake in mist with a row of pink trees along the shore. Day is a golden green hillside, Dusk turns into a pinkish violet lake, and Night returns to deep teal with only a small island in the middle of the water. The five colours are far apart, yet the distance always dissolves into fog and the foreground is always scattered with glowing dots, so a new chapter feels like the same place at another hour. The 3D picture fills only a band across the middle of the screen with a black bar above and below, much like a widescreen film in a cinema.

Lusion deliberately made the characters look unlike real people. They are human shapes assembled from many small flat facets, with no facial features and translucent bodies. These figures glow amber in the fog and look like a cast of ghosts. In the Opening chapter the singer is not even a human shape, only a ball of light hanging in the air. The rest of the scene is just as simple, with the chapel, the pier, the hut and the rowing boat all built as sharp-edged geometric shapes and the hillside strewn with small glowing coloured dots. Because nothing looks like a photograph, the picture reads as a dreamlike landscape and the visitor's attention returns to the sound.

The type follows the visual identity of Opera North's season. The title on the opening screen is drawn lettering, with THE TURN and SCREW in very narrow, tall sans serif capitals and the small words OF THE stacked between them, all in a pale lilac. Navigation, buttons and chapter names use the same family of narrow sans serif, Zurich Condensed, always in capitals. The libretto line and the synopsis at the start of each chapter switch to small Georgia italics, which read like a note in an opera house programme.

The timeline along the bottom of the screen also shows how long each chapter is. The five chapter names are not evenly spaced but placed along a thin line according to their length, so the gap between two neighbouring names is the length of the earlier chapter. Night is the longest at about two minutes, so the stretch of line after it is also the longest. To the right of the timeline sit four small icons for pause, skip to the next chapter, mute and full screen.

The three lines in the top left corner open the menu. A black column then appears on the left of the screen with the capitalised words ABOUT, CREDITS and TICKETS and the Opera North logo, while a translucent dark curtain falls over the 3D scene. When a visitor opens About, a production photograph of white curtains fills the middle column, with the title and a synopsis set over it in the same type and colours as the poster.

The visitor does not steer the camera, which moves slowly along a route designed in advance, much like a film camera on a dolly track. When the visitor moves the cursor, the camera turns slightly with it. A visitor who holds the mouse button down and drags can turn to look elsewhere, and after release the camera stays facing the new direction instead of springing back. A visitor who has turned on the reduced motion setting in the operating system sees exactly the same camera movement as everyone else. That setting exists for people who feel unwell when things move on screen, and the site does nothing with it.

The picture moves with the music, because every accent in each vocal line is marked with its exact time in a timetable. At each of those moments the glowing orbs around the singer give a small pulse, and when several characters sing in one chapter, each voice has its own list of accents. A character who is singing slowly brightens and then dims again after stopping, so even a visitor without headphones can tell from the picture who is singing.

Between chapters there is a transition of seven or eight seconds. The picture darkens, the chapter name and its line from the libretto rise into the middle, and then the next chapter's sky, the density of the fog and the strength of the glow change over little by little. These seconds have their own short piece of music, recorded separately from the singing of each chapter.

The movement of the menu curtain is not calculated live. The swaying of the cloth was simulated in advance and the shape of the fabric in every frame was stored in one image, so the web page only has to play those frames back in order. When the menu opens, the curtain unfolds over about a second and a half and then keeps swaying gently back and forth.

Across the full six minutes and more, the picture averages 60 frames per second, and frames slower than 32 milliseconds make up only 0.14 percent. During the half minute when Opening changes to Dawn, the site plays the transition while downloading about 20 MB of new sound, and even this lowest stretch of the whole trailer holds 58.7 frames per second.

The 3D picture is drawn with the three.js 3D library, the animation is handled by the GSAP animation library, and the sound uses the Web Audio interface built into the browser. Each voice is placed in the scene at the position of its character, and the camera acts as the visitor's ears, so the sound comes from whichever side the camera is facing. Lusion bundled all of the code into a single script of about 950 KB, and the models, textures and sound files are stored on Amazon's cloud storage.

Before a visitor clicks a quality button, the page downloads about 3.3 MB, and more than half of that has nothing to do with the trailer. Opera North's website loads a long list of advertising and analytics scripts on this page, including tracking code from Google, Facebook, TikTok and Twitter, which together come to about 1.9 MB, twice the size of the trailer's own script. With High selected, the trailer first downloads about 20 MB and starts playing after about 16 seconds, and playing all five chapters downloads about 116 MB in total, 105 MB of it sound. The 3D models add up to only 3.6 MB, and the models of all six characters together come to just 110 KB. Each chapter's sound only starts downloading in the few seconds when the previous chapter ends and its transition begins, so a visitor never has to wait for everything up front. Playing all five chapters on Low downloads about 25 MB and on Medium about 55 MB, and both take about 20 seconds to start.

The page itself opens quickly, with the server returning the first byte in 0.13 to 0.22 seconds, well inside the 0.8 seconds Google recommends. The browser draws its first content (first contentful paint, FCP) after 0.76 to 1.09 seconds, faster than Google's suggested 1.8 seconds, and what appears is the poster. Loading includes about a dozen 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.9 to 1.2 seconds, and the longest lasts about 0.1 to 0.2 seconds. Layout shift (CLS) is 0, so nothing on the page jumps.

Most of the texture of this night landscape comes from a pass over the whole image after the scene has been drawn, and the three quality levels also differ in the picture. The soft glow, the darkened corners, the low mist hugging the ground and the anti-aliasing that smooths edges are all applied to the full frame in that pass, and each chapter has its own strength of glow and fog. Among the quality levels, High plays lossless FLAC while the other two play MP3, and on those two the reflection on the lake is drawn at only half the resolution.

The trailer can be played from start to finish with the keyboard alone, but it is hard work. On the opening screen it takes 19 presses of Tab before focus reaches the Medium button. The first 18 pass through menu links that are not yet open, footer buttons that have not yet appeared and panel links hidden off the edge of the screen. The quality buttons and the footer buttons look exactly the same with focus as without it, so a keyboard user cannot see where focus is. Screen readers do get one thing right, because the four icon buttons in the footer for pause, next chapter, mute and full screen all have names. Six other images on the page have no alternative text, so a screen reader passes over them as images without content.

The FWA's 85 points came from 38 votes. The trailer sits in three FWA categories, covering animation, art and exhibition, and promotional work. On February 1 the FWA also named it the winner for January. The team's description on the FWA calls it an immersive WebGL experience crafted by Lusion for Opera North, which brought a storytelling audiovisual experience to audiences together with the sound artist James Bulley and AudioLab at the University of York.

Creativity was the trailer's strongest Awwwards category at 8.17, and choosing which singer to hear with the cursor was still rare on the web at the time. 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.12, and having to pick a quality first, wait a dozen seconds or more and then find the figures in the fog without help may all have pulled that score down. On the front-end developer side, the site received 7.03, just over the 7 needed for the developer award. Of the five categories, Animations was highest at 8.67 and Accessibility lowest at only 6.33, which matches the invisible focus described in the engineering chapter.

Half of the credits belong to people who work with sound, which fits a trailer whose whole game is listening. Lusion handled the visuals and the website, recording and spatialisation went to AudioLab at the University of York, and the sound design was done by James Bulley together with AudioLab. The cast list on the site also names the five singers and the orchestra on the recording. Nicholas Watts sings the former valet Peter Quint, Lorna James sings the governess, and Eleanor Dennis sings both Mrs Grose and the former governess Miss Jessel. Ben Hayes and Jennifer Clark sing the two children, accompanied by the Orchestra of Opera North. The award counts in the table are each credit's running total to date.