KPR

KPR released a set of ten thousand digital collectibles, each Keeper assembled from more than four hundred hand-painted assets. Resn's Awwwards Site of the Month article says they were asked to build an online home for KPR, a living world with a rich story where the collectibles let visitors take part in the narrative. The article adds that the site also had to establish KPR as a credible brand in Web3. The team drew on futuristic posters and manga layouts, and treated every collectible as a portal into the world.

The site's home page reads like an art book that first sets the scene, then shows the characters and finally takes the reader around the world. The first section is the project itself, describing a familiar world set on a different path, followed by two screens of sky telling visitors that they are Keepers with power who must choose to protect or destroy. The second section introduces the ten thousand collectibles with a huge 10K and a row of character cards fanned out like a hand of playing cards. The next three sections each carry one large illustration, in turn the Keep where all knowledge is stored, the two factions, and the world after the discovery of the energy source Kai. The home page ends with a huge KEEPERS asking visitors which path they will take, and the footer closes with a huge KPR logo.

The depth of the story sits in a second layer behind the hold. While visitors scroll, the three large illustrations carry only a line or two of text. Only when visitors hold the mouse down on the Factions and World illustrations do they see that section's lore, such as the two factions' slogans, scans of characters and everyday objects from this world. The team's article says this layer offers glimpses of New Eden's geography, factions and lifestyle. The main path can therefore keep the pace of an art book, and visitors who want more go and hold.

The navigation at the top of the KPR page jumps straight to the project, the Keep, the factions and the world. The menu at the top left leads to pages such as Story, Protocol, Journal, Media, Gallery and About, with links to Twitter, Discord and the OpenSea marketplace at its bottom. SIGN IN at the top right opens a sign-in window titled Welcome back Keeper, where visitors can sign in with email or a Google account.

