--- title: "Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage" url: https://daily.dev/posts/inside-haoqi-design-letting-dom-and-webgl-share-a-retro-futurist-stage-onvg2vzkk source_url: https://tympanus.net/codrops/2026/08/15/inside-haoqi-design-letting-dom-and-webgl-share-a-retro-futurist-stage type: article source: "Codrops" published: 2026-08-15T13:32:19.696Z updated: 2026-08-15T13:32:51.934Z tags: ["webdev", "game-development", "threejs", "creative-coding", "react-three-fiber"] reading_time: 24 upvotes: 1 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage **[Codrops](https://daily.dev/sources/codrops)** · 24 min read · 1 upvotes · 0 comments ## Summary A design engineer breaks down the technical build of their personal portfolio site, HAOQI.DESIGN, which blends DOM-based layout with WebGL effects in a retro-futurist visual style. Key topics include synchronizing Lenis smooth scroll with Three.js/R3F render loops via a shared ScrollBus, mirroring DOM grid layouts into WebGL meshes for hover-reveal image transitions, building a glass shader with refraction, chromatic dispersion, and Beer-Lambert-inspired tinting for light/dark modes, using instanced meshes with a texture atlas for falling sticker particles, and adding a custom Star 6 lens-flare filter plus dot-matrix/character-scramble effects for cohesive interface feedback. The author notes AI assisted in learning shaders and Three.js but design judgment drove final decisions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does my Three.js WebGL scene lag one frame behind Lenis smooth scroll during fast scrolling? The lag happens when Lenis and React Three Fiber each run their own requestAnimationFrame loop, so if R3F executes first it reads the previous frame's scroll value before Lenis advances. The fix is disabling Lenis's internal raf, calling lenis.raf manually inside R3F's addEffect, and storing the resulting scroll value in a shared snapshot (a ScrollBus) that every useFrame consumer reads, keeping DOM and WebGL on the same frame. _daily.dev surfaces implementation writeups like this for developers debugging scroll-sync timing issues in WebGL builds._ ### How do you keep a WebGL canvas image aligned with a DOM element's position and size when using CSS Grid? Measure the DOM element's rectangle with getBoundingClientRect and pass it into the shader as a uRect uniform (xy origin, zw size), then convert screen UV into card-local coordinates inside the fragment shader. Rectangles are cached and refreshed selectively (every frame near the viewport, every 12 frames when distant) to avoid reading layout on every card each frame, letting CSS Grid freely control columns and gaps. _Developers blending CSS layout with WebGL overlays track techniques like this on daily.dev._ ### How can you fake realistic glass tinting in a WebGL shader without simulating a full light spectrum? Apply pow(tintColor, thickness) as an approximation of the Beer-Lambert transmittance law for light backgrounds, then blend toward a Hard Light composite for dark backgrounds where the physically-based absorption looks too dim. A single uDark uniform interpolates between the two approaches, producing a glass tint that reads correctly in both light and dark themes without a unified physical model. _daily.dev helps shader developers compare practical color-blending tricks like Beer-Lambert-inspired tinting._ ## Similar posts on daily.dev - [WebGL for Designers: Creating Interactive, Shader-Driven Graphics Directly in the Browser](https://daily.dev/posts/webgl-for-designers-creating-interactive-shader-driven-graphics-directly-in-the-browser-tynmq00fd) · Codrops · 4 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#game-development](https://daily.dev/tags/game-development), [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding), [#react-three-fiber](https://daily.dev/tags/react-three-fiber) [View this post on daily.dev](https://daily.dev/posts/inside-haoqi-design-letting-dom-and-webgl-share-a-retro-futurist-stage-onvg2vzkk)