projects

Liza Lubi 
Music 

Official music website of Liza Lubi · artist page
deeper immersiontake a look
about

A minimalist music website, built around the idea of “sound in every button” / where audio, motion, and interaction merge into one immersive experience.

Liza Lubi — screenshot 1
Liza Lubi — screenshot 2
Liza Lubi — screenshot 3
technologies

Main technologies used in the development of this project — Next.js, React, WebGPU, Three.js (TSL), Canvas 2D

project role

Design, UI/UX Development, Frontend Development

Led the full development cycle — from concept and UI/UX design to real-time graphics and interactive audio implementation. Focused on merging sound, motion, and minimalism into a cohesive digital music experience.

challenges and achievement

What I learned through this project:

 High-performance hero scene with WebGPU

The hero section features a particle-based scene powered by WebGPU and custom TSL shaders via Three.js. Heavy calculations are moved to a Web Worker to keep the main thread responsive and ensure smooth animation.

 Audio-driven visual feedback

A real-time audio analyzer built with the Canvas 2D API transforms frequency data into reactive visual elements, strengthening the connection between sound and interface.

 Scroll-based parallax depth

Images use scroll-only parallax effects to create spatial layering and depth while maintaining a clean minimalist layout.

 Extensive CSS animation system

Numerous custom CSS animations enhance typography, transitions, and UI states, creating a refined and visually polished experience.
steps of development

Concept & UI/UX Design

  • Defining artistic direction and interaction philosophy
  • Designing a minimalist, audio-first interface
  • Planning motion, transitions, and visual hierarchy

Real-Time Graphics

  • Building a particle-based hero scene with WebGPU
  • Writing custom shaders using Three.js TSL
  • Offloading scene computation to a Web Worker

Audio & Visual Integration

  • Developing a custom audio interaction system
  • Implementing a real-time Canvas 2D audio analyzer
  • Connecting sound data to visual feedback elements

Frontend & UI Development

  • Implementing scroll-based parallax effects
  • Creating numerous custom CSS animations
  • Ensuring responsive layout across devices
  • Performance optimization and rendering efficiency

Deployment

  • Cross-browser and cross-device testing
  • GPU and audio performance tuning
  • Deployment (in progress)
Visit Project