Folio - Stunning Motion Designer Landing Page Template

Quick summary

Folio is a motion designer landing page template that pairs a collage-style header with a gallery-walk project flow. The asymmetric 60/40 grid gives video work the dominant canvas it deserves. An obsidian and gold color system keeps the mood restrained and luxurious. The single destination call-to-action removes friction and sends every visitor toward one clear next step: booking a call.

Who this template is for

Folio is built for freelance motion designers who rely on visual work to close new clients. It fits professionals whose reel spans brand reveals, kinetic typography, and explainer videos. If the work is the pitch, this template gives it the space it needs.

• Freelance motion designers building a client-facing portfolio presence
• Graphic designers specializing in video, animation, and brand motion work
• Independent creatives targeting agency creative directors, startup founders, and production houses

What problem this template solves

Most portfolio templates treat video as an afterthought. They compress reels into thumbnail grids, bury project context in accordion menus, and stack generic contact forms at the bottom. Folio removes all of that friction.

• Video work gets a full-viewport stage rather than a cropped thumbnail slot
• Project context sits alongside each piece so clients understand the brief and the outcome
• The booking call-to-action is persistent and singular, removing any decision fatigue at the end

What you get with this template

Folio delivers a complete single-page layout designed around the specific needs of a motion design practice. Every section has a defined role and a visual logic that builds confidence as the visitor scrolls.

• A collage-style header with overlapping thumbnails, rotated layers, and a silently autoplaying five-second logo animation loop
• Full-viewport project sections in a 60/40 split showing an embedded video player alongside client name, brief, role, and a pull-quote
• A persistent bottom-right booking button fixed in place after the first scroll, linking directly to a Calendly booking page

Feature list

Folio's features are drawn directly from its brief: a designer's atelier brought to screen with motion, restraint, and a clear commercial purpose.

Collage Scrapbook Header

The header layers overlapping video thumbnails, torn-edge stills, and hand-scrawled project titles across the viewport at slight rotations. One thumbnail autoplays silently with a five-second logo-to-liquid-gold loop. Process fragments such as a color swatch strip, a pencil sketch, and a sticky note fill the negative space around the off-center headline.

Asymmetric 60/40 Project Grid

Each project occupies a full viewport section. The wider 60-column side holds an embedded video player with a gold circular play button. The narrower 40-column side presents the client name, project brief, role, and an italic cream pull-quote from the client. The layout gives video the dominant weight it earns.

Gallery Walk Scroll Transitions

Scrolling through projects feels like moving through an exhibition. Each section transitions with a soft horizontal parallax shift, as if the visitor is walking past hung frames. The pacing builds deliberately from quiet editorial work to the most awarded piece at the end.

Persistent Booking Call-to-Action

A fixed bottom-right button reading "Book a Chemistry Call" appears after the first scroll. It stays visible throughout the entire page. There is no form on the page. Every interactive element, both the project cards and the persistent button, points to the same Calendly destination.

Obsidian and Gold Visual Identity

The color system uses deep obsidian black as the dominant canvas, burnished gold on hover states and play buttons, warm graphite for card surfaces, and parchment cream for typographic moments. The palette reads like a matte-black portfolio case with gold foil debossing: invisible until the light catches it.

Pace-Built Project Sequence

Projects are ordered deliberately. The sequence opens with quiet editorial motion work and closes on the most awarded piece. This structure builds trust gradually and ends at the highest point, so the visitor's first instinct after the final project is to reach out.

Page sections overview

Design & branding system

The visual identity follows an Atelier Studio theme. Every color and typographic choice points back to the same idea: a working studio after hours, where restraint and craft are the signals of quality.

• Color palette: obsidian black (#0B0B0F) as the canvas, burnished gold (#C5A254) on hover and play states, warm graphite (#2A2A30) for card surfaces, and parchment cream (#F0E6D3) for sparse type moments
• Typography uses a monospaced typeface for the headline, placed off-center, with italic cream text reserved for client pull-quotes
• Visual texture references include torn-edge stills, hand-scrawled labels, color swatch strips, and layered rotations that evoke a physical corkboard or lightbox studio wall

Mobile & speed optimization

The template is built with a single-page structure that keeps the layout focused and load-light by design. The collage header and full-viewport sections are composed to adapt across screen sizes without losing their visual hierarchy.

• The asymmetric 60/40 grid reflows cleanly so video players and project context remain legible on smaller screens
• The silently autoplaying header loop and gold play-button interactions are designed to work within a single-page scroll without requiring additional page loads
• The persistent booking button remains accessible throughout the scroll on both desktop and mobile viewports

How this template helps you convert

Folio is designed as a click-through landing page with one destination. The entire page is structured to reduce hesitation and build confidence before the ask ever appears.

1. The gallery walk scroll sequence builds trust progressively, moving from restrained editorial work to the most awarded piece, so the visitor arrives at the call-to-action at peak confidence rather than cold
2. The persistent "Book a Chemistry Call" button stays visible without interrupting the viewing experience, creating a low-pressure but always-available next step that removes the need to hunt for contact information
3. Every project section pairs the visual work with client name, brief, and a pull-quote, giving creative directors and founders the professional context they need to justify the booking decision

Other information about this template

Folio belongs to the Portfolio and Agency category and sits within the Graphic Designer Portfolio subcategory. It is purpose-built for the graphic designer video portfolio niche, where the intersection of motion craft and commercial storytelling is the core value proposition.

• The template style is an asymmetric grid with a 60/40 column split, distinguishing it from standard centered or symmetrical portfolio layouts
• The landing page direction is click-through, meaning the entire page points to a single external destination with no form handling required on the page itself
• The header concept is a collage and scrapbook composition, which sets Folio apart from minimal hero-image templates common in the same category
• The creative direction is Gallery Walk, where each project section functions as an exhibition room and the scroll pace is intentionally curated
• This template suits motion designers who work with brand identity, explainer video production, title sequence design, and kinetic typography projects

Show more