I had the opportunity to design and develop a portfolio archive website for the award-winning composer Hsin-Lei. For inspiration, I listened to her songs and was elated: Although many are created by instruments typically found in more classical music, Hsin-Lei pours experimental elements into her songs. The results are extraordinary, featuring great contradictions to her calm exterior.

I developed a monochromatic, dark purple color scheme. The highly desaturated hue generates unstable and suppressed feelings, which suit the agitated, impulsive tone of her music and inject her unique artistry into the dull gray-scale interface.

The secret ingredient making site scrolling so smooth is Pixi.js, a library of an efficient canvas/WebGL rendering pipeline. Since I was curious about the performance bottleneck with DOM rendering, I started using full-screen CSS backgrounds and CSS 3D transforms.

At first, the scrolling worked fine with static, high-res images, but when I tried to add the old-school Ken Burns crossfading effect I wanted as a transition, it became an aggressive task for the browser paint cycle. I opted for the WebGL approach using Pixi.js and utilized the great power with great responsibilities: wrote a fragment shader for crossfading and properly garbage collected unused textures. Ultimately, the site reached my desired frame-rate, and I was no longer distracted by the jank when listening to her music. This gave me some peace of mind.

Still, it’s a mixed-rendering approach between GL and DOM. For example, to take advantage of the highly specialized browser text-rendering engine, all text nodes are displayed as conventional markups.

Designing the site data structure with CraftCMS is an enjoyable experience. Its flexibilities in customizing content schema are enormously efficient. Especially when working with the standard MVC pattern and some clever Twig templating technique, I managed to keep my back-end codebase very compact and semantic to digest.