Pulse is a masonry-layout landing page template built for game sound design studios. It opens with a scroll-triggered oscilloscope animation and builds through a cinematic card grid that moves from ambient quiet to high-energy impact audio. A persistent "Hear Your Game" call-to-action bar and expandable case study cards guide visitors toward a project inquiry form on a second page.
by Rocket studio
Loading preview…
Quick summary
Pulse is a two-page landing page template designed for game sound design studios. The scroll-triggered header visualizes live waveforms as the visitor moves down the page. A masonry card grid acts like a building soundtrack, growing in energy from ambient room tones to heavy weapon impacts. Every card carries an inline audio player and spectrogram thumbnail, and a persistent call-to-action bar floats at the bottom once the first scroll trigger fires.
Who this template is for
This template is built for sound design professionals who work in the game industry and need a portfolio that earns trust through the work itself, not just text. If your clients expect to hear before they commit, this is the right starting point.
Indie studios mid-production who need to show adaptive audio tree work to collaborators or publishers
AAA outsource audio leads looking to fill pipeline gaps and present case studies to new studio partners
Solo developers ready to move past placeholder sound effects and present polished, world-native audio work
What problem this template solves
Most audio portfolio pages treat sound as a secondary element. They rely on static screenshots and PDF lists of credits. Pulse flips that approach entirely by making the visitor experience the audio as they browse.
Visitors leave generic portfolio sites before conviction builds, because nothing makes them feel the work
Standard grid layouts flatten every project to the same visual weight, hiding the range of an audio library
There is no natural moment to convert a curious visitor into a paying inquiry without forcing a disruptive pop-up
What you get with this template
You get a fully structured two-page layout that includes the animated header, the masonry portfolio grid, and a second-page project inquiry form. Every major interaction is already mapped and ready to customize with your own projects and audio files.
A scroll-triggered oscilloscope header that deforms into reactive waveform visuals across four soundscape biomes
A masonry card grid with hoverable inline audio players, spectrogram thumbnails, and engine labels per project
Theme
Neo-Retro
Creative direction
Cinematic Sequence
Color system
Northern Lights
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Scroll-triggered Oscilloscope Header
Cinematic Masonry Card Grid
Hoverable Inline Audio Players
Expandable Case Study Cards
Persistent Floating Call to Action Bar
Northern Lights Color System
Related questions
Is this template suitable for a solo freelance sound designer?
Can I update the audio files and project details in each card?
How does the expandable case study feature help convert clients?
What is the second page in this template used for?
Does the template support labeling projects by audio engine?
A persistent "Hear Your Game" call-to-action bar with supporting copy and a pulse animation tied to 120 BPM
Feature list
This section covers the core built-in components and interaction patterns included in the template.
Scroll-Triggered Oscilloscope Header
The viewport opens on a flat oscilloscope line. As the visitor scrolls, the line deforms into a waveform and a layered soundscape sequence begins. The sequence moves through forest ambience, a sci-fi corridor hum, a fantasy combat clash, and a pixel-art coin collect. Reactive particle systems appear behind the waveform for each biome. The scroll position acts as the playhead, with no separate play button required.
Cinematic Masonry Card Grid
The card grid is organized like a live mix, starting quiet in the first row and growing louder in implied energy as the visitor scrolls deeper. Cards in early rows are smaller and more muted. Cards further down grow larger and denser, covering creature vocalizations, weapon impacts, and user interface feedback cascades. Each card displays a spectrogram thumbnail, the game title, and the audio engine used on the project.
Hoverable Inline Audio Players
Every masonry card carries an inline audio player that activates on hover. The player is embedded directly in the card so visitors can sample the work without leaving the grid. This keeps engagement inside the portfolio and lets the audio do the selling before any call-to-action appears.
Expandable Case Study Cards
Any card in the grid can be tapped or clicked to expand into a full case study view. The expanded state includes before-and-after audio comparisons, keeping the visitor inside the portfolio experience until their conviction is fully built. No separate page navigation is required to access the deeper project detail.
Persistent Floating Call-to-Action Bar
After the first scroll trigger fires, a bottom bar appears and remains visible throughout the rest of the page. The bar displays the primary call-to-action "Hear Your Game" in aurora green with a subtle pulse animation synced to 120 BPM. Supporting text beneath reads "Share your project. Get a free 30-second concept demo." The bar links through to the project inquiry form on the second page.
Neo-Retro Northern Lights Color System
The visual identity uses a defined five-color palette drawn from the Northern Lights theme. Void black dominates backgrounds, aurora green marks interactive states and waveform visualizations, plasma violet anchors headlines and section dividers, and frozen cyan pulses on hover states and loading indicators. The overall feel is phosphorescent and synthetic, like a CRT monitor bleeding light into a Scandinavian winter.
Page sections overview
Section
Purpose
Oscilloscope Header
Launches scroll-driven waveform animation and biome soundscape sequence
Masonry Portfolio Grid
Displays projects as cinematic cards building from ambient to high-energy audio
Inline Audio Players
Lets visitors sample project audio directly from each card on hover
Expandable Case Studies
Reveals before-and-after audio comparisons inside the grid without page navigation
Floating call to action Bar
Presents the persistent "Hear Your Game" prompt and links to the inquiry form
Project Inquiry Form
Captures project details and delivers the free 30-second concept demo offer
Design & branding system
The template uses a Neo-Retro visual theme built on the Northern Lights color system. Every color has a specific role, so the palette stays consistent across all interactive states without manual adjustment.
Five-color palette: void black (#0B0E17), aurora green (#3CEFB7), plasma violet (#8338EC), frozen cyan (#00F0FF), and deep charcoal (#16192A) as the substrate
Aurora green is reserved for interactive states, waveform visualizations, and the primary call-to-action; plasma violet anchors headlines and section dividers
Frozen cyan pulses on hover states and loading indicators, reinforcing the sense that every element is responsive and alive
Mobile & speed optimization
The masonry grid and scroll-triggered animations are structured to work across screen sizes. The card layout adjusts to narrower viewports so the cinematic grid sequence reads correctly on mobile without breaking the energy build from row to row.
Inline audio players and spectrogram thumbnails are designed to remain functional and tappable on touch devices
The floating call-to-action bar is sized and positioned to stay visible and usable on smaller screens without obscuring the card grid
How this template helps you convert
Pulse is built around a single conversion philosophy: let the sound close the sale before any button is pressed. Every layout decision supports that goal.
The scroll-triggered header creates immediate sensory engagement, making a visitor feel the studio's craft within seconds of arriving, well before they read a single line of copy.
The cinematic masonry grid holds attention by building energy across rows, giving visitors a reason to keep scrolling and sampling audio rather than bouncing after the first impression.
The persistent call-to-action bar appears only after the visitor has already experienced the portfolio, so the offer of a free 30-second concept demo lands when conviction is already forming.
Other information about this template
Pulse is a two-page template. The first page is the masonry portfolio landing page described throughout this overview. The second page is a dedicated project inquiry form that receives traffic from the floating call-to-action bar. The template is designed for studios and freelancers working with audio middleware and game engines common in professional game development.
The card engine labels support display of middleware and native engine identifiers, such as Wwise, FMOD, and Unity native audio
The before-and-after audio comparison feature inside the expanded case study view is particularly useful for studios presenting outsource work to AAA clients who need to hear the gap being filled
The 120 BPM pulse animation on the call-to-action bar is a deliberate design choice that ties the interface rhythm to a standard music production tempo, reinforcing the studio identity at a detail level
