Exploring HAOQI.DESIGN: Blending DOM Complexity with WebGL Spectacle

By Haoqi in Articles on August 15, 2026

At its core, HAOQI.DESIGN is a foray into the artistic dimensions of web development, peeling back the layers of its innovative scroll synchronization, glass shaders, and a harmonious relationship between DOM and WebGL. This portfolio is not just a showcase of Haoqi's work; it's a technological experiment in retro-futurist design language that compels us to reconsider what digital presentation can accomplish.

Haoqi's journey into design began with a childhood fascination sparked by the iconic iMac G3, a device that forever changed how he viewed the digital landscape. Fast forward to today, and that early spark has ignited a career that straddles design systems and engineering. His website serves as both a gallery for his projects and a playground for ideas, reflecting the evolving nature of interaction on the web.

The current iteration of HAOQI.DESIGN took form over three to five months, utilizing insights gained from two years of exploring shaders and Three.js through AI technologies. This time around, Haoqi's goal was clarity over chaos—urging the viewer to engage with a unified experience that showcases his skills rather than a disjointed array of effects. Central to this vision was the challenge of balancing the roles of DOM elements and WebGL content while ensuring their activities remain synchronized during scrolling and interactivity.

Technical Foundations

• Technologies: Next.js + React
• Scroll management: Lenis
• Animation: Motion
• 3D graphics: Three.js / React Three Fiber / Drei
• Visual effects: Custom shaders and post-processing techniques
• 3D modeling: Spline
• UI Design: Figma

Synchronized Interactivity

The site's scroll functionality is traditional in its vertical orientation but engineered thoughtfully so that text and typography reside within the DOM, while a canvas layer manages visual effects created through glass-like graphics. The precedence was to ensure that as users scroll, both the DOM elements and WebGL visualizations respond cohesively, without the frustrating lag often associated with such approaches.

Initially, the implementation used Lenis for the DOM updates in tandem with R3F for rendering the WebGL updates. However, a notable delay arose when users scrolled quickly, resulting in a frustrating one-frame lag in the WebGL animations. The culprit? A separate animation frame loop for each component that often executed out of sync. By consolidating scrolling and rendering into a singular frame loop, the two components harmonized beautifully, creating a seamless user experience.

// scroll_root.tsx
function ScrollShell({ children }: { children: React.ReactNode }) {
    return (
        <ReactLenis options={{ /* ... */, autoRaf: false }}>
            <LenisScrollEnvBridge />
            {children}
        </ReactLenis>
    )
}

After modifications, the R3F calls to update the Lenis instance became aligned, and DOM WebGL visual elements continually displayed current scroll values. The synchronization results in infinite scrolling experiences where graphical and textual elements coexist without conflicting, a technical feat that's more vital than it might seem at first glance.

Pointer Coordination Simplified

Another technical enhancement involved the pointer input system. In earlier builds, each effect would independently process pointer data, complicating the architecture with repetitive conversions and state management. To streamline this, Haoqi created a central PointerBus system, converting browser pointer coordinates into a unified format that was utilized across all features, significantly reducing redundancy in code.

This innovative approach treated the entire site as a seamless interaction space where each hover and click event could trigger effects across both DOM and WebGL without the noise of multiple listeners. It’s a small shift that dramatically improves efficiency and maintainability in the long run.

DOM for Structure, WebGL for Wow-Factor

In the project's layout, traditional web technologies dominate to provide accessibility and responsive design while WebGL steps in to inject excitement without undermining readability. The project list is a case study in balancing functionality and flair; the setup uses transparent placeholders in the DOM where WebGL dynamically embeds visuals, ensuring performance remains smooth and effective.

Haoqi’s method involves caching positioning data to minimize layout recalculations, a smart way to keep the rendering load low while maintaining an eye-catching presentation. The blend between established web practices and modern rendering technologies brings a refreshing aesthetic that remains user-centered.

Moreover, interactions were designed to feel alive—each project card showcases visual transitions that dynamically respond to user actions. The concept of crossfading images gives way to a more intricate display that blends visual information engagingly, allowing hover effects to unfold in a calculated manner that invites exploration.

Next Steps in Visual Development

Looking forward, the interplay between motion and design in HAOQI.DESIGN continues to evolve. Minor adjustments, like the gradual deployment of images as cards enter the viewport, provide delicate detail that enhances user engagement. Furthermore, responsive features such as visible scroll speeds contribute to a visceral connection to the site, making web interactions feel more intuitive and responsive.

Conclusion: A Harmonious Digital Experience

The technical decisions behind HAOQI.DESIGN illustrate a commitment to both aesthetic excellence and functional integrity. By combining established web standards with innovative rendering techniques, Haoqi successfully crafts an experience that captivates users while maintaining robust performance. This project is a testament to what can be achieved when design thinking meets technical prowess, offering a rich canvas for both personal expression and professional accomplishment.

Reflections The journey through this project has illuminated a few crucial insights about the interaction of web technologies and design choices. First off, it became abundantly clear how essential it is to provide reliable scroll and pointer data across both DOM and WebGL before committing to visual effects. CSS manages elements such as structure and accessibility with remarkable ease, yet it’s the integration of WebGL that adds layers of complexity and dynamism—like curl effects or refractive transitions—that pure CSS simply struggles to deliver. A major takeaway is that the effectiveness of a site often hinges more on the coherence of its visual rules rather than the sheer number of effects employed. Throughout the development of this site, ensuring a shared state across different components proved to be more impactful than any standalone animation. When you're in this space, the design intent behind each interaction can sometimes outweigh the individual pieces you aim to showcase. AI played a significant role in my workflow, particularly for testing shader concepts and troubleshooting early on. Still, it’s worth emphasizing that the ultimate design decisions were distinctly human endeavors. If I were to start fresh, defining the mobile performance budget and the shutoff parameters for each visual effect would be a priority early in the process. Post-launch, this venture garnered impressive accolades, including Awwwards' Site of the Day, FWA of the Day, and CSS Design Awards' Website of the Day. While such recognition is gratifying, I take the most pride in the fact that the final product remains true to the initial design vision and the level of craftsmanship I aspired to achieve. As you navigate your own projects, keep these lessons in mind. Prioritize early decisions, focus on coherence across your visual elements, and don’t underestimate the combined power of technology and thoughtful design.