← portfolio

// 01 / creative concept · guitar lessons

Six Strings Higher.

A self-initiated concept for a private guitar teacher. The site takes the instrument apart as you scroll, puts it back together in the teacher's hands, then dives through the soundhole into a lesson menu made of strings.

type
Self-initiated concept
focus
Scroll storytelling + motion
scope
Concept, art direction, development
built with
html · css · javascript · gsap · scrolltrigger · lenis · web audio

01 / the idea

The idea.

Most lesson websites open with a price list. This one opens with the instrument, because that is where every player starts.

As you scroll, the guitar comes apart piece by piece: the strings go slack and lift away, the tuners unscrew, the neck and headstock separate, and the soundboard lifts off the body. It is the whole journey from wood to sound, told without a paragraph of text.

Then the story turns. The pieces fly back together and land in the teacher's arms, so you meet the person and the instrument in the same moment.

02 / the build

The build.

A single guitar illustration was cut into 21 separate parts that line up to the pixel. The strings are drawn as live vector lines so they can bow, lift and pull tight again.

The teacher was illustrated in the same anime style, with his arms on their own layer, so the guitar genuinely slides in under his hands rather than fading in on top of them.

One master timeline drives the whole sequence, so it holds together however fast you scroll. The six lesson paths are six real strings: brush across them and they vibrate where you touched, with each note synthesised in the browser. A sideways-scrolling fretboard explains how lessons work, and a three-step booking flow runs from path and time to confirmation.

// why it's here

One instrument. Twenty-one pieces.

Six Strings Higher is not a client project. It is a study in how far a small business website can go when motion does the storytelling, built to show the kind of creative work CornerStone can deliver.