Overview

D:ual Space is a creative arts log, film archive, interactive playground, and vibe coding sandbox, built as a single real-time WebGL site. It operates at the intersection of rigid digital systems and fluid organic art, exploring dual states: structure and dissolution, revelation and impermanence. The whole interface is rendered in a strict one bit black and white language, a live 3D object dithered in the browser and driven entirely by scroll and motion.

The Dynamic Delimiter

The core identifier uses a flexible delimiter that adapts to the creative state. The single character carries three dimensions:

• D:ual Space, production, the core identity and final presentations
• D*ual Space, vibe coding, ephemeral generative sketches and late night shaders
• D/ual Space, dissolution and film, cinematography and non linear narrative

Switching dimensions flips the delimiter with a spring, retunes the renderer, and rewrites the on screen schematic copy, so the brand mark itself becomes the navigation.

Visual System

Black and White, No Compromise

The entire site lives in three values: black, white, and the ordered dither in between. There is no flat color anywhere. Where color does appear, it is never painted on, it is the by product of the signal tearing apart. This restraint is the point: in a feed of gradients and glass, a true one bit field reads as a deliberate, technical voice.

Technical Annotations

Borrowing the language of 3D viewports and target tracking, the layout is built from bounding boxes, corner nodes, and coordinate readouts. Small detection frames float around the 3D object and report live x and y screen coordinates, projected from points anchored in the model, so the labels track the form as it rotates, drifts, and scales.

WebGL Rendering

Dither Engine

A Three.js scene renders a loaded 3D model into an EffectComposer post process chain. A custom GLSL pass converts the lit frame to luminance, applies a recursive Bayer 8x8 ordered dither, and thresholds to one bit. A luminance floor keeps empty space solid black, so the texture reads as a figure rather than wallpaper.

Per Section Looks

Rather than one effect everywhere, each section owns a distinct slicing system that the renderer tweens between as you scroll:

• Negative split, a moving inversion line cuts the frame, the object crosses from white field into black
• Sliced totem, the form is broken into standing vertical strips that drift and reassemble
• Scanline shear, horizontal bands offset behind the giant closing type

RGB Glitch

Color is rationed to motion. On fast scroll, dimension switches, and a faint film mode floor, rectangular blocks displace and the red, green, and blue channels sample apart, so chromatic aberration only bleeds at the torn edges. At rest the channels realign and the picture returns to clean black and white.

Interaction and Motion

Lenis drives an inertia smooth scroll, retimed through the GSAP ticker, so the page glides rather than jumps. ScrollTrigger binds each section to its look, reveals content, and parallaxes the closing type. Scroll velocity feeds the glitch and the strip displacement, fast motion tears the frame, stillness heals it. A pointer parallax nudges the camera and the object, and all type uses difference blending so it stays legible across any field inversion.

Stack and Credits

• Rendering, Three.js, custom GLSL Bayer dither post process
• Motion, GSAP, ScrollTrigger, Lenis smooth scroll
• Delivery, static site on Cloudflare Pages global edge
• 3D asset, Abstract Loop by Guzdek Adam, CC BY