Frame — Cinematic Video Editor Landing Page Template

Quick summary

Reel is a single-page animator portfolio built to command attention the moment it loads. It uses an asymmetric 60/40 grid, a Bold Brutalist visual identity, and an Obsidian & Gold color system to present case studies as immersive screening rooms. Every scroll section is designed to build momentum, ending in a lead-generation form that asks the right questions.

Who this template is for

This landing page is built for professional motion designers and animators who need a portfolio that feels as dynamic as their work. It speaks directly to people whose clients judge them on feel and speed, not just a PDF résumé.

• Freelance motion graphics artists pitching broadcast-quality animation work
• Studio animators presenting character rigs, liquid simulations, or title sequences
• Cinematics artists targeting indie game directors and agency producers

What problem this template solves

Most animator portfolios look like static galleries. They show finished frames but fail to communicate craft, speed, or the feeling of being inside the work. Clients leave without contacting anyone.

• A plain grid portfolio does not hold attention long enough to build trust
• There is no narrative arc, so the visitor evaluates one piece in isolation instead of feeling momentum build
• Generic contact forms do not qualify leads or invite the right kind of brief

What you get with this template

You get a fully structured, single-page portfolio landing page designed for high-impact lead generation. Every section is mapped to a specific stage of the visitor's decision, from first impression to form submission.

• A parallax floating-photo header with six to eight high-contrast animation stills
• An asymmetric 60/40 case-study grid with looping video clips and production stat columns
• A sticky gold contact bar, a multi-field lead form, and a gated process deck download

Feature list

This landing page is built around a small set of carefully considered features. Each one serves a specific purpose in the visitor's journey from curious to converted.

Parallax Floating Photo Header

Six to eight high-contrast stills from finished animations are suspended at staggered depths against the obsidian background. The images drift with subtle cursor-driven parallax, and a bold brutalist headline slams in from the left edge after a short delay: "I MOVE THINGS THAT DON'T EXIST."

Asymmetric 60/40 Case Study Grid

Each case study occupies a full scroll section divided into a 60-column video panel and a 40-column context panel. The video panel loops the hero moment of the project. The context panel stacks the client name in oversized monospace type, a one-sentence brief, and three production stats: frame count, render engine, and turnaround time.

Animated Gold Divider Lines

Each case study ends with a gold accent line that draws itself across the full viewport width. The effect acts as a visual curtain call, separating projects and reinforcing the screening-room metaphor without relying on text.

Breathing Background Scroll Effect

As the visitor scrolls through case studies, the background shade shifts almost imperceptibly from deep obsidian to a warmer charcoal and back. The subtle rhythm keeps the dark palette from feeling flat and adds a cinematic pulse to the page.

Sticky Lead Generation Bar

A gold sticky bar locks to the viewport after the visitor passes the second case study. It holds the primary call-to-action "Let's Make Something Move" and anchors the contact form without interrupting the scroll experience.

Gated Process Deck Download

A secondary conversion path offers a downloadable process deck in exchange for an email address. It gives cautious visitors a low-commitment entry point before they decide to start a full conversation through the main form.

Page sections overview

Design & branding system

The visual identity is built around a Bold Brutalist theme using an Obsidian & Gold color system. The palette is intentionally heavy and unapologetic, designed to stop scrolling rather than invite casual browsing.

• Deep obsidian black (#0B0B0F) as the base background, raw exposed concrete (#1E1E24) as the secondary surface, and molten gold (#D4A843) reserved for hover states and accent strokes
• Sharp bone white (#EDEAE5) for all body typography, delivering maximum contrast against the dark surfaces
• Oversized monospace type for client names and brutalist block type for the hero headline, reinforcing the raw, unpolished authority of the design

Mobile & speed optimization

The landing page layout is designed to translate the immersive screening-room experience across device sizes. The asymmetric grid and video panels are structured to reflow clearly on smaller viewports.

• The 60/40 grid collapses into a stacked single-column layout on mobile so video and stat panels remain readable
• Looping video clips and parallax layers are contained within their scroll sections to prevent layout overflow on touch devices
• The sticky contact bar and gated download form remain accessible at all scroll depths on both desktop and mobile

How this template helps you convert

The page is built around two conversion paths that serve different levels of buyer readiness. Every design and layout decision pushes the visitor toward one of these two actions.

1. The sticky gold contact bar appears after the second case study, when the visitor has seen enough work to feel confident. The form fields for studio name, project type dropdown, and a free-text brief field qualify the lead before any conversation begins.
2. The gated process deck download captures email addresses from visitors who are interested but not yet ready to commit. It creates a second chance to start a relationship with cautious studio recruiters or agency producers.

Other information about this template

This template is part of a Portfolio & Agency category and sits within the Animator Portfolio subcategory. It is designed specifically for the Animator Case Study Portfolio niche, where the standard is high and the audience is time-pressed.

• The template style is Asymmetric Grid (60/40), a layout format well suited to pairing visual proof with concise production context
• The creative direction is Immersive Visual, meaning each scroll section is self-contained and contributes to a cumulative cinematic effect
• The header concept is Floating Photos with parallax depth, which immediately signals craft and attention to motion design detail
• The landing page direction is Lead Generation, with both a primary multi-field form and a secondary gated download serving different points in the buyer journey

Show more