The picture of KPR switches between two moods. The project, collection and closing sections sit on white or a pale lavender (#968ADF), with heavy black headlines, short paragraphs and a few illustration cards in generous white space, like a loosely laid-out art book. The Keep, Factions and World sections let the illustration fill the whole screen, mostly in purple, pink and teal under a dusk-like light. The team's article says they emphasised the grid, white space and bold type for a clean, futuristic look.

The most visible rule on the site is the shape of its cards. KPR puts almost every illustration in a rounded card with a step on one edge like a folder tab, or with one corner cut off at an angle. The SIGN IN button at the top right, the sign-in window and the scanner frames that appear on hold use the same steps and cut corners, so the whole site looks like different windows of one interface. These are also exactly the cards the large illustrations shrink into during their handovers.

KPR's text uses three typefaces, each with its own job. Headlines use ABC Whyte Plus, and the team's article says this face has an adjustable width and an ink trap setting, small notches cut where strokes meet, which make large type more distinctive and sit well with the logo. Headline tracking is set very tight, from minus 0.02 to minus 0.1 of the letter width in the styles, with line spacing only 0.85 times the type size, so the lines pack together solidly. Navigation, numbers and notes use the monospaced IBM Plex Mono, all in capitals, with numbers such as 01K and 02P that read like labels in a terminal. The huge words KEEPERS and KPR use a separate, very blocky face, Hexaframe, which matches the brand logo.

The whole KPR layout scales in proportion to the screen width. The site sets the root font size to 0.625% of the screen width, between 6.4 and 12 pixels, and almost every size in the layout is written relative to it. The three large lines on the home page are therefore 212 pixels on a screen 1920 pixels wide, 151 pixels at 1366, and 91 pixels on a tablet, always in the same proportion. On phones the root size switches to 2.667% of the screen width, the large lines are 56 pixels, and body text is actually a little larger than on a tablet for easier reading.

The second layer behind the hold switches to a scanner interface. The illustration darkens, a huge 2 FACTIONS or THE WORLD runs vertically on the left, and several scanner frames with cut corners appear, labelled in small monospaced text such as ANIMUS CHARACTER SCAN, with triangular reticles, coordinates and readings. Over the large illustrations, the cursor is hidden and replaced by a thin ring reading HOLD with a small arrow on each side.

On phones, KPR arranges the layout in one column. The header holds the KPR logo, the menu button and SIGN IN with its cut corner. The headlines, illustration cards and text stack down the page, the fan of character cards narrows to one screen width, and the large illustrations still hand over as card shapes. The prompt under each large illustration changes from the desktop hold to TAP & HOLD, keeping a finger on the screen.

The opening of KPR turns the brand logo into an animation. When the site opens, the screen is white, a LOADING line follows the percentage, and a string of archive-like paths scrolls beside it. Then the huge KPR logo assembles itself out of a field of vertical stripes, its letter edges bleeding and merging like ink, until it settles into clean black letterforms. A window then opens inside the logo to show the opening character, growing until the character fills the screen and the three large lines appear, about 8.5 seconds in all.

Scrolling on the KPR home page carries a slight lag, so after the visitor stops, the page glides on a little and settles within a second. When the visitor jumps to a section from the top navigation, the page scrolls there by itself, taking longer the farther it goes, about three seconds for a jump of ten screens, starting fast and slowing down before it arrives. Each section's text arrives with the scroll, each line rising from slightly below while fading in, the lines staggered a little and settling fast at first and then slowly. As the section nears its end, the text fades out upward line by line. When the cursor moves over a large illustration, the 3D camera turns a very small angle around the centre of the picture to follow it, and the layers of the illustration shift against each other to create a little depth.

After the lines about being a Keeper, the page changes scene with a pixel-glitch transition. The picture breaks into rows of black and white blocks and dashes around a white crosshair in the middle, and the next section's silhouettes emerge from the glitch. The small monospaced text in the navigation, buttons, menu and footer shares the same glitchy feel and decodes letter by letter as it appears. Two random letters flicker ahead of each real one at about 0.04 seconds per letter, while phones show the plain line at once. Moving the cursor over menu items and buttons also plays a short blip.

The handover between the three large illustrations is the main motion on the site. As the visitor scrolls down, the Keep illustration first shrinks into a purple-toned card and slides up off screen with its tab, tilting slightly as if turning in space. The Factions illustration rises from the bottom of the screen as another card, growing until it fills the whole picture. The illustrations themselves are not still either, as the light on the characters, the energy in their hands and the beams in the sky all loop.

The second layer behind the hold has a rhythm of its own, and the moment the visitor presses the mouse, the interface shell folds away and the large word on the left builds letter by letter. The picture brightens and pushes in one step within half a second, then keeps pushing in slowly over 8 seconds, with a 2-second flicker on top. Once the scanner frames appear, the objects in them keep cycling as long as the visitor holds, statues, vials, gloves and glasses in the Factions layer, and houses, drinks, coins and noodle boxes in the World layer. While holding, the camera's turn with the cursor shrinks to almost nothing, so the picture stands nearly still. When the visitor lets go, the exposure falls back within 1 second, the push-in returns within 0.8 seconds, and the picture is back to the original illustration. On phones, a finger has to stay down for about 0.05 seconds before the second layer opens, so it does not get confused with a swipe.

KPR's sound starts after the visitor's first click, each illustration has its own music over a steady bed of wind, and a button at the lower left turns the sound off. Each track plays an opening and then loops, fading in over five seconds, and when the visitor scrolls on to the next section, the old track fades out and stops while a transition sound plays in between. The wind rises and falls with scroll progress. When the visitor holds to open the second layer, the music drops to 70 percent volume within 0.2 seconds and comes back over one second after release.

Scrolling through the whole page holds the picture at about 60 frames per second. When the hold opens the second layer, it drops to about 43 frames per second and returns to 60 as soon as the visitor lets go.

KPR is built with Nuxt, its content comes from Storyblok, and scrolling is handled by GSAP's ScrollSmoother. The content sits in a fixed smooth-wrapper that moves as a whole with the smoothed scroll position, touch scrolling on phones is smoothed the same way, and ScrollTrigger ties each section's animation to scroll progress. A three.js r150 WebGL2 canvas covers the page, and most illustration image elements are themselves transparent. The illustrations visitors see are drawn by the canvas at those elements' positions, which is how the cards can tilt, scale and hand over in space.

Another scene showing through a card relies on the stencil buffer. The team's article says they used the stencil buffer to mask one 3D scene inside another, for every window, card flip and second-layer window. The site draws in two passes, the first writing only the shape of the card or window into the stencil buffer without drawing any colour, and the second drawing the other scene only where the stencil value equals 1. The team writes that this also improves performance, since pixels outside the mask are discarded and hidden scenes are never rendered.

The moment when a large illustration shrinks into a card and hands over is drawn in the canvas too. The illustration is first rendered into an offscreen texture, and each card is a plane cut to its card shape by a mask that takes its own piece of that texture. Every card has its own start point, end point and scale curve, with progress counted in screens of scroll. The cards only fly toward the camera in the second half of each screen, so they move out of step with each other. The positions of page elements are measured only when the window is resized and then derived from the scroll position every frame, which keeps the illustrations in the canvas aligned with the text on the page. The 3D camera has a field of view of only about 23 degrees, like a long lens, so the layers of an illustration shift only slightly as the camera turns and the picture never distorts the way a wide angle would.

In the code, KPR calls the large illustrations of the Keep, the Factions and the World tableaux. Each tableau is a layered glTF scene with the layers of the illustration set out at different depths in 3D, so any camera movement creates parallax. Sprite-sheet animations playing at 25 frames per second are layered into each scene, looping the light on the characters, the energy in their hands and the beams in the sky, along with light-ray and sky-glow effects. The scene files sit in an etc1s folder with textures in ETC1S-compressed KTX2, prepared in three tiers by device, 2048 pixels for desktop, 1024 for tablets and a mobile-fallback version for phones that drops even the sprite-sheet animations.

The opening logo and the second layer combine off-the-shelf animation tools with clever code. The team's article says the logo's gradient reveal was made in After Effects by stacking frames at different opacities, with the code reading a colour value and picking the matching frame. The bleeding, merging effect around the logo uses a sprite sheet with signed distance fields. The second layer's sequences and layouts were exported with After Effects' Quick Exporter and then animated in WebGL and HTML, with the scanner frames positioning and scaling themselves to the layout, using only CSS transforms to keep performance high. The logos and scans turning inside the frames are 19 muted, looping webm clips. Sound plays through Howler from 20 mp3 files.

KPR's download size differs a great deal by device. On desktop, the home page downloads about 49 MB at once behind the loading screen, of which glTF scenes are about 20.7 MB, KTX2 textures about 15 MB and sound about 7.5 MB. Scrolling to the bottom loads another terrain video of about 8.9 MB, which brings the total to about 60 MB. Tablets download about 44 MB and phones only about 23 MB. Phone and tablet canvases render at a pixel ratio of 1.5, desktop at 1. The sign-in window is a separate React component whose script alone is about 1.9 MB, and it downloads with the home page.

The server takes 1.5 to 1.7 seconds to start returning the page, the first content appears at 2.0 to 2.1 seconds as the loading screen, and the home page character is fully in place only at about 8.5 seconds. Measuring tools report a large layout shift, caused by the footer moving once at about 2.4 seconds while the loading screen still covers the whole page, so visitors never see it. During loading, the page freezes for at most about 0.1 seconds. The drop to 43 frames per second on hold is most likely because the second layer plays several webm clips and moves the scanner frames with CSS transforms while the illustration keeps rendering.

The site's text is real web text, so screen readers can read the headlines and body, but none of the illustrations has a text description, and the menu and sound buttons have no names. The Tab key only cycles through the top navigation, the menu button and the sound button and never reaches the body. Page Down and the down arrow key scroll the page, but the space bar does nothing. The site does not read the operating system's reduced-motion setting, so the card handovers and illustration animations play as usual.

KPR is the Awwwards Site of the Year for 2022, chosen by the jury from the year's twelve Sites of the Month plus a few Sites of the Day picked by the team. On FWA it won FWA of the Day and FWA of the Month for January 2023. FWA gave it 85 points and filed it under art, illustration and exhibition, NFT and metaverse.

Among the four Awwwards scores, KPR's Creativity was highest at 8.43, possibly thanks to the illustration cards handing over as visitors scroll and the hold that switches to a scanner view. Usability was lowest at 7.47, and the wait of eight or nine seconds to load and a keyboard that cannot reach the body may both have pulled it down. The five developer jurors gave 7.61, with Animations highest at 9.60 and Accessibility lowest at 6.00, which matches the keyboard not reaching the body and the illustrations lacking text descriptions in the Engineering section.

Resn is the only credit for KPR on both platforms, and the site's design, animation and development all come from this agency. As of this report, Resn has won 62 Sites of the Day and 2 Sites of the Year on Awwwards and 146 FWA awards, and its 2 Sites of the Year are this site and Corn Revolutionized from 2020.