Stroke - Immersive Calligrapher Landing Page Template

Quick summary

Stroke is a single-page calligrapher portfolio template built around case study storytelling. It opens with a full-viewport Before/After Slider, walks visitors through the creative process in journal-style chapters, and closes with a commission form that reads like a creative brief. Every section is designed to turn a curious visitor into a qualified lead.

Who this template is for

This template is built for professional calligraphers who serve high-end clients and need a portfolio that communicates the depth of their craft. It suits practitioners whose work spans logotypes, invitation suites, and editorial commissions equally well.

• Calligraphers pitching bespoke logotype work to luxury brand creative directors
• Wedding calligraphers handling large-scale envelope and stationery suites
• Editorial calligraphers sourcing hand-lettered mastheads and headline treatments for print art directors

What problem this template solves

Most calligrapher portfolio pages flatten the work into a gallery grid. They show the finished piece but strip out the process, the brief, the iteration, and the material reality that makes hand-lettering worth its premium price. Stroke restores that depth.

• Visitors see before-and-after proof of transformation from brief to finished piece
• The case study scroll format replaces static thumbnails with a craftsperson's journal narrative
• The commission form filters serious clients by asking them to describe feeling, not just budget

What you get with this template

You get a fully structured, single-page layout with every section purpose-built for converting luxury creative clients. Nothing requires you to invent a narrative structure from scratch.

• A Before/After Slider header with a four-second delayed headline that writes itself in letter by letter
• Full-viewport case study sections showing problem, process, and finished work in sequence
• A closing commission form with project type, timeline, and a free-text brief field

Feature list

This template is built around a small number of high-impact features. Each one serves the core goal of making the calligrapher's craft legible, credible, and commissionable.

Before/After Slider Header

The header spans the full viewport and places the client's original brief on the left and the finished calligraphic piece on the right. The visitor drags a vertical divider between the two states. The divider edge is highlighted in the luminous violet accent color, creating a moment of visual tension that communicates transformation before a single word is read.

Typewriter Headline Reveal

No headline appears for the first four seconds after the page loads. Then the title writes itself in letter by letter, mimicking the motion of a pointed nib scripting text in real time. The delay creates anticipation and immediately signals that this is not a generic portfolio page.

Chapter-Driven Case Study Scroll

Each commissioned project occupies a full-viewport section structured in three parts: the original client problem rendered as a real artifact, close-up process documentation including video and annotated sketches, and a slow full-bleed fade reveal of the finished work in its printed context. The sequence escalates in complexity across projects, deepening trust with every scroll.

Contextual Commission calls to action

The primary call to action, "Commission a Piece," appears three times across the page. It starts as a fixed ghost button in the top navigation, reappears between case studies as a conversational prompt, and closes the page as a full-width section. Repetition is intentional and contextual, not mechanical.

Qualifying Lead Generation Form

The commission form is structured as a creative brief in three steps: project type selection, timeline, and a free-text field asking the visitor to describe the feeling they want the letters to carry. There are no pricing tables or packages. The form filters for thoughtful clients by design.

Void and Violet Color System

The entire page is built on a four-color palette: absolute void black as the dominant background, muted violet-ash for secondary surfaces and pull quotes, bleached cotton white for body text and lettering showcases, and a luminous violet accent reserved for hover states, progress indicators, and call-to-action edges.

Page sections overview

Design & branding system

The visual identity follows an Ink and Paper theme expressed through the Void and Violet color system. Every color and typographic decision references the physical atmosphere of a calligraphy studio working late, where a single desk lamp casts violet-tinged light across black ink and pale cotton paper.

• Void black (#0B0A0F) dominates as the background, keeping attention on the lettering work
• Violet-ash (#4A3F5C) surfaces secondary panels and pull quotes without competing with the work
• Bleached cotton white (#F5F0EB) carries all body text and lettering showcases for maximum contrast
• Luminous violet (#9B72CF) activates only on hover states, progress indicators, and call-to-action edges

Mobile & speed optimization

The template is structured for a full-width immersive experience and its layouts are designed to translate cleanly to smaller screens without losing the visual weight of the work.

• Full-viewport sections reflow to single-column layouts on mobile without breaking the case study sequence
• The Before/After Slider is touch-enabled so mobile visitors can drag the divider with a finger

How this template helps you convert

The page is built to move a visitor from curiosity to commission inquiry without requiring a follow-up sales conversation. Every design and copy decision works toward that outcome.

1. The Before/After Slider and typewriter headline create immediate emotional engagement, establishing the calligrapher's craft before the visitor reads a single line of copy.
2. The escalating case study scroll builds cumulative proof across multiple real commissions, so by the time the visitor reaches the form, trust is already established through documented work.
3. The commission form itself acts as the first step of a creative collaboration, asking for feeling rather than budget and naturally qualifying clients who are serious about bespoke work.

Other information about this template

This template is categorized under Portfolio and Agency and sits within the Calligrapher Portfolio subcategory. It is designed specifically for the Calligrapher Case Study Portfolio niche, which makes it a strong fit for practitioners who need to communicate both craft and credibility to premium clients.

• The template style is Full-Width Immersive, meaning every section is designed to fill the screen and hold attention
• The creative direction follows a Case Study Narrative structure, guiding visitors through a journal-style sequence rather than a static gallery
• The header concept, a Before/After Slider, is a format particularly well suited to work where the transformation from brief to finished piece is itself the proof of value
• The lead generation direction means every layout decision prioritizes commission inquiry over passive browsing

Show more