GGS Studio
A website and booking system for a one-room recording studio in Lapu-Lapu City, with a transport bar that plays like a session.
GGS Studio rents its room and an engineer by the hour. The site lets artists book a slot, add recording or mixing, and pay at the studio or online, and gives staff a dashboard to manage it.
- Discipline
- Interfaces and products
- Client
- GGS Studio
- Year
- 2026
- Role
- Web design, Development, Booking system
- Tools
- HTML, CSS, JavaScript, Node
A working copy of the homepage, built from the site's own stylesheet and motion script. Scroll inside it, or press play. Booking and the live calendar are left out because they need the studio's database.
The page plays like a session
The waveform under the hero is the scroll bar. As you read down the page, the playhead moves along it, the played part of the wave lights up and the timecode counts toward 3:34. Once the hero is gone, a thin progress line in the nav takes over the job.
The headline lines rise in one after another, then drift up and fade as the hero scrolls away. Section headings wipe in from under a line, cards and photos follow in a stagger, and anything you scroll past leaves the way it came, upward, so scrolling back brings it down again.
A treated room with gold light
The site borrows from the room itself: near-black walls, a single gold for actions and prices, teal only for live or confirmed states. A transport bar with a waveform sits under the hero, so the page reads like a session timeline.
Corners are 2 pixels everywhere, groups are separated by hairlines, and notes use a thin rule instead of a coloured box.
Thought process
- 01
Bring the room online
The studio is dark, treated and lit with warm light. The site uses the same: near black with one gold.
- 02
Talk like a session
A transport bar with a waveform sits under the hero, so the page reads like a recording timeline.
- 03
Make booking clear
Date, add-ons, payment and details in four plain steps, with the rules written where people will see them.
