One thing, many shapes
Instead of a new effect on every page, it is the same dots each time. That is what makes the site feel like one place.
Studio website
NSKU
A studio site that plays along to sound.
NSKU is a UX and interface design studio. On its site, every page is a piece of work, not a page about work. One field of dots moves to sound, and takes a new shape for each chapter as you scroll.
Visit nsku.studio (opens in a new tab)
- Role
- Design and build
- Type
- Studio website
- Built with
- Three.js, GLSL, Web Audio, plain JavaScript
01 The problem
Show the work.Don't describe it.
Most studio sites say the same things. We care. We are creative. We ship. Anyone can write that, so nobody believes it.
I wanted a site you could feel in the first second, before you read a word. And one with a reason to come back.
02 What I did
What I did
- 01
One field of dots
A single particle system sits behind the whole site. Each chapter gets its own shape, and the dots move from one to the next as you scroll.
- 02
Made it listen
It moves to sound. By default it plays a set made live in the browser. You can also give it your microphone, or your own track.
- 03
Added real tools
Next to the work sit things people can use: a guide to the SP-1 Tape Looper, a stem loader, a drum lab and a PO-32 transfer tool.
- 04
Kept it plain underneath
Plain JavaScript and no build step. What runs in the browser is what I wrote.
03 Details
Details that matter
Your microphone, your call
The site only listens if you ask it to, and your browser checks with you first.
Tools bring people back
A guide or a handy tool is a reason to return. A list of services is not.
Its own design system
The studio has its own design system, so the tools and the pages look and work like one site.
04 Pictures
05 For your site
What you can take from it.
Let people try something. A small demo, a calculator, a free guide. It says more than a paragraph about how good you are, and it gives people a reason to remember your name.
Want something like this?
Want a site people remember after they close the tab? Tell me what you do.
Start a project
Tell me what you want to build.
Pick what you need and see the price right here, or just send a few lines. I read every message and reply myself.
What happens next
See all prices and what each includes