Pioneer - Corn Revolutionized

The site sets out to show growers how many rounds of selection a new Pioneer seed goes through before it reaches the market. Resn's account in the Awwwards Site of the Month article says they wanted to tell how Pioneer develops, tests and brings new corn varieties to market in a simple but engaging way. They therefore laid the story out vertically as one continuous scroll that walks visitors through each step of seed development. The site divides that process into three chapters, science, real-world testing and the result, and each step has only one headline and a short paragraph.

Each step of the story matches a change in the picture, so as visitors read a line, they see that step happen. Chapter one opens with First, a solid foundation, about Pioneer having the most comprehensive corn germplasm library, shown as a glowing DNA strand. Next comes Computers cut down the contenders, where computer simulations weed out most candidates and the strand scatters into a network of teal points of light. Then comes Our breeders dial it in further, where breeders narrow the remaining lines once more and a few seeds fall from the points into a cutaway pot and grow a seedling and roots. Chapter two takes the seedling to the field under the headline We take it to the field, then rises high to view the test plots of Testing, testing and more testing. Chapter three has a single line, saying that fewer than one in ten thousand seeds make it into a Pioneer bag, with only one enlarged corn kernel left in the picture.

The end of the story returns to its beginning. After the three chapters comes a menu page, and when the visitor keeps scrolling, the camera returns to the corn plant of the first scene. The team's article says this infinite loop stands for the cycle of nature, from seed to harvest and back to seed. Seed development is itself a process repeated year after year, so the loop is part of the story's content and more than a technical trick.

Each chapter also hides a layer that only appears when opened, behind a round button with words in it. Chapter one's Explore the library opens the germplasm library, where one seed sits in the middle with several rings of orbits carrying small DNA icons around it, and each scroll turns the orbits one notch. Chapter two's Experience the tests opens a page titled YOUR REGION. YOUR CONDITIONS. with five tests, wind, drought, disease, soil and plant density, and whichever one the visitor picks, the corn plant in the picture takes on that environment while the text beside it explains how Pioneer tests for it and what the numbers showed. Chapter three's See the new class introduces the new 2020 varieties, and dragging an enlarged corn kernel turns through three pages on yield, consistency and the Qrome product line. The main path gives only the conclusions, and visitors who want the data open the layers themselves, so the story itself can stay in short lines.

The Corn Revolutionized menu opens from the top left and lists the three chapters as a table of contents on the left. Four entries on the right cover signing up for news, contacting a local sales manager, legal information and the brand podcast, the same entries that appear on the page at the end of the story.

