3D & Product Design Portfolio Portfolio Website Template
Weave is a bento grid landing page template built for textile designers who work across print, weaving, and digital mediums. It uses a dark iridescent color system, a full-screen video hero, and a filterable portfolio grid to present collections, process, and commissions in one immersive, lead-generating page.
by Rocket studio
Quick Summary
Weave is a single-page portfolio landing page template designed for textile designers working across fashion, interiors, and licensing markets. It combines a full-screen video background, a filterable bento grid, and a slide-in commission form to translate craft into commissions. Every cell, color, and interaction is built to present textile work at its most compelling.
Who This Template Is For
This template is born for designers who work across multiple textile mediums and need a portfolio website that can hold the full weight of their practice. It speaks directly to professionals whose work moves between Photoshop repeats, handwoven sampling, and commercial print production.
- Freelance textile designers targeting creative directors at fashion houses and interior brands
- Designers whose portfolio spans print, embroidery, weaving, and digital pattern design
- Textile practitioners ready to attract licensing projects and studio commissions
What Problem This Template Solves
A textile design portfolio has to do more than display images. Potential clients need to evaluate collections, understand process, and feel confident enough to commission work. Generic gallery websites cannot translate the richness of textile design into a compelling case for hire.
- Static grids flatten texture and strip out the layering of craft that makes design work legible
- No clear commission path means browsers leave without becoming clients
- Mixing print runs, garments, accessories, and embroidery work into one unsorted gallery loses the story
What You Get With This Template
This template gives you a complete, lead-generating portfolio landing page structured around your collections and your process. Every section has a specific function, from attracting the eye to capturing the commission.
- A full-screen video hero with pearl-white headline type and a gentle opacity pulse animation
- A filterable bento grid portfolio organized by collection, technique, or client type
- A three-step slide-in commission form and an email-gated lookbook download row
Feature List
This template is built around six core design and conversion capabilities that work together to create a portfolio website worthy of serious creative industry clients.
Full-Screen Video Hero with Animated Type
The hero opens with a macro-lens video that glides across warp and weft, pulling back to reveal a full repeat pattern before dissolving into design software. A single pearl-white headline pulses softly with an opacity animation, setting a cinematic tone before the visitor scrolls.
Filterable Bento Grid Portfolio
The portfolio grid reshuffles dynamically by collection, technique, or client category using minimal pill-shaped filter controls. Cell sizes vary: small cells hold tight texture crops, wide cells expand into full mood boards, and tall cells stack process shots from sketches through to styled product photography.
Iridescent Hover and Interaction System
Every grid cell triggers an iridescent border bloom and a micro-zoom on hover. The shifting magenta accent color fires on active states and interactive moments, giving the website a sense of fabric catching light at a new angle and reinforcing the designer's visual identity.
Slide-In Commission Panel
A floating magenta button labeled "Commission a Pattern" docks at the bottom right and pulses after the visitor scrolls past three collections. Clicking opens a three-step form covering project type, a moodboard upload field with a description textarea, and timeline with budget dropdowns.
Full-Width Parallax Section
Midway through the page, a full-width cell breaks the grid with a slow parallax shot of a finished interior using the designer's fabric. This grounds the close-up textile work in a real, inhabited space and builds commercial credibility.
Email-Gated Lookbook Capture
The final bento row embeds an email capture form that gates a high-resolution PDF lookbook. This secondary path catches visitors who want to discover more before committing to a commission, allowing the designer to store leads and follow up.
Page Sections Overview
| Section | Purpose |
|---|---|
| Full-Screen Hero | Opens with video and animated headline |
| Bento Grid Portfolio | Filterable collection and process display |
| Process Stack Cells | Shows sketch to styled product journey |
| Full-Width Parallax | Places fabric in a real interior setting |
| Lookbook Capture Row | Email gate for high-resolution PDF download |
| Minimal Footer | Clean close with essential identity links |
Design & Branding System
The visual identity follows a Lens and Frame theme built on an AI Iridescent color system. Deep loom black dominates backgrounds, liquid pearl handles all body typography, holographic lavender washes over card borders and section dividers, and shifting magenta fires on every interactive state. Typography pairs Manrope for headings with JetBrains Mono for labels and captions, creating a contrast between craft warmth and digital precision that reflects the designer's dual practice.
- Colors: deep loom black (#0D0D12), holographic lavender (#C4B5F7), liquid pearl (#E8F4F0), shifting magenta (#D946A8)
- Typography: Manrope headings paired with JetBrains Mono for data labels and process captions
- Interaction: iridescent border bloom, micro-zoom on hover, magenta pulse on floating call-to-action button
Mobile & Speed Optimization
The template is built desktop-first to serve creative directors reviewing work on large studio screens, with a mobile fallback that preserves the core portfolio experience. All animations use CSS transforms only, and scroll reveals are triggered via Intersection Observer to keep motion smooth without heavy script overhead.
- Desktop-first layout with a responsive mobile fallback for on-the-go browsing
- CSS transform-only animations to keep interactions smooth across devices
- Intersection Observer scroll reveals to load content progressively as visitors explore
How This Template Helps You Convert
The page is structured as a lead-generation journey. Each section moves the visitor from discovery through trust to action, using two distinct conversion paths suited to different buyer readiness levels.
- The persistent floating "Commission a Pattern" button pulses into view after the visitor has scrolled through three collections, catching them at peak engagement with a three-step form covering project type, description, and budget.
- The email-gated lookbook at the bottom of the page creates a secondary path for visitors who need more time, allowing the designer to build a contact list and follow up with warm leads.
Other Information About This Template
This template is well suited for a textile design practice that works across commercial and creative projects. Iridescent materials are an increasingly prominent trend in textile design, and presenting the underlying color palette clearly helps art directors understand technical complexity. Designers like Lena Kolb use weaving, dyeing, and image making to reflect on fantasy and memory, while Katrina Majkut uses embroidery as a painting medium to challenge assumptions through artwork. Balazs Viola brings deep experience in pattern placement on garments, and Saskia Wassing uses layering and stitching to build a personal design voice. These practices show the range of mediums and identity work that a strong textile design portfolio can hold.
- A good textile design portfolio includes both a portfolio website and a physical book; art directors expect to evaluate both during review
- Organizing work into three to five collections with a clear story behind each set helps clients understand the designer's range and identity
- Including color palettes, swatches, and mock-ups of final products on garments or home textiles strengthens commercial credibility
- Presenting commercial work alongside practice-led projects shows that the designer can translate creativity into marketable, functional outcomes
- Using a website builder that supports high-resolution imagery, video backgrounds, and zoomable pattern views helps clients see textile details accurately
- Showcasing sketches and design process alongside final work demonstrates thinking, not just output, which is what serious company clients and art directors want to see




Theme
Lens & Frame
Creative direction
Immersive Visual
Color system
AI Iridescent
Direction
Lead Generation
Page Sections
Full-screen Video Hero with Pulse Animation
Filterable Bento Grid Portfolio
Iridescent Hover Interaction System
Three-step Slide-in Commission Form
Full-width Parallax Interior Shot
Email-gated Lookbook Download
Related questions
How to make a portfolio for a textile designer?
What does a good design portfolio look like?
How to make a portfolio for a fashion designer?
How to make a portfolio for NIFT?