Kinetic is a single-page landing page template built for animation and motion design studios. It pairs a viewport-filling headline, a layered gallery of looping project cards, and a multi-step lead generation form into one cohesive experience. The Tech Glass visual identity uses electric indigo, deep void black, and frosted glass surfaces to make every scroll feel like a live render in progress.
by Rocket studio
Loading preview…
Quick summary
Kinetic is a bold, overlap-layered landing page template for animation and motion design studios. It opens with a giant centered headline, flows into a curated gallery of looping video project cards, and closes with a friction-reducing multi-step brief form. The Electric Indigo color system and Tech Glass visual theme make the page feel as crafted as the work it showcases.
Who this template is for
This template is built for studios and creative professionals who lead with moving image work. It speaks directly to people whose portfolio needs to perform as confidently as their craft.
Animation studios and motion design agencies presenting client work
Startup founders and in-house brand teams seeking explainer or social motion content
Creative directors who need a dedicated page to open conversations about brand films and motion systems
What problem this template solves
Most portfolio pages feel static. They show thumbnails and ask visitors to imagine. Motion design work deserves a page that moves, layers, and breathes the same way the work does. Kinetic removes the disconnect between the studio's craft and how it presents itself online.
Generic portfolio grids fail to convey pacing, depth, or creative confidence
Long contact forms create friction before a visitor is ready to commit
Flat, text-heavy layouts undersell the visual language of animation and motion work
What you get with this template
You get a complete single-page layout designed around three priorities: visual impact, curated storytelling, and low-friction lead capture. Every section is purposeful and connected.
A viewport-filling display headline with parallax mouse-drift behavior
An overlap-layered gallery of looping video project cards with frosted-glass edges
A multi-step brief modal form with project type, budget slider, and creative textarea
Feature list
This template is built around interaction details that reinforce the studio's craft at every scroll point. Each feature listed here comes directly from the template design brief.
Theme
Tech Glass
Creative direction
Gallery Walk
Color system
Electric Indigo
Style
Overlap/Layered
Direction
Lead Generation
Page Sections
Viewport-filling Parallax Headline
Overlap-layered Gallery Walk
Multi-step Brief Form Modal
Sticky Glass Pill Call to Action Button
Motion Reel Download Path
Tech Glass Surface and Color System
Related questions
Can I replace the placeholder video loops with my own studio work?
Does the multi-step brief form work out of the box?
Can I adjust the color system to match my studio's brand?
Is this template suitable for a solo motion designer or only for larger studios?
What is the secondary conversion path included in the template?
Viewport-Filling "WE MOVE THINGS." Headline
The header uses a single grotesque display typeface at full viewport scale, centered dead-middle. Each letter carries a subtle glass-refraction effect and a parallax drift tied to mouse movement. There is no hero image or reel, just type confident enough to stand alone.
Overlap-Layered Gallery Walk
Scrolling past the header drops the visitor into a curated exhibition of project cards. Cards overlap and layer like acetate sheets, sliding over and under one another as the user scrolls. The rhythm alternates between one full-viewport hero case study, three smaller tiled loops, and a single full-bleed reel.
Multi-Step Brief Form Modal
The lead capture form opens as a layered modal with three progressive steps. Step one collects project type from four options: brand film, explainer, social campaign, or motion system. Step two presents a budget range slider, and step three offers a single textarea labeled "Tell us what needs to move." The email field appears only at the final step to reduce early friction.
Sticky Glass Pill Call to Action
A "Start Your Brief" button lives as a frosted-glass pill anchored to the top-right corner throughout the entire scroll journey. The same call to action reappears full-width after the final case study, giving two clear entry points without being intrusive.
Motion Reel Download Path
A secondary conversion path lets visitors download the studio's motion reel. This gives undecided visitors a low-commitment next step and starts a conversation before they are ready to fill out the brief form.
Tech Glass Color and Surface System
Every card surface, modal panel, and overlay uses frosted glass white at 60 percent opacity. Electric indigo radiates from interactive elements and hover states. A sharp cyan spark accent marks play buttons and loading indicators. The palette creates a sense of layered depth across every surface on the page.
Page sections overview
Section
Purpose
Giant headline header
Opens with maximum typographic impact and mouse parallax
Hero case study card
Showcases one full-viewport featured project loop
Tiled project trio
Presents three overlapping smaller video loops side by side
Full-bleed reel
Delivers an immersive single video across the full screen
Final call to action block
Reinforces the brief form call to action after the last case study
Brief form modal
Captures project intent through a low-friction multi-step flow
Motion reel download
Offers a secondary path for visitors not yet ready to brief
Design & branding system
The visual identity is built on the Tech Glass theme with an Electric Indigo color system. Every design decision reinforces the sense of depth, luminosity, and controlled motion.
Deep void black (#0B0D17) as the primary background, electric indigo (#4F46E5) for interactive states, frosted glass white (#E0E7FF) at 60 percent opacity for card and panel surfaces, and cyan spark (#06B6D4) reserved for play buttons and loading indicators
Grotesque display typeface at viewport scale for the headline, with glass-refraction letterform styling and parallax drift
Frosted-glass card edges, staggered depth layering, and eased scroll transitions throughout the gallery walk
Mobile & speed optimization
The template is designed to feel intentional and responsive across screen sizes. The layered visual approach is adapted so depth and motion remain clear on smaller viewports.
Overlap and layering depth is preserved across breakpoints without sacrificing readability
Looping video thumbnails and the sticky glass pill button adapt fluidly to mobile screen widths
The multi-step modal form remains usable and clean on touch devices throughout all three steps
How this template helps you convert
Every design and structural decision in Kinetic points toward one outcome: turning a visitor who is impressed into a visitor who starts a brief.
The sticky "Start Your Brief" pill keeps the primary call to action visible at all times, so the moment a visitor is ready, the path forward is immediate.
The multi-step modal reduces form friction by asking for creative intent first and contact details last, which means visitors invest in the brief before being asked to hand over their email.
The motion reel download offers a secondary conversion path for visitors who are not quite ready, keeping the studio in their hands as a tangible asset.
Other information about this template
This template sits at the intersection of portfolio presentation and active lead generation. It is designed for studios that want their page to work as hard as they do.
Template style is Overlap and Layered, with creative direction following a Gallery Walk scroll experience
The header concept is a Giant Headline Centered, with no imagery competing for attention at the top of the page
The primary lead generation direction means every section feeds intentionally toward the brief form rather than acting as a passive showcase
