Студия Scheme Engine создала сайт с глубоким 3D-пространством, синхронизирующим WebGL и DOM

Responses by Nkenna Amadi; cofounder, lead creative designer and developer; The Blackpepper Studio. Background: The production company Scheme Engine works across commercial, music, film and live broadcasts, with a roster of directors whose work and individual perspectives are central to the company. The site purposefully creates a digital home that represents Scheme Engine as a culture-first production company, rather than simply functioning as a conventional production portfolio. The primary audience includes agencies, brands, commissioners, producers and other creative industry professionals looking for directors or production partners, while also serving as a platform for anyone discovering Scheme Engine and its work. Design core: Scheme Engine described itself very clearly as a video-first B2B company, so moving image needed to be fundamental to the experience rather than treated as content placed inside a static interface. Wherever possible, imagery lives and moves, whether through video, transitions or subtle interaction. A key objective was to communicate a sense of depth, both in Scheme Engine’s body of work and in the digital experience itself. We explored this quite literally through a third spatial dimension, using the z-axis to position content at varying depths within the interface. Images, typography and moving elements exist across different planes, creating a layered, cinematic environment that encourages users to move through the work rather than simply scroll past it. There is also a deliberate tension between minimalism and maximalism. The interface itself remains relatively clean and legible, but the motion, typography and spatial interactions introduce personality and experimentation. We wanted to avoid both extremes: neither a sterile minimalist portfolio nor an overwhelming collection of effects. Favorite details: Very early in the process, the Scheme Engine team discussed moving beyond the traditional x and y axes of website navigation and exploring the z-axis, creating the feeling that users could travel into the screen and discover content within a larger spatial environment. That thinking ultimately influenced much of the site’s visual and interaction language. We’re proud of how the final homepage weaves copy and mixed media together into a continuous narrative, creating a powerful storytelling experience that unfolds as you move through the site. We are also proud of how consistently motion is integrated throughout the site. A lot of the details are deliberately subtle. The goal was to make the technology disappear into an experience that simply feels fluid and cinematic. Challenges: Balancing visual experimentation, performance and usability. Scheme Engine has a very large catalog of video-based work, and the design called for multiple moving images, transitions and WebGL experiences. It would have been relatively easy to create something visually impressive that became extremely demanding for the browser. A significant part of development involved deciding what should exist within the DOM, what should be rendered through the GPU, when video assets should load, and how animations should behave across different devices and screen sizes. Considerable refinement went into the mathematics, interpolation and interaction behavior behind it so that the final result felt natural rather than mechanical. Alternate paths: We would prototype some of the most technically demanding interactions even earlier in the process, particularly across a wider spectrum of devices.Some interactions changed considerably once we could experience them with real content rather than placeholders. Building a few of those systems alongside the earliest design explorations would allow performance considerations, interaction behavior and visual design to influence each other from the very beginning. New lessons: A lot of the learning came from exploring how far we could combine traditional interfaces with GPU-rendered experiences without making the distinction between them visible to the user. We developed a deeper understanding of managing large collections of moving imagery within interactive WebGL environments, synchronizing those environments with DOM interfaces and building transitions that enable both systems to feel like a single experience. Navigation structure: We deliberately kept the primary navigation extremely simple: Directors, Work, Film & TV, and Contact. Scheme Engine has a large amount of content, so adding complexity to the top-level navigation would have made the experience harder to understand. Instead, the information architecture reflects the main reasons someone would visit the site. Once users enter those sections, the interaction becomes more expressive. Technology: The site combines the Webflow CMS with extensive custom creative development using JavaScript, alongside GSAP, three.js and WebGL. Webflow allows Scheme Engine’s team to continue managing director pages, projects and other editorial content, while the more experimental visual experiences were developed independently through custom JavaScript. three.js and WebGL are used for GPU-rendered imagery and spatial interactions, while GSAP controls much of the animation, timing, scrolling behavior and transitions throughout the site. CSS, HTML and JavaScript form the core front-end technologies, with custom shaders used for some of the more graphics-intensive visual treatments. Special technical features: One of the more interesting technical aspects of the site is the relationship between the WebGL layer and the DOM. Rather than treating them as two separate systems, we built them to remain closely synchronized so that the interface feels like one continuous environment. The Contact page is a good example of this. DOM-based typography and interface elements are coordinated with the WebGL scene, so movement, positioning and transitions happen together across both layers. As the user interacts with the page, the graphics rendered through WebGL respond in sync with the HTML content, making it difficult to distinguish where the conventional interface ends and the 3-D environment begins. That synchronization was important across the wider site. It allowed us to retain the accessibility and flexibility of DOM-based content while using WebGL for more spatial and expressive interactions, without either layer feeling disconnected from the other.