Overview
Verlume is a premium, production-ready 21-page HTML5 template purpose-built for independent designers, UX/UI studios, frontend engineers, and creative agencies. It blends editorial typography, a live Three.js 3D WebGL interactive background, and a rigorously organized CSS design token system to create a portfolio experience that feels as refined as the work it showcases.
Every page ships with fully semantic HTML5 markup, WCAG 2.1 AA-compliant accessibility patterns, complete meta SEO tags (Open Graph, Twitter Card, Schema.org JSON-LD), and a single-file configuration layer for switching between Demo mode and a real backend — with zero build tools required.
✦ Key Highlights
- 21 fully implemented HTML pages — 5 distinct homepage concepts + 16 inner pages
- Three.js 3D WebGL ambient background with interactive geometric sculptures (chrome knot, geometric star)
- 5-file CSS design token architecture — one edit changes the entire color palette
- Vanilla JavaScript only — no React, no Vue, no framework lock-in
- Demo → Live backend switch via a single config flag in
assets/js/config.js - Bootstrap 5.3.8 + Bootstrap Icons 1.13.1 — pinned, locally self-hosted, zero CDN calls
- Self-hosted WOFF2 fonts — Plus Jakarta Sans, Inter, JetBrains Mono (all OFL licensed)
- Zero runtime dependencies — drop files on any static host and open in a browser
- Programmatic booking calendar with timezone-aware slot conversion
- Client Support & Help Desk page with SLA matrix and ticket submission form
- Genuine downloadable resources — real PDF, HTML, Markdown, and CSV files included
- Full documentation with customization guides included in
/documentation/index.html
✦ What Makes Verlume Different
Most portfolio templates give you a single homepage and a few inner pages. Verlume gives you five complete homepage architectures — each with a different creative identity — so you can choose the studio persona that fits your practice without rebuilding from scratch.
The template is engineered the way a design system would be. Colors, spacing, shadows, and typography all live in tokens.css as CSS custom properties. Swap the five core palette variables and the entire 21-page template repaints itself. The 3D WebGL background responds to mouse movement and scroll velocity, adding a layer of spatial depth that elevates every page.
✦ 21 Pages — Complete List
Homepage Concepts (01 – 05)
| # | File | Concept & Key Features |
|---|---|---|
| 01 | index.html |
Classic Studio — Editorial hero with floating UI cards, interactive 3D chrome knot sculpture, live demo stats, Orbit & Forma case study showcases, core services strip, 4-step process timeline, and client testimonial Swiper slider |
| 02 | index-2.html |
Product & Systems Lab — Bento grid architecture, interactive design system blueprint, CSS token telemetry bar, token matrix explorer, and 4-week design engineering sprint model |
| 03 | index-3.html |
Editorial Monograph & Archive — Typographic monograph masthead, numbered chronological project ledger, curated exhibition archive, and design philosophy essays |
| 04 | index-4.html |
Venture & Startup Partner — Venture-focused studio layout, founder ROI metrics & KPIs, before/after redesign comparison panels, and high-velocity sprint packages |
| 05 | index-5.html |
Spatial 3D & Creative Tech Lab — Centered Three.js WebGL stage, interactive geometric star sculpture, open-source developer starter kits, tech stack radar, creative engineering showcase |
Inner Pages (06 – 21)
| # | File | Purpose |
|---|---|---|
| 06 | about.html |
Studio story, designer narrative, career timeline, 6-card expertise grid, tools & values |
| 07 | services.html |
3 service offerings with full deliverables breakdown, 4-phase framework, 8-point quality checklist, service FAQ |
| 08 | work.html |
Filterable portfolio grid (All / SaaS / Web / Mobile / Systems), 6 case studies, preview modals |
| 09 | project-details.html |
Full Orbit case study — challenge narrative, UX research, wireframe comparisons, design token palette, multi-device gallery |
| 10 | pricing.html |
3 transparent packages (Sprint $950 / Retainer $2,400 / Studio $1,800), preselection links, comparison table, FAQ |
| 11 | journal.html |
Editorial masthead, featured article, live instant search, category filters, 6 article cards, newsletter form |
| 12 | contact.html |
Project inquiry form with URL parameter preselection, live character counter, Demo/Live toggle, privacy modal |
| 13 | service-details.html |
UI/UX deep dive — scope strip, deliverables, 4-phase timeline, wireframe-to-UI comparison panels |
| 14 | process.html |
5-phase engagement model (Discover → Define → Design → Deliver → Launch), client/studio responsibility matrix |
| 15 | resume.html |
Professional bio, functional PDF resume download, experience timeline, education, core capabilities |
| 16 | testimonials.html |
Featured client spotlight quote, 6 feedback cards with avatar initials, studio collaboration principles |
| 17 | article-details.html |
Long-form editorial — sticky TOC, reading time, form UX comparison (Cluttered vs Clear), pull quote, share links |
| 18 | resources.html |
Featured toolkit, instant search, category filter, 6 resource cards, genuine local downloads (.pdf / .html / .md / .csv) |
| 19 | faq.html |
Live text search, topic filter buttons, 12 expandable accordion questions across 4 categories, empty-state reset |
| 20 | book-call.html |
Programmatic calendar, month navigation, timezone-consistent slot conversion, appointment summary, Demo/Live booking form |
| 21 | support.html |
Client Support & Help Desk — 4 support channels, ticket form with urgency levels, SLA response matrix, support FAQ accordion |
✦ Technology Stack
| Technology | Version | Role |
|---|---|---|
| HTML5 | — | Semantic page structure (ARIA landmarks, roles, labels) |
| CSS3 Custom Properties | — | Design token system via tokens.css |
| Vanilla JavaScript (ES6+) | — | Filters, search, forms, calendar, modals, cursor, loader |
| Three.js | r186 | 3D WebGL ambient background & interactive sculptures |
| Bootstrap | 5.3.8 | Grid, dropdowns, offcanvas, accordion, modals |
| Bootstrap Icons | 1.13.1 | Icon system (2,000+ SVG icons) |
| Swiper | 14.2.0 | Touch-friendly testimonial & showcase carousels |
| Plus Jakarta Sans | Latest | Primary display / UI font (OFL) |
| Inter | Latest | Secondary editorial body font (OFL) |
| JetBrains Mono | Latest | Code / monospace font (OFL) |
All libraries are 100% locally self-hosted — no Google Fonts calls, no CDN dependencies, no external tracking pixels.
Frameworks & Libraries 1
Languages & Syntaxes 3
Developer Workflow 1
Supported browsers
Find more items like this
Verlume Creative Portfolio & Product Design Studio HTML Template
- From
Earn 5% back in Wrapmarket credit from this purchase
Use this item in one end product for personal or business projects and client work.
- Quality reviewed by Wrapmarket
- Instant access to downloads
- 14-day refund eligibility
- 6-month support period included
Verified customer feedback
Customer reviews
Only customers with qualifying access to this item can leave a review.
More from Mixing Theme
- Made with Bootstrap
- About, services, portfolio, and blog pages
- Swiper slider with touch controls
- Made with Bootstrap
- Projects, about, services, and blog pages
- Swiper slider with touch controls
- Pure static HTML 100+ hand-authored pages
- Bootstrap 5 & Vanilla JS, No Build Tools
- Dark & Light Mode
- 2 layouts included
- Made with Bootstrap
- Portfolio, pricing, testimonials, and FAQ pages