Legends of Web Design: A Technical Breakdown of Unseen Studio’s Work

Key Features

Unseen makes extensive use of WebGL for large-scale 3D and visual effects, interactive mouse-based interactions (such as liquid-like deformations), and smooth transitions powered by post-processing (fluid, distortion, etc.). Optimization techniques are also applied, including texture management and reducing the number of draw calls. Projects often feature custom shader effects for both images and interface elements.

Immersive Experience

The studio is defined by its narrative approach—storytelling, mini-games (quizzes, etc.), and carefully crafted audio, from ambient soundscapes to the synchronization of sounds with 3D scene objects. Together, these elements create a strong sense of immersion.

Drawbacks

One drawback is the high GPU load: projects can cause devices (such as the MacBook Air M2) to heat up noticeably. In addition, metrics like PageSpeed are not always optimal. However, the priority is placed on emotion, engagement, and delivering a unique experience.

WebGL as a Core Technology

WebGL is at the heart of all studio projects, powering vivid and interactive experiences. It can take the form of 3D interfaces (such as sliders or image grids in CLOU and Cosmos) as well as fully immersive 3D worlds (like RSPCA and Blue Marine).

Studio Handwriting

• Organic, fluid animations
• Use of reflections and reflective surface simulations
• Active post-processing (god rays, fluid, distortion, etc.)
• Particles as a core element of the visual style
• Extensive use of custom shaders

Transitions Inside Canvas

Smooth scene transitions are a signature technique of the studio. Each scene is rendered into a separate render target, and a fragment shader is applied on the final screen to blend textures and introduce masks or distortions. This creates a sense of fluidity and depth (e.g., Fluid Pass, Distortion, Dissolve).

This approach enables seamless context switching without abrupt jumps. Examples include Unseen websites and Blue Yard.

WebGL Effects for Mouse Movement

Liquid-like effects with noise and cursor trails are used in almost all projects. They range from realistic PBR-based interactions (e.g., Symphony—raycasting for “pressing” Terrene) to stylized low-poly scenes (e.g., Klook).

Most often, these effects are implemented through post-processing on a full-screen quad (distortion + noise + accumulation).

Optimization

Main approaches:

• Removing invisible faces
• Baked animation
• Using light textures (matcaps, baked)
• LOD — simplified models at a distance
• Optimizing draw calls (batching, WebGL multi-draw)

For more details, see the Symphony of Vines analysis.

Smoothness and Custom Scroll

The smoothness of animations is achieved in part by damping camera motion.

Custom scroll libraries (e.g., Lenis, ASScroll) allow synchronization of scrolling with the stage and animations, creating a unified user experience.

Work with Images

Images are integrated into WebGL scenes and processed with shaders, applying distortion, noise-based displacement, color correction, and other effects.

3D UI Elements

Interface elements (cards, buttons, text blocks) are often integrated directly into 3D scenes, interacting with the camera, lighting, and shaders.

Approaches:

• Spatial navigation — integrating UI with scene objects
• Camera reactions — billboarding, displacement, and animation
• Subtle animations — micro-parallax, small adjustments in position, rotation, and scale

In all projects, special attention is given to micro-animations: hover effects, element reactions to scrolling, smooth transitions, and carefully tuned easing and velocity curves. All of this enhances tactility and makes the interface feel “alive.”

1. Universal mouse effects can be easily adapted for different projects.
2. Post-processing enhances the narrative but requires careful performance balancing.
3. Custom scroll implementations ensure a seamless user experience.
4. Optimization is integrated directly into the workflow.
5. The use of Theatre.js (e.g., Symphony of Vines) makes it possible to control complex animation timelines and synchronize 3D, UI, and shaders.

An analysis of Unseen Studio’s projects shows that the team has developed a distinctive signature style, built on a combination of effects, animations, and seamless transitions. Optimization is an integral part of the process: the studio aims to create projects that are as visually striking as possible while keeping system load manageable. Another key feature is the modularity of their solutions—many effects and techniques are designed to be reused across different projects, adapting to specific tasks.