Arthur Engel Portfolio

Arthur Engel is a freelance senior creative developer who specialises in interactive WebGL and WebGPU experiences for agencies and brands. His portfolio has to prove to those clients that he can deliver a complete 3D story. So instead of a page listing projects, he wrote a story in four acts, jungle and gateway, projects, about and contact, all driven by scrolling. His description on FWA calls it a fully immersive WebGPU experience with scroll-driven navigation, plus a lite version for mobile devices.

Before entering, the visitor waits a moment at a loading gate. The gate is a dark grey grid with a huge AENGEL and CREATIVE DEVELOPER at the top left. At the lower right sits a spec card that looks like product packaging, with a black-and-white leaf, VARIANT 01, ARCH //, PORTFOLIO, MADE IN EARTH and a barcode beside a counter that runs from 0 to 100. The counter takes about 10 seconds to fill, after which the visitor presses ENTER IN THE EXPERIENCE to go in, and a LITE VERSION switch at the lower left leads into the lite version instead.

Once the visitor is inside, the jungle scene lasts about one screen of scrolling. As the visitor scrolls, the stones of the arch burst apart and scatter through the air, then gather again into a ring, each stone lighting up with blue runic lines. A vortex spins open in the middle of the ring and grows until it fills the whole screen and turns into white light, and during this stretch even the navigation at the top of the page hides itself.

Once the camera passes through the white light, the visitor arrives at the projects scene. A dark faceted crystal stands in front of a mountain range made of points of light, glowing at its centre, with its reflection on the ground below. The project name and DISCOVER PROJECT sit at the lower left, 01 / 06 and NEXT PROJECT at the lower right, and a line of small text in the middle says Drag to switch project. The six projects are CGTrader, W3R.ONE, PRESTI.AI, Grandir, Reaali and Stream of value, and dragging or clicking NEXT PROJECT switches between them while the crystal changes colour, blue for CGTrader and purple for W3R.ONE. Clicking DISCOVER PROJECT opens a full case study. It gives a one-line pitch, the year, a project description, a live link, a demo film, his role and the technologies used, and ends with a section he wrote himself called TECHNICAL CONSTRAINTS, about the hardest part of the project.

The about scene begins with a few threads of blue light in the dark. The threads weave back and forth. Lines of small text appear one after another below them, saying in essence that the code he writes tells a story, that beauty comes from simple rules, and that every experience he builds begins with something real he noticed. The threads finally gather into a glowing stem that blooms into a lily at its tip, and the large words I RENDER THE UNSEEN appear beside it with his bio. Thin lines run out from the flower to labels reading FREELANCER, flower.glb, computed stem, from france and based in thailand, along with a pair of coordinates and a clock. Scrolling further changes the headline to I RENDER THE NOISE and turns the whole flower blue.

The last scene of the journey is contact. A hand reaches from the lower left into warm light coming from the upper right, with REACH OUT and his email address at the lower right and GitHub, X and LinkedIn icons below. The whole journey runs about 32 screens, and a few entry points stay at the top of the page throughout. The logo sits at the top left, and at the top right there are a sound switch, a red dot with the availability status UNAVAILABLE until Oct, a copy-email button and a three-dot menu button.

The rule of the site is a single light source in a field of darkness. The jungle scene has only one dim yellow shaft slanting down from the upper right, and the gateway scene is lit by the blue glow of the runes and the vortex themselves. The projects scene has only the glowing core of the crystal, the about scene is the cold white of the flower and stem, and the contact scene is a single warm yellow beam. Each scene has essentially one colour of light, so the frame always stays dark and clean and the visitor's eye always lands on whatever is lit.

The scenes differ widely in how realistic they look. The opening jungle is the most realistic, with texture and shadow on the arch's stones, the vines, the ferns and the shaft of light. Things grow more abstract from there, with mountains made of points of light in the projects scene and only threads of light and a translucent flower in the about scene. The contact scene then returns to a hand with the texture of real skin. That rise and fall matches the journey itself, starting from a real place, passing through the gateway into his work and finally reaching back into the real world to find him.

Arthur Engel's site uses only two typefaces, and headlines are set in League Spartan, a heavy geometric sans-serif, all in capitals, including AENGEL, CGTRADER, I RENDER THE UNSEEN and REACH OUT. Small interface text, captions and the bio use Manrope at very small sizes. Headlines always sit near the edge of the frame, at the lower left, the middle left or the lower right, so they never compete with the subject in the centre.

The loading gate and the about scene both use details that look like an instrument's interface. The spec card on the gate has a barcode, a model number, a grid and a small logo, like the packaging of a product. In the about scene the thin labelled lines treat the flower like a specimen under measurement. Each line leads to a small label naming the model file, his nationality and where he lives, and the clock and coordinates at the bottom pointing to southern Thailand. These two places give a fantasy story a touch of an engineer's cool.

The journey is driven by scrolling, and it moves one scene at a time. As the visitor scrolls the wheel, the camera travels along a fixed path, and once the scroll passes the boundary of a scene the page glides on its own to the start of the next one. With the keyboard, a few presses of the arrow keys, Page Down or the space bar take the visitor from the jungle to the start of the projects scene. Smooth scrolling is handled by Lenis, and the whole journey from top to bottom holds 60 frames per second, with no frame slower than 24 milliseconds.

The transformation at the start is the most elaborate stretch of the site. The stones of the arch first burst outward, hang and turn in the air, then gather around a circle, and each stone lights up with blue lines the moment the ring is complete. The vortex spins out of the centre of the ring, dark blue at first, growing larger and whiter as it turns. The camera pushes in, the whole screen is swallowed by white light, and the valley of projects fades up out of the white.

The motion in the projects scene is much lighter. When the visitor drags, the crystal takes on another colour and the content reflected inside it changes too. When the visitor opens a case study, the page rises out of a smoky pattern of caustic light, like looking up from underwater.

The light-thread animation in the about scene is the most hand-drawn-looking part of the site. A few blue threads slowly weave together and apart in the dark while the camera eases forward and the captions fade in and out one line at a time. The threads finally gather into a stem that blooms into a flower at its tip. Once the flower has opened, a rectangular frame covers part of it, and the petals inside the frame show blue while the rest stays a translucent white.

Sound is the other half of the journey. As soon as the visitor enters, ambient sound starts playing, with different ambient beds for different parts of the journey, and the site ships twenty-eight audio files in all. The sound switch at the top right mutes it at any time.

Arthur Engel built the site with Next.js and React. It draws its 3D picture with three.js's WebGPU renderer on a single full-screen canvas, and hands scrolling to Lenis. WebGPU is a newer graphics interface in the browser than WebGL and talks to the graphics card more directly. Textures use KTX2, a compressed format the graphics card can read directly, models are glTF, and sound uses the very compact Opus format.

The site puts almost all of its downloading before the gate. During those 10 seconds at the gate, the browser has already downloaded 31.5 MB, 18.1 MB of it textures. The largest are a 7.1 MB environment lighting map and a 4.9 MB rock normal map, a texture used to paint bumps onto flat surfaces. Besides the textures, five project films take 8.5 MB, twenty-eight audio files 2.1 MB and eleven models 1.6 MB before the visitor can enter. After entering, the whole journey adds only about 2 MB of images, for a total of about 33.6 MB. The result is that the visitor hardly waits once inside, but has to watch the counter fill at the gate first.

The gate itself does not appear quickly, since the server takes 620 milliseconds to return its first byte, close to Google's 0.8 second guideline, and the first contentful paint (FCP) comes at 0.98 seconds with the large letters AENGEL. Loading includes eight long tasks totalling 1.3 seconds, the longest 415 milliseconds. Nothing on the page shifts position from the gate through entering.

The lite version is a separate path through the site. When the visitor turns on LITE VERSION at the lower left of the gate and then enters, they see a curved film strip carrying screenshots of the projects. Scrolling slides the strip along, and it is also drawn on a canvas, but it has no jungle, no gateway and no flower. The FWA description states that this lite version is meant for mobile devices.

Keyboard users can also complete the whole journey from gate to contact. On the gate, Tab selects LITE VERSION first and then the enter button, with a clearly visible focus ring, and Enter goes in. The site splits the visible text of the enter button into separate letters for its animation, but gives the button a complete name, Enter the experience, that screen readers can announce. After entering, Tab moves through the home logo, the sound switch, the copy-email button, the menu, DISCOVER PROJECT and NEXT PROJECT, and the arrow keys and Page Down move forward scene by scene. The style sheets contain 20 rules for the reduce motion setting, covering small interface animations such as the scroll hint, the drag hint and the email arrow.

The site scored 83 points on FWA from 24 votes and was filed under Animation, Experimental and Personal/Portfolio. The team's description is a single sentence calling it a fully immersive WebGPU experience with scroll-driven navigation and a lite version for mobile devices. The immersive experience, the scroll-driven navigation and the lite version can all be found on the site.

This site is the first FWA award for Arthur Engel. On his FWA profile he describes his work as bridging the gap between ambitious design and production-grade engineering, turning complex creative visions into fluid, optimised results. On FWA this site is credited to him alone.