Design Portfolio Booking Website Template

Quick summary

Kinetic is a single-page portfolio landing page for a one-person motion graphics studio. It opens with a scroll-controlled reel, leads visitors through layered case study cards, and closes with a waitlist form that collects an email and a one-line project brief. Every design choice reflects the precision and atmosphere of a professional post-production workflow.

Who this template is for

This template is built for independent motion designers who want their portfolio to feel as crafted as their work. It suits studios that sell creative direction, not just execution, and need a page that earns trust before a call is booked.

• Solo motion graphics studios ready to open or reopen their client queue
• Freelance directors pitching ad agencies, direct-to-consumer brands, and music artists
• Motion designers who want a waitlist page that communicates range and speed at once

What problem this template solves

Most portfolio pages show work without context. A reel plays, a grid loads, and nothing explains the thinking or the stakes behind each deliverable. Kinetic solves the credibility gap that exists between showing work and winning clients.

• Creative directors scroll past portfolios that look like archives rather than arguments
• There is no natural moment to capture intent from a visitor who is genuinely interested
• Solo studios struggle to communicate speed, range, and process in a single browsing session

What you get with this template

This template gives you a fully structured landing page with sections designed to build reputation project by project. Every component is intentional, from the scroll-jacked opening to the persistent waitlist bar at the bottom.

• A scroll-jacked header that turns the visitor's scroll into a playhead for a reel fragment
• Stacked, overlapping case study cards that rise in sequence with client briefs, finished deliverables, and constraint statements
• A waitlist capture form with an email field, a one-line project field, a live waitlist counter, and a downloadable shot-list template as a lead magnet

Feature list

This landing page is built around a small number of high-impact components. Each one serves a specific role in the visitor experience.

Scroll-Jacked Reel Header

The viewport locks on entry and the visitor's scroll wheel controls playback of a reel fragment. A logo dissolves into particles, particles reform into typography, and typography liquefies into a product shot. No controls are visible until the sequence completes and the page releases scroll.

Stacked Case Study Cards

Each project appears as an overlapping card that slides over the previous one as the visitor scrolls. Every card opens with the client brief in raw, unedited language, then reveals the finished deliverable on loop, then ends with a single constraint sentence. The format builds a sense of depth and range with every card added.

Persistent Waitlist Bar

After the third case study, an electric violet bottom bar floats in view for the rest of the session. It holds a two-field form: one for an email address and one for a one-line project description. A live counter shows how many studios are already on the waitlist, creating visible scarcity.

Shot-List PDF Lead Magnet

Visitors who are not ready to join the queue can download a shot-list template as a portable document format file. The same email field is used, giving the studio a second conversion path that delivers immediate value before bookings officially open.

Void and Violet Visual System

The color palette uses absolute black, deep iris, electric violet, and pale phantom white. Violet gradients pulse on hover states, progress bars, and section dividers. Text is set in phantom white at thin weight with wide letter spacing, referencing comp overlay typography in After Effects.

Layered Panel Architecture

Once the scroll-jacked header completes, the first content panel slides up from beneath it. Every subsequent section is built as a stacked, overlapping layer. The physical sense of depth mirrors the layered comp structure that motion designers work in every day.

Page sections overview

Design & branding system

The visual identity follows a Lens and Frame theme. Every color and typographic choice references the physical experience of working inside a dark edit suite with a single monitor as the light source.

• Color palette: absolute black (#09090B), deep iris (#4C1D95), electric violet (#7C3AED), and pale phantom white (#EDE9FE) for text and interface strokes
• Violet wash gradients bleed from behind layered panels on hover states, progress bars, and section dividers, referencing light leaks through a camera gate
• Typography is set in phantom white at thin weight with wide letter spacing, styled to read like a comp overlay in a post-production timeline

Mobile & speed optimization

The landing page layout is structured to maintain visual clarity at smaller viewport sizes. The scroll-jacked sequence and layered card structure adapt for touch-based browsing without losing the depth effect.

• Layered panel transitions and hover-state violet pulses are scoped to work within standard browser rendering without requiring third-party plugins
• The two-field waitlist form and shot-list download path remain fully accessible at mobile viewport widths
• Section dividers and progress bar accents scale proportionally, keeping the Void and Violet palette intact across screen sizes

How this template helps you convert

This landing page is designed to move a creative director from passive browser to active lead within a single scroll session. Every section adds a layer of trust before asking for anything.

1. The scroll-jacked reel creates immediate sensory proof of craft, stopping visitors before they can bounce, and releasing control only after the full sequence plays.
2. The stacked case study cards build a cumulative argument, each one adding range, speed, and real client context, so the waitlist ask feels earned by the time the form appears.
3. The shot-list PDF gives undecided visitors a reason to share their email today, capturing intent from people who are interested but not yet ready to commit to a project.

Other information about this template

Kinetic is part of the Overlap and Layered template style family, designed for portfolio and agency use cases where the presentation itself is the credential. It is categorized under Design Portfolio within the motion graphics portfolio niche.

• The template style is listed as Overlap and Layered, meaning sections physically stack and slide rather than scroll in a flat sequence
• The header concept is a Scroll-Jacked Experience, a design pattern where the scroll input is intercepted and used to drive animation playback rather than page movement
• The landing page direction is Waitlist and Coming Soon, making it equally useful for studios reopening bookings after a closed period
• The theme, Lens and Frame, draws its visual language from cinematography and post-production tools, making it a natural fit for video-first creative practices

Show more