Lyfar Studio / Lab
Studio experiments
Motion, interaction and browser experiments. A collection of studio adaptations to open, explore and play with.
47 experiments · Demos open in a new tab.
Words in Motion (opens in a new tab)
Nineteen type experiments. A day around Hong Kong, written in motion.
GSAP / character animation / WebGL
Small Editions (opens in a new tab)
Physical CD editions with draggable discs, booklets and nine original synthesized sketches.
CSS 3D / Web Audio
Film Lookbook (opens in a new tab)
Eight ways to uncover Hong Kong film stories through a moving photographic card.
WebGL hover shaders and GSAP
Hong Kong in Motion (opens in a new tab)
Eleven scroll transitions turn local film stills into ink, fabric, type and fragments.
WebGL and canvas scroll transitions
PRO Threads (opens in a new tab)
Interactive pro threads study.
WebGL light typography
One Good Hit (opens in a new tab)
A midnight pumpkin game with timed combos, physical debris and synthesized impact sound.
Three.js / interaction / audio
Hong Kong Water (opens in a new tab)
A procedural ocean with live waves, shoreline foam, underwater light and eight camera presets.
WebGL spectral ocean, caustics and terrain
Night Studio (opens in a new tab)
Stir and smash a procedural pumpkin, release ghosts and explore a night scene.
WebGPU procedural geometry and interactive particles
Sound Room (opens in a new tab)
Play a five-note ceramic instrument, learn 21 studio studies and fill the room with sound and light.
Three.js instrument interaction, Web Audio sampling and song recognition
Motion lab (opens in a new tab)
Explore type, pointer, scroll and WebGL effects. Adjust the controls and compare the motion.
Next.js · GSAP · WebGL
Between Worlds (opens in a new tab)
Fly through an instanced asteroid belt, steer, fire and inspect it from orbit.
Three.js InstancedMesh / flight
Glass (opens in a new tab)
Interactive glass study.
WebGL refraction
Film Journal (opens in a new tab)
Turn through a Hong Kong film journal on paper that bends, rolls and casts shadows.
Three.js page deformation and framework bindings
Someone Is Looking (opens in a new tab)
A procedural iris with live gaze, sculpted lids, lashes and a downloadable portrait.
Procedural textures / Three.js
City Study (opens in a new tab)
Explore a city on foot, by cab, bike or helicopter. Hong Kong films fill the city screens.
WebGPU city simulation and procedural geometry
Fluid interface (opens in a new tab)
Film frames meet WebGL. Switch the effects, explore the sphere gallery and move through the scene.
Next.js · React Three Fiber
Paper studies (opens in a new tab)
DOM paper creasing and three deformable image sheets. Curl, pleat or twist the studio frames.
DOM displacement and WebGL mesh deformation
Ocean (opens in a new tab)
Interactive ocean study.
WebGPU FFT ocean
Studio Screening Room (opens in a new tab)
Pick a seat, look around and watch a Hong Kong film inside an interactive cinema.
Three.js / WebGPU / spatial cinema
A drift of letters (opens in a new tab)
Scroll through outlined letter trails, image portals and a playable eight-step synth.
Scroll typography, vertex deformation and Web Audio
Cyber Web City (opens in a new tab)
Interactive cyber web city study.
WebGPU procedural world
Ink Study (opens in a new tab)
Switch pens, wash away a drawing and reveal a scene made from moving ink strokes.
React Three Fiber hand-drawn sketch shaders
Pixel portfolio (opens in a new tab)
A studio portfolio with scrolling type, pixel reveals and Hong Kong film frames.
Astro · GSAP · Canvas
Life, Held in Amber (opens in a new tab)
Five original prehistoric sculptures with orbit controls and adjustable morphology.
Procedural sculpture / Three.js
Studio collection (opens in a new tab)
Browse film frames, explore the galleries and keep a local shortlist.
Astro · GSAP · WebGL
Procedural Tokyo (opens in a new tab)
Interactive procedural tokyo study.
Interactive 3D
Motion transitions (opens in a new tab)
Twenty-one ways to carry a page from one state to the next.
Astro · GSAP · Three.js
A Slower Kind of World (opens in a new tab)
An underwater school with casting, bite and reel interactions, depth controls and moving caustics.
Instancing / schooling / GLSL
Sakura Fantasy (opens in a new tab)
Interactive sakura fantasy study.
Interactive 3D
Smear / time in motion (opens in a new tab)
A live twelve-second photo and type reel with adjustable motion blur, timeline scrub and raw comparison.
Multi-sample temporal motion blur
Tidewater (opens in a new tab)
Interactive tidewater study.
WebGPU procedural world
Ink Trails (opens in a new tab)
Move through the letters and leave a trail. Change the brush, ink and motion.
Three.js / WebGPU / TSL
Clearwater (opens in a new tab)
Interactive clearwater study.
WebGL caustics
A Small Ocean (opens in a new tab)
A complete glass tank with animated fish, feeding, schools and day or night light.
Three.js / procedural animation
Paper Crumple (VAT) (opens in a new tab)
Interactive paper crumple (vat) study.
Vertex animation textures
Sand Studio (opens in a new tab)
Draw, push and smooth a small patch of sand. Start again whenever you like.
WebGPU / tactile simulation
Elemental Sandbox (opens in a new tab)
Interactive elemental sandbox study.
Interactive 3D
Fluid Pixel Cursor (opens in a new tab)
Interactive fluid pixel cursor study.
Canvas fluid simulation
Reel flux (opens in a new tab)
Pull a curved three-dimensional film strip. Bring a frame forward and play its studio clip.
Curved WebGL photo and video reel
Duo / unfold (opens in a new tab)
Two physical screens share one image. Open the hinge, turn the phones or drop in your own view.
Hinged device geometry and panoramic screen mapping
3D Face Mask with Three.js (opens in a new tab)
Interactive 3d face mask with three.js study.
Face tracking
Liquid lens (opens in a new tab)
Shape a moving lens over studio film frames. Change the preset, the image and the light.
React · WebGL
Unwoven (opens in a new tab)
Interactive unwoven study.
WebGL ribbon geometry
Studio in ASCII (opens in a new tab)
Drag the studio mark through a field of characters. Switch the ink from dark to light.
Three.js / ASCII
Frame Drift (opens in a new tab)
Hold a frame until it dissolves into motion. A live studio scene with dancers and decoder feedback.
WebGL frame feedback, velocity buffers and residual decoding
Footballs in motion (opens in a new tab)
Inspect procedural leather panels, then kick, grab and throw nine footballs through gravity and zero gravity.
Truncated-icosahedron panels and fixed-step sphere physics
Volatile nexus (opens in a new tab)
A glass ring holds a cloud of responsive fragments. Touch, part, gather or pulse the sculpture.
Iridescent glass deformation and instanced particle interaction