The picture of Corn Revolutionized looks like a dimly lit product commercial. Most backgrounds are pushed very dark, and light falls only on the single subject in the middle of the screen, a corn plant at the opening, a DNA strand in chapter one, a seedling in chapter two and a corn kernel in chapter three. The dominant colour changes with the content, deep green at the opening, a brownish dark gold for the germplasm library, teal points of light (#12F9B4, #55FFC2) for the computer step, leaf green in the field and an orange-pink sunset sky in the result chapter. The DNA strand in chapter one is a bundle of orange threads (#ED863B), which complements the teal points that follow it on the dark background. The team's article says they pushed for photorealism with convincing depth of field, dynamic lighting and thousands of animated particles, all of which they reached through the shortcuts described in the Engineering section.

Corn Revolutionized sets all its text in two sans-serif typefaces, meaning faces whose strokes end without small finishing details. Headlines use the extra-bold weight of Manifold, a very wide, heavy uppercase face, set on the left of the picture, where two or three lines take up a good part of the screen. Body text, chapter names and buttons use the geometric face Gilroy, with chapter names in its lightest weight, body text in regular and the small button text in bold, all in white. The two faces have clear roles, with the wide heavy type carrying one conclusion and the thin small type adding detail, so each screen reads with only one point of focus.

Almost every screen follows the same layout, with the headline and a short paragraph on the left and the 3D picture on the right, its subject placed just right of centre. A small circle and the current chapter name, such as SCIENCE, REAL WORLD TESTING or RESULT, sit along the right edge to show visitors which chapter they are in. Every entry that can be opened is a round button with two rings, a solid inner ring and a thin arc as the outer ring, with two lines of small bold text in the middle. Once a hidden layer is open, a round close button appears at the top right.

The tests layer places the same corn plant in five different environments, using the environment to explain each test. In the wind test, the whole picture darkens. In the drought test, the leaves stay green while the field behind turns parched yellow and a glare of sunlight fills the top left. In the disease test, the leaves behind turn yellow and wither. In the soil test, a string of glowing dots appears on the stem and leaves, like measuring instruments attached to the plant. The five test icons sit in a row of circles, and the selected one becomes a filled ring with its name below.

Phone visitors have to hold the phone upright, and when it is turned sideways, the whole screen shows only a phone icon and a request to rotate the device to portrait. The portrait layout moves the headline to the lower middle of the picture with the body text below it and enlarges the 3D subject to fill the top half. It also adds a downward arrow button at the lower left, with SCROLL TO DISCOVER still written beside it.

The main motion of Corn Revolutionized is a camera that keeps moving along one route, with the picture transforming continuously between headlines and never cutting. The opening corn plant turns into a DNA strand wound from many thin orange lines, and the strand comes apart into a screen full of connected teal points. A few seeds drop from the points into a pot, the pot grows a seedling and roots, the seedling grows into a corn plant, and the camera rises to view the whole field of test plots. When the visitor scrolls back, the transformation plays in reverse. After the menu page at the end, one more scroll brings the camera back to the opening corn plant.

The camera's progress has stops, and each headline is one stop. Each scroll first gives the camera some velocity, and then the camera is pulled to the next stop and held there, so however fast or slowly visitors scroll, the camera always comes to rest in front of a complete headline. The longer the distance between two stops, the further the same scroll pushes, and the same goes for taller screens, so one scroll reaches the next stop without many scrolls along a long stretch. On phones, the picture follows the finger directly while dragging, and on release the site predicts where the swipe would land from the finger's speed and pulls the picture to the next stop like a spring, crossing at most one stop at a time.

The headlines of Corn Revolutionized also arrive in an unusual way. Each one first draws the white outlines of its letters and only then fills them in. Some headlines contain a word that keeps flickering, its letters breaking into points of light one moment and showing only outlines the next, as with REVOLUTIONIZED at the opening and THE in the germplasm library. The opening corn plant also keeps swaying slowly, turning a few degrees left and right, and the light falls on it from changing angles as it turns.

The three hidden layers each have their own motion. In the germplasm library, each scroll turns the orbits one notch and brings another seed to the centre. In the tests layer, switching to another test changes the light and background around the corn plant. In the new-class layer, dragging the corn kernel flips it in 3D, and on release it turns to the next page of description while the page numbers 1, 2 and 3 below switch along with it. The team's article adds that the top leaf of the seedling in the pot responds to the cursor, which flicks the leaf into a spin when it touches it.

From the corn plant to the trial field, Corn Revolutionized holds the picture at 60 frames per second through the whole transformation, both while the story moves and at rest. The site does not read the operating system's reduced-motion setting, so with it turned on, the transformations and the flickering headlines play as usual.

Corn Revolutionized draws the whole story on one full-screen WebGL canvas with three.js r102, and the document itself does not scroll. Resn's article says the site is built on Jelly, their own Web3D pipeline, a set of tools, templates and processes for combining 3D assets, animation and interactivity, with a lightweight front-end framework based on three.js and GSAP. The 3D assets were made with Blender and the Octane renderer, and the server processes images with GraphicsMagick and ImageMagick.

The lighting of Corn Revolutionized is baked ahead of time, yet it appears to change with the angle. The team's article says they baked lighting and blur into textures in 3D software, rendering one texture from each of four lighting angles. The opening corn plant is made this way, with the site downloading four baked images, top left, top right, bottom left and bottom right, and the shader blending bilinearly between them according to the plant's current angle. The plant turns no more than a dozen or so degrees left and right, so four images cover every look it can have, and the site needs neither real-time lighting nor real-time depth of field. The team writes that the technique works precisely because the rotation is limited.

The thousands of particles in the DNA strand and the network of points use another shortcut to create depth of field. Each particle is a point, and the shader sets its size by its distance from the focal point, drawing it larger the further away it is, so it looks out of focus without any extra blur pass. The team's article says distance also drives each particle's fading and blur, calculated with signed distance fields, before a final post-processing pass adds bloom and noise.

The DNA strand itself is generated in code. The site computes 13 points from a double-helix formula, using a rotating radius, frequency and phase to place each point and crossing the two strands at set positions. A spline then joins the points into a smooth curve that the threads and particles follow. The strand grows and comes apart on screen because only a range of progress along the curve is drawn, so pushing the start and end of that range makes the strand look drawn in or wiped away. The position, rotation, colour, particle size and progress range of the strand, the points of light and the particle streams are all kept in one configuration table, so adjusting a shot only means changing numbers in the table.

The seedling in the pot is an almost flat model made of planes carrying plant textures and rigged with bones. The team's article says the stem and roots grow by scaling the bones up, and the top leaf's interaction relies on an invisible hitbox that gives the bones rotational velocity when the cursor touches it. Textured planes with bones are far lighter than a true plant model, yet they can still grow and sway.

Most of the interface and text are also drawn in WebGL. The team's article says they had run into performance problems when layering DOM animation over WebGL in the past, so this time they moved most of the interface and text into WebGL, writing their own click and hover detection with bounding boxes and hit tests. Headlines use MSDF glyphs, sharp at any size, and the shader uses screen-space derivatives to keep stroke width and edge anti-aliasing consistent on any screen. The headline effect of drawing outlines before filling takes only 3 draw calls, using instanced planes and masking in the fragment shader. The site also draws the text layer into a set of offscreen textures at a fixed pixel ratio of 2. Even on a desktop with a pixel ratio of 1, the text layer's texture is therefore 3840 by 1890, which keeps the edges of the text especially crisp.

Scrolling is controlled by the site's own code. On desktop, wheel input becomes velocity, the velocity moves a position value, and the value snaps to the nearest stop. Each turn of the wheel is boosted 1 to 1.6 times according to the distance to the next stop and 0.9 to 1.3 times according to the screen height, and on Windows the wheel input is amplified a little further. The up and down arrow keys also add velocity to the position value, so the keyboard can move the story too. When the position value reaches the end of the page, the length of the whole page is subtracted and it returns to the start, which is why the story can loop forever.

The sharpness of the 3D scenes depends on the graphics card. The site uses detect-gpu to rate the GPU, and cards rated high enough draw the scenes at up to 2 times the device pixel ratio, while lower-rated cards draw at 1. Phones get a separate low-quality setting, cutting the corn plants in the field scene from a 7 by 9 grid to 5 by 5, using fewer background plants, and running blur at only four tenths. All the 3D assets download at once before the opening, about 14.4 MB of the site's own files, of which 38 KTX compressed textures make up about 10.5 MB and the glTF models with their binary data about 1 MB. The code first checks whether the GPU supports ASTC, S3TC or PVRTC, then downloads the matching set of textures.

The loading screen turns the wait for these 14 MB into part of the brand. As soon as the page opens, the Pioneer logo appears and fills up gradually with the percentage, and the first content appears between 0.4 and 0.6 seconds. The opening corn plant emerges at about 3.5 seconds, and the headline first draws its outlines, filling in only between 4.5 and 6 seconds. During loading the page freezes for at most about 0.3 seconds, and the picture barely jumps. Besides the site's own files, the page also loads about 0.8 MB of consent, tracking and analytics scripts, and the Facebook, Snapchat, Google Analytics and Eloqua scripts download before the visitor makes a choice.

Corn Revolutionized only looks after visitors using a mouse or touch, and screen readers can read almost none of the story. The story's text is drawn only on the canvas, so a screen reader finds nothing beyond the menu and the cookie button. The Tab key cannot open the menu, and only after the menu is opened with the mouse can the keyboard move between its buttons. The up and down arrow keys can move the whole story, though, and Esc closes the germplasm library layer.

Corn Revolutionized is the Awwwards Site of the Year for 2020, chosen by the jury from the year's twelve Sites of the Month plus a few Sites of the Day nominated by the Awwwards team. On FWA it won FWA of the Day and FWA of the Month for June. FWA gave it 88 points and filed it under commercial and corporate, promotional and various and other.

Creativity was Corn Revolutionized's strongest category on Awwwards at 8.68, most likely because one continuously transforming camera move joins the whole development of a seed into a single story. Usability was the weakest at 7.75, and the need to scroll one gesture at a time, the three hidden layers behind round buttons and screen readers finding none of the story may all have pulled that score down. The three developer jurors gave 8.15, with Animations receiving a perfect 10 and Accessibility lowest at 6.67, which matches the screen readers finding no content in the Engineering section.

The two agencies split the work, and Bader Rutter is an agency specialising in agribusiness advertising, while Resn handled creative, 3D and development, and the team's article says Resn has spent 15 years on interactive development and design. Counted up to the time of writing, Resn has 62 Awwwards Sites of the Day, 2 Sites of the Year and 146 FWA awards. Bader Rutter has only this one work on either platform, and every award it holds on Awwwards and FWA comes from Corn Revolutionized.