Lax Space: Designing With Duct Tape and Everyday Chaos

The Why & Inspiration

After a series of commercial projects that were more practical than playful, I decided to use my portfolio site as a space to experiment with new ideas. My goals were clear: one, it had to be interactive and contain 3D elements. Two, it needed to capture your attention. Three, it had to perform well across different devices.

How did the idea for my site come about? Everyday moments. In the toilet, to be exact. My curious 20-month-old barged in when I was using the toilet one day and gleefully unleashed a long trail of toilet paper across the floor. The scene was chaotic, funny and oddly delightful to watch. As the mess grew, so did the idea: this kind of playful, almost mischievous, interaction with an object could be reimagined as a digital experience.

Of course, toilet paper wasn’t quite the right fit for the aesthetic, so the idea pivoted to duct tape. Duct tape was cooler and more in tune with the energy the project needed. With the concept locked in, the process moved to sketching, designing and coding.

Design Principles

With duct tape unraveling across the screen, things could easily feel chaotic and visually heavy. To balance that energy, the interface was kept intentionally simple and clean. The goal was to let the visuals take center stage while giving users plenty of white space to wander and play.

There’s also a layer of interaction woven into the experience. Animations respond to user actions, creating a sense of movement and interactivity. Hidden touches, like the option to rewind, orbit around elements, or a blinking dot that signals unseen projects.

Hitting spacebar rewinds the roll so that it can draw a new path again.

Hitting the tab key unlocks an orbit view, allowing the scene to be explored from different angles.

Building the Experience

Building an immersive, interactive portfolio is one thing. Making it perform smoothly across devices is another. Nearly 70% of the effort went into refining the experience and squeezing out every drop of performance. The result is a site that feels playful on the surface, but under the hood, it’s powered by a series of systems built to keep things fast, responsive, and accessible.

01. Real-time path drawing

The core magic lies in real-time path drawing. Mouse or touch movements are captured and projected into 3D space through raycasting. Points are smoothed with Catmull-Rom curves to create flowing paths that feel natural as they unfold. Geometry is generated on the fly, giving each user a unique drawing that can be rewound, replayed, or explored from different angles.

02. BVH raycasting

To keep those interactions fast, BVH raycasting steps in. Instead of testing every triangle in a scene, the system checks larger bounding boxes first, reducing thousands of calculations to just a few. Normally reserved for game engines, this optimization brings complex geometry into the browser at smooth 60fps.

// First, we make our geometry "smart" by adding BVH acceleration
useEffect(() => {
  if (planeRef.current && !bvhGenerated.current) {
    const plane = planeRef.current
    
    // Step 1: Create a BVH tree structure for the plane
    const generator = new StaticGeometryGenerator(plane)
    const geometry = generator.generate()
    
    // Step 2: Build the acceleration structure
    geometry.boundsTree = new MeshBVH(geometry)
    
    // Step 3: Replace the old geometry with the BVH-enabled version
    if (plane.geometry) {
      plane.geometry.dispose() // Clean up old geometry
    }
    plane.geometry = geometry
    
    // Step 4: Enable fast raycasting
    plane.raycast = acceleratedRaycast
    
    bvhGenerated.current = true
  }
}, [])

03. LOD + dynamic device detection

The system detects the capabilities of each device, GPU power, available memory, even CPU cores, and adapts quality settings on the fly. High-end machines get the full experience, while mobile devices enjoy a leaner version that still feels fluid and engaging.

const [isLowResMode, setIsLowResMode] = useState(false)
const [isVeryLowResMode, setIsVeryLowResMode] = useState(false)

// Detect low-end devices and enable low-res mode
useEffect(() => {
  const detectLowEndDevice = () => {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    const isLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 4
    const isLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 4
    const isSlowGPU = /(Intel|AMD|Mali|PowerVR|Adreno)/i.test(navigator.userAgent) && !/(RTX|GTX|Radeon RX)/i.test(navigator.userAgent)

    const canvas = document.createElement('canvas')
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext | null
    let isLowEndGPU = false
    let isVeryLowEndGPU = false

    if (gl) {
      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
      if (debugInfo) {
        const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
        isLowEndGPU = /(Mali-4|Mali-T|PowerVR|Adreno 3|Adreno 4|Intel HD|Intel UHD)/i.test(renderer)
        isVeryLowEndGPU = /(Mali-4|Mali-T6|Mali-T7|PowerVR G6|Adreno 3|Adreno 4|Intel HD 4000|Intel HD 3000|Intel UHD 600)/i.test(renderer)
      }
    }

    const isVeryLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 2
    const isVeryLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 2

    const shouldEnableVeryLowRes = isVeryLowMemory || isVeryLowCores || isVeryLowEndGPU
    
    if (shouldEnableVeryLowRes) {
      setIsVeryLowResMode(true)
      setIsLowResMode(true)
    } else if (isMobile || isLowMemory || isLowCores || isSlowGPU || isLowEndGPU) {
      setIsLowResMode(true)
    }
  }

  detectLowEndDevice()
}, [])

04. Keep-alive frame system + throttled geometry updates

To ensures smooth performance without draining batteries or overloading CPUs. Frames render only when needed, then hold a steady rhythm after interaction to keep everything responsive. It’s this balance between playfulness and precision that makes the site feel effortless for the user.

The Creator

Lax Space is a combination of my name, Lax, and a Space dedicated to creativity. It’s both a portfolio and a playground, a hub where design and code meet in a fun, playful and stress-free way.

Originally from Singapore, I embarked on creative work there before relocating to Japan. My aims were simple: explore new ideas, learn from different perspectives and challenge old ways of thinking. Being surrounded by some of the most inspiring creators from Japan and beyond has pushed my work further creatively and technologically.

Design and code form part of my toolkit, and blending them together makes it possible to craft experiences that balance function with aesthetics. Every project is a chance to try something new, experiment and push the boundaries of digital design.

I am keen to connecting with other creatives. If something at Lax Space piques your interest, let’s chat!

What's Hot