UAStart a project
WaveForm logo
Case study · Education13 / 39

WaveForm

Website for a school that teaches production, mixing and sound design. As you scroll, 30,000 particles turn into a microphone, a sound wave and a vinyl record.

Project
WaveForm
Industry
Music education
Scope
Web design · Build · WebGL
Built with
Three.js · WebGL · JavaScript
Year
2026
WaveForm — Website for a sound production school, built in WebGL
Overview

A site about sound that feels like sound: every section is a new shape made of the same particles.

The brief

A sound school needs a site that young producers remember after the first scroll, and that still leads them calmly to the four courses and the prices.

What we did

We built a 3D first screen with a voxel letter W over mountains and note names in the background. Further down, one particle system of 30,000 points changes shape for each section: a cloud, a microphone, the school logo, a waveform and a vinyl record. Courses, numbers and plans sit on top as quiet cards.

The live site

Scroll the site right inside the frame, or open it full screen.
webraw.studio/sites/waveform/Open the site

The first screen

Homepage · Desktop 1440
WaveForm: first screen of the homepage

Details

WaveForm: The first particle cloud after the hero
The first particle cloud after the heroIntro
WaveForm: Particles shaped into a vintage microphone
Particles shaped into a vintage microphoneStory
WaveForm: Waveform and the four course cards
Waveform and the four course cardsCourses
WaveForm: Plans and the footer
Plans and the footerPricing

Colour & type

Palette — from the project file

  • Black#000000
  • Indigo#2B2A6E
  • Lilac#A9A6E8
  • Dusk#E7B4C0
  • White#FFFFFF

Typefaces

AaGeist — headings and textLight · Regular · Medium
Dot-matrix lettering — the second hero line
Next case

Heroes of Digital

Heroes of Digital — Homepage for an AI-driven SEO agency
Start a project

Let’s launch.

Send a short brief or a link to your current site. You’ll get a clear plan, timeline and quote — no sales call required.

  • Reply within one business day
  • Design, build and launch by one team
  • One week of post-launch support included

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw