The Why & Inspiration
After a sequence of economic tasks that had been extra sensible than playful, I made a decision to make use of my portfolio website as an area to experiment with new concepts. My targets had been clear: one, it needed to be interactive and include 3D components. Two, it wanted to seize your consideration. Three, it needed to carry out nicely throughout totally different gadgets.
How did the concept for my website come about? On a regular basis moments. In the bathroom, to be actual. My curious 20-month-old barged in once I was utilizing the bathroom sooner or later and gleefully unleashed an extended path of bathroom paper throughout the ground. The scene was chaotic, humorous and oddly pleasant to look at. Because the mess grew, so did the concept: this sort of playful, nearly mischievous, interplay with an object could possibly be reimagined as a digital expertise.
In fact, bathroom paper wasn’t fairly the fitting match for the aesthetic, so the concept pivoted to duct tape. Duct tape was cooler and extra in tune with the power the challenge wanted. With the idea locked in, the method moved to sketching, designing and coding.
Design Rules
With duct tape unraveling throughout the display, issues might simply really feel chaotic and visually heavy. To steadiness that power, the interface was stored deliberately easy and clear. The objective was to let the visuals take heart stage whereas giving customers loads of white area to wander and play.
There’s additionally a layer of interplay woven into the expertise. Animations reply to person actions, creating a way of motion and interactivity. Hidden touches, like the choice to rewind, orbit round components, or a blinking dot that alerts unseen tasks.
Hitting spacebar rewinds the roll in order that it may well draw a brand new path once more.
Hitting the tab key unlocks an orbit view, permitting the scene to be explored from totally different angles.
Constructing the Expertise
Constructing an immersive, interactive portfolio is one factor. Making it carry out easily throughout gadgets is one other. Almost 70% of the trouble went into refining the expertise and squeezing out each drop of efficiency. The result’s a website that feels playful on the floor, however below the hood, it’s powered by a sequence of programs constructed to maintain issues quick, responsive, and accessible.
01. Actual-time path drawing
The core magic lies in real-time path drawing. Mouse or contact actions are captured and projected into 3D area by raycasting. Factors are smoothed with Catmull-Rom curves to create flowing paths that really feel pure as they unfold. Geometry is generated on the fly, giving every person a novel drawing that may be rewound, replayed, or explored from totally different angles.
02. BVH raycasting
To maintain these interactions quick, BVH raycasting steps in. As an alternative of testing each triangle in a scene, the system checks bigger bounding bins first, decreasing hundreds of calculations to only a few. Usually reserved for sport engines, this optimization brings complicated geometry into the browser at easy 60fps.
// First, we make our geometry "good" by including BVH acceleration
useEffect(() => {
if (planeRef.present && !bvhGenerated.present) {
const aircraft = planeRef.present
// Step 1: Create a BVH tree construction for the aircraft
const generator = new StaticGeometryGenerator(aircraft)
const geometry = generator.generate()
// Step 2: Construct the acceleration construction
geometry.boundsTree = new MeshBVH(geometry)
// Step 3: Exchange the previous geometry with the BVH-enabled model
if (aircraft.geometry) {
aircraft.geometry.dispose() // Clear up previous geometry
}
aircraft.geometry = geometry
// Step 4: Allow quick raycasting
aircraft.raycast = acceleratedRaycast
bvhGenerated.present = true
}
}, [])03. LOD + dynamic gadget detection
The system detects the capabilities of every gadget, GPU energy, obtainable reminiscence, even CPU cores, and adapts high quality settings on the fly. Excessive-end machines get the total expertise, whereas cellular gadgets take pleasure in a leaner model that also feels fluid and fascinating.
const [isLowResMode, setIsLowResMode] = useState(false)
const [isVeryLowResMode, setIsVeryLowResMode] = useState(false)
// Detect low-end gadgets and allow low-res mode
useEffect(() => {
const detectLowEndDevice = () => {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.check(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.check(navigator.userAgent) && !/(RTX|GTX|Radeon RX)/i.check(navigator.userAgent)
const canvas = doc.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) Intel HD 4000
}
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. Preserve-alive body system + throttled geometry updates
To ensures easy efficiency with out draining batteries or overloading CPUs. Frames render solely when wanted, then maintain a gentle rhythm after interplay to maintain all the pieces responsive. It’s this steadiness between playfulness and precision that makes the location really feel easy for the person.
The Creator
Lax Area is a mix of my title, Lax, and a Area devoted to creativity. It’s each a portfolio and a playground, a hub the place design and code meet in a enjoyable, playful and stress-free method.
Initially from Singapore, I launched into inventive work there earlier than relocating to Japan. My goals had been easy: discover new concepts, study from totally different views and problem previous methods of pondering. Being surrounded by a number of the most inspiring creators from Japan and past has pushed my work additional creatively and technologically.
Design and code kind a part of my toolkit, and mixing them collectively makes it potential to craft experiences that steadiness perform with aesthetics. Each challenge is an opportunity to attempt one thing new, experiment and push the boundaries of digital design.
I’m eager to connecting with different creatives. If one thing at Lax Area piques your curiosity, let’s chat!
