Canvas — Bold Designer Showcase Landing Page Template

Quick summary

Forge is a single-page portfolio landing page for industrial product designers who want to make an impression before saying a word. A scroll-jacked hero spins a hero product in real time, manifesto interstitials interrupt the masonry grid with raw design philosophy, and every card funnels toward a case-study click. No forms, no fluff, just work.

Who this template is for

This template is built for product designers who work at the intersection of engineering and aesthetics. It speaks directly to freelancers and independent designers pitching to demanding, visually literate buyers.

• Industrial designers showcasing electronics, packaging, furniture, and wearable hardware work
• Freelance product designers pursuing creative director and agency producer clients
• Design leads building a B2B portfolio to generate inbound briefs from consumer electronics firms

What problem this template solves

Generic portfolio templates flatten every project into the same grid and ask for contact before proving the work. Forge fixes that by letting the craft speak at full volume first.

• Most portfolio pages bury their best work inside subdued layouts that fail to communicate material intelligence or design rigour
• Standard templates use rounded corners, ambient shadows, and friendly calls to action that signal approachability rather than precision
• Visitors leave without clicking through because nothing in the layout rewards curiosity or builds trust incrementally

What you get with this template

Forge delivers a fully structured, single-page portfolio landing page with high-animation interactivity and a brutalist visual identity built from the ground up.

• A scroll-jacked 3D hero that locks the viewport and lets the visitor's scroll wheel rotate a product object through a full 360-degree revolution before releasing into the page
• Three masonry project clusters with varied-height cards, hard-cut imagery, monospaced caption bars, and gold underline-wipe hover states with parallax lift
• Three full-bleed manifesto interstitials set in condensed grotesque type at 15vw, placed rhythmically between clusters to create a reading and looking cadence

Feature list

Forge is engineered around a specific visual and interaction philosophy. Every component listed below is defined in the source brief and reflected in the template build.

Scroll-Jacked 3D Hero Rotation

The viewport locks on entry and the visitor's scroll input rotates a hero product object, a sculptural speaker or brushed-steel appliance, fifteen degrees per scroll tick. Hard directional lighting catches each new edge. After a full 360-degree rotation the viewport releases and the page continues.

Masonry Project Grid

Three clusters of varied-height project cards form the body of the page. Cards use zero border radius and no drop shadows. Each card carries a brutalist caption bar at the bottom showing project name, year, and material in monospaced type.

Gold Underline Hover and Parallax Lift

Hovering any project card triggers a tarnished gold underline wipe across the caption bar and a subtle parallax lift on the card itself. A "See the Process" call to action appears in the hover state, directing the visitor toward the full case-study page.

Full-Bleed Manifesto Interstitials

Between each masonry cluster, a full-bleed typographic panel punches through with one-line design statements set at 15vw in gold on black. These statements, "MATERIAL IS THE FIRST SKETCH," "IF IT FLEXES, IT FAILED," and "TOLERANCES ARE TASTE", create rhythm and communicate design philosophy without needing a bio section.

Fixed Gold Pill Call to Action

After the scroll-jack hero completes, a fixed gold pill button labelled "See the Process" anchors to the bottom-right corner of the viewport. It persists as the visitor scrolls through the masonry grid, keeping the primary conversion path visible at all times.

Earned Final Call to Action

A secondary contact prompt, "Let's Make Something", appears only once, at the very bottom of the page, after the visitor has scrolled through the full body of work. The placement earns the ask by proving craft first rather than leading with a contact form.

Page sections overview

Design & branding system

Forge uses an Obsidian and Gold color system that reads like a matte-black monograph with gold foil accents. Every design choice reinforces material honesty and typographic aggression.

• Colors: deep volcanic black (#0B0B0F) for all backgrounds, polished graphite (#1E1E24) for masonry cards, tarnished gold (#C9A84C) for hover states and manifesto pull-quotes, and warm raw white (#F0ECE2) for body text
• Typography: a condensed grotesque display face for manifesto and hero type, a monospaced face for card captions and metadata, and a clean humanist sans-serif for body copy
• Visual style: zero border radius on all cards, hard-cut image edges, no drop shadows, and uppercase tracked-wide type for all display elements

Mobile & speed optimization

Forge is designed desktop-first, matching the working environment of its primary audience, creative directors and agency producers who review portfolios on large screens. A mobile fallback is included to keep the experience functional across devices.

• The scroll-jacked 3D rotation and parallax animations are built using GPU-accelerated transforms and a requestAnimationFrame loop to keep motion smooth on capable hardware
• Mobile fallback layouts adapt the masonry grid and simplify animation for smaller viewports without removing core content
• All animations are driven by scroll position rather than autoplay, giving visitors direct control over pacing

How this template helps you convert

Forge is structured as a click-through portfolio, meaning every visual element pushes toward a single primary destination: the case-study page. Contact is earned, not demanded.

1. The scroll-jacked hero creates a moment of genuine surprise and engagement before the visitor sees a single project card, establishing trust in the designer's craft immediately
2. Every masonry card hover state reveals a "See the Process" call to action, and the fixed gold pill button keeps that path accessible throughout the entire scroll journey
3. The "Let's Make Something" prompt appears only after the visitor has absorbed all three masonry clusters and all three manifesto interstitials, making the contact ask feel natural rather than premature

Other information about this template

Forge suits designers who want a portfolio landing page that functions as a positioning statement, not just a project archive. A few additional details worth knowing before you build.

• The template includes a Pattern 4 Superhuman footer containing social links and a copyright line, with no additional navigation or promotional elements
• Project credibility is communicated through card metadata, client name, year, and material, rather than written testimonials or third-party badges
• The manifesto creative direction replaces an About or Bio section entirely, letting design philosophy emerge through the work's own visual rhythm
• This is a single-page layout with no internal navigation links; every click leads outward to case-study pages or to the contact prompt at the bottom

Show more