Creative Director Portfolio Pre-Launch Website Template

Quick summary

Folio is a horizontal scroll portfolio landing page designed for senior creative directors. It opens with fifteen to twenty campaign stills drifting in a black void, then builds a manifesto through screen-width panels where oversized type and project evidence escalate together. The full archive is locked behind a waitlist, and every panel earns the signup before the visitor reaches the final call to action.

Who this template is for

This template is built for creative directors who have a body of work that speaks louder than a traditional portfolio page. It suits professionals who want to launch with momentum, control their own narrative, and filter for the right audience before revealing everything.

• Senior creative directors preparing a portfolio launch with a built-in waitlist
• Agency executive creative directors (ECDs) or independent creative partners positioning for high-value engagements
• Junior creative directors studying how to present a career with conviction and intentional visual voice

What problem this template solves

Most portfolio pages list work without making an argument. They show what was made without explaining why it matters. Folio solves the problem of a creative director who has too much work to display casually and too strong a point of view to hide inside a standard grid layout.

• A standard portfolio treats every project equally, flattening a career into a catalogue
• Folio builds a scrollable philosophy, pairing belief statements with project evidence so visitors understand not just the work but the thinking behind it
• The waitlist mechanic turns an early launch into a demand signal, collecting qualified interest before the full archive goes live

What you get with this template

You get a complete single-page horizontal scroll layout structured across six distinct panels, from a parallax hero through four manifesto panels to a final waitlist capture. Every element is designed to feel intentional, from the floating photo constellation to the raw email input with a blinking cursor.

• A cursor-reactive floating photo header with fifteen to twenty campaign stills at varying depths and rotations
• Five manifesto-driven scroll panels, each pairing a bold conviction statement with supporting project imagery
• A fixed "Get First Access" call to action button in electric violet, always visible in the bottom-right corner throughout the scroll

Feature list

This template includes the following built-in design and interaction features, all grounded in the source brief.

Floating Photo Constellation Header

Between fifteen and twenty campaign stills, editorial tears, and identity lockups are suspended in a black void at varying depths and rotations. They respond to cursor movement with subtle parallax, parting like disturbed water to reveal depth and create an immediate sense of presence.

Manifesto Horizontal Scroll Panels

The page scrolls horizontally through five screen-width panels. Each panel pairs an oversized manifesto statement with campaign proof imagery. Early panels are restrained; later ones introduce overlapping imagery and broken grids, mirroring a career that grew louder and more confident over time.

Fixed Waitlist Email Capture

A "Get First Access" button is fixed to the bottom-right corner throughout the entire scroll. It opens a single raw input field with no label, just a blinking cursor, keeping the signup experience minimal and on-brand. A secondary line reads the launch context and project scale beneath it.

GSAP-Powered Scroll Animation

The horizontal scroll is driven by high-fidelity animation including cursor trails in electric violet, word reveal sequences, and GPU-accelerated transforms. Animated elements use will-change declarations to keep motion smooth without layout interference.

Magnetic Call-to-Action Button

The primary "Get First Access" button behaves as a magnetic element, responding to cursor proximity with a subtle pull effect. This interaction reinforces the brutalist aesthetic while making the conversion point feel alive and intentional.

Bold Brutalist Type System

Oversized monospaced type in bone white is set with tight tracking against an absolute black canvas. Manifesto statements fill the full panel width, functioning as both headline and design object. The typography is not decorative; it carries the argument.

Page sections overview

Design & branding system

The visual identity follows a Void and Violet color system built to feel like a UV lamp illuminating a dark room. Everything is invisible until the visitor moves, then suddenly too vivid to ignore. The palette and type choices are not decorative choices; they are the argument.

• Color palette: absolute black (#000000) as the canvas, electric violet (#7B2FBE) for cursor trails and hover states, bone white (#EDEDED) for manifesto type, and deep ultraviolet (#2D0A4E) pooling behind project cards
• Typography: JetBrains Mono for oversized manifesto text with tight tracking, paired with DM Sans for supporting copy, both set at large scale to function as visual objects
• Aesthetic tone: Bold Brutalist, referencing a concrete gallery at 2 AM, brutally lit, nothing on the walls except the work

Mobile & speed optimization

The template is designed desktop-first, with horizontal scroll as the primary experience. A mobile fallback converts the horizontal panel sequence into a vertical scroll so the manifesto flow and work evidence remain readable on smaller screens.

• Desktop priority: GSAP horizontal scroll with GPU-accelerated transforms and will-change on all animated elements for smooth motion
• Animated elements are limited to transforms only, keeping the rendering pipeline clean and avoiding layout recalculation during scroll
• Mobile fallback: vertical scroll layout preserves the panel-by-panel manifesto structure without breaking the content hierarchy

How this template helps you convert

The conversion strategy in this template is built into the scroll itself. The visitor is not asked to sign up cold; they are taken through a proof-of-philosophy sequence that earns the request by the time they reach the final panel.

1. The floating photo header creates immediate visual authority, signaling that this is not a standard portfolio before the visitor reads a single word
2. Each manifesto panel raises the stakes, pairing a conviction with evidence so that by the final panel the visitor genuinely wants to see the rest of the archive
3. The fixed "Get First Access" button remains visible throughout the scroll without interrupting the experience, so the signup action is always available the moment intent is formed

Other information about this template

Folio is a purpose-built teaser for a portfolio launch, not a full portfolio display. It is designed for a B2C and B2B hybrid context where the audience includes both agency recruiters and brand founders. The scroll narrative references a career spanning forty brands and two hundred projects, communicated through implication and manifesto evidence rather than a direct list.

• The launch context line beneath the call to action reads: "Full archive opens June 2025, 200 projects, 40 brands, zero apologies"
• The template uses a Pattern 3 Vercel Horizontal Flow footer, kept intentionally minimal to avoid competing with the scroll content
• This template suits creative directors who want to control the reveal of their work and use the pre-launch period as a positioning tool
• The horizontal scroll format is uncommon in portfolio templates, which makes it a strong differentiator for a creative director who wants the container to reflect the content

Show more