Champagne Carbon — The Obsidian Laboratory

Digital Repositioning Strategy · Champagne Carbon

The Obsidian
Laboratory

From niche high-tech to elite luxury icon. A complete digital repositioning blueprint for Wix Studio.

Wix Studio + Custom Code
Ultra-High-Net-Worth Individuals
Dom Pérignon–Level Perception
Scroll
Phase 01 — Deep Site Audit

A Technical Marvel
Trapped in a Template

The current site communicates quality, but never rarity. Here is the full structural diagnosis.

▸ Current Structure — What Exists

champagnecarbon.com
├── /accueil Age gate popup
├── /maison — Heritage Blog format
├── /univers — Universe Undefined purpose
├── /cuvees — Collections SKU catalog
│  ├── Les Vintages
│  ├── Les Rosés
│  └── Limited Editions
├── /fibre-carbon — Products No narrative
├── /bugatti — Collaboration Buried. Not dominant.
│  ├── EB.01 · EB.02 · EB.03
├── /cercle — Social Empty shell
├── /contact Basic form
└── shop.champagnecarbon.com Separate domain

◆ Proposed Structure — The Obsidian Laboratory

champagnecarbon.com
├── [Entry] Carbon Weave Age Reveal WebGL
├── / — The Monolith (Homepage) Cinematic
├── /the-house — Brand Story Scroll narrative
├── /craftsmanship — Carbon Science 3D exploded view
├── /vault — Collections Horizontal gallery
│  ├── [Vintage Archive]
│  ├── [Rosé Editions]
│  └── [Limited Drops]
├── /alliance — Bugatti Hero chapter
├── /black-card — Private Access Gated vault
└── [Persistent] Concierge C-Icon WhatsApp/Signal
3sec
To establish authority — or lose them
0
UHNWIs who fill contact forms
1
Collaboration that should dominate the entire site
∞
Value of an age gate that tells the brand story
Phase 02 — Luxury Perception Gap

Why It Doesn't
Feel Ultra-Premium

Six specific failures that reduce a collector-grade object to a mid-tier brand experience.

01
Typography
No Authority
Tech-startup sans-serif lacks the weight and heritage required by the audience. It reads "agency portfolio," not "1927 champagne house."
Fix: Cinzel display + Cormorant serif body. Viewport-unit sizing (8–12vw headlines). Tight tracking with surgical letter-spacing.
02
Whitespace
Crowded Sections
True luxury is the confidence to waste space. The current site fears the void — a critical signal of budget-level design thinking.
Fix: 80–120px section padding. Kill 40% of visible content. Let elements breathe with 2–3x current margins.
03
Imagery
Commercial Lighting
Clean but flat. No drama. No mystery. No chiaroscuro. The carbon fiber texture — the entire USP — looks like a flat photo, not a tactile surface.
Fix: Rembrandt-style raking light at 15°. Single-source highlights on carbon weave. Deep shadow dominance at 80%+.
04
Motion
Binary On/Off
Animations either snap on or snap off. Elite digital experiences require fluidity — easing functions that mimic physical inertia, weight, and gravity.
Fix: GSAP + Lenis smooth scroll. Parallax depth at 3 layers. Power3 easing curves. Nothing under 0.8s duration.
05
Bugatti Collaboration
Buried as a Footnote
The Bugatti partnership is the brand's halo effect — yet it sits buried in sub-menus. This is the equivalent of Ferrari hiding the Prancing Horse.
Fix: Bugatti Alliance becomes the second scroll section on the homepage — before any product — functioning as an immediate authority transfer.
06
Conversion Path
Add to Cart Mentality
UHNWIs do not shop from carts. The current flow treats a €3,000 bottle the same as a €30 Shopify product. This is a category error that destroys perceived value.
Fix: Replace "Add to Cart" with "Secure This Edition." Private concierge icon. Allocation-request system for limited releases.
The carbon fiber bottle — the brand's entire differentiator — is shown as a flat thumbnail. It should be a tactile, rotatable 3D experience that makes the user feel the weave before they ever touch the bottle.
Phase 04 — Creative Direction

The Obsidian
Doctrine

Not lifestyle. Not celebration. Control. Precision. Power. The science of something that cannot be replicated.

Color System — The Obsidian Palette

Obsidian
#060608
Graphite
#1A1A1C
Graphite Mid
#2A2A2D
Raw Gold
#C9A962
Ivory White
#F4F2EE
Copper (Rosé accent)
#9A6A4A

Typography System

Cinzel
Display · Headlines · Names
Carbon Edition
Cormorant Garamond
Editorial · Story · Voice
Built differently. Understood by few.
DM Sans 300
Body · UI · Navigation
Each bottle undergoes a multi-stage construction process. Precision is not optional. Carbon fiber replaces convention. The result holds more than champagne — it holds attention.
DM Sans 400
Labels · Microcopy · Status
Limited Release · Private Allocation · Engineered

Competitor Design Intelligence

Dom Pérignon
"Atmospheric Silence"
  • Full-bleed hero with near-zero ambient light
  • Vintage as the product, not the SKU
  • Collaborations treated as art commissions
  • Typography dominates at 12vw+ scale
  • Rule: Remove 40% of visible content. Let it breathe.
Krug
"Multi-Sensory Narrative"
  • Krug iD: each bottle has a traceable story
  • Cinematographic hero with scored audio
  • Cellar photography at extreme macro detail
  • The "Wall of 400 Wines" = proof of complexity
  • Rule: Every product must have a story layer, not a spec sheet.
Bugatti
"Extreme Macro Detail"
  • Carbon weave photographed until it looks like geology
  • Dark, moody lighting with raking angles
  • Configuration experience = buyer ownership feeling
  • Every detail justified by engineering logic
  • Rule: Show the weave until it looks like DNA. Then go deeper.
Phase 05 — UX Architecture

The New
Site Structure

Not a website. A vault. A private showroom. An experience-first architecture built for collectors, not browsers.

Entry The Veil — Age Verification
WebGL Carbon Weave
User moves their cursor to "unravel" the weave and reveal the brand. The age gate becomes the first impression.
WebGL + Custom JS
The Manifesto Line
Single statement visible before confirmation. "Carbon does not follow codes. Carbon sets them."
Brand Statement
Entry Confirmation
Not a checkbox. A deliberate button: "Enter the Laboratory." Psychological commitment before access.
Psychological Trigger
Tier 1 The Monolith — Homepage
Section 1 — Hero
Cinematic 4K video loop. Single headline at 10vw. No navigation visible. Full screen.
0–3 seconds = authority
Section 2 — The Alliance
Bugatti partnership is the SECOND section — before any product. Maximum authority transfer. "When precision meets precision."
Status Transfer
Section 3 — Carbon Reveal
Scroll-triggered macro sequence. The weave emerges from darkness. Light sweeps across the fiber. GSAP timeline.
Scroll Storytelling
Section 4 — Vault Preview
Horizontal scroll gallery. 4 hero editions at 60vw each. Museum-grade spacing. No grid clutter.
Collection Architecture
Section 5 — The Black Card
Private Access CTA. No button. Just a minimal line: "Access is limited. Allocation by request." One action: Enter Private Collection.
Conversion
Tier 2 Core Pages
The House
Brand story as non-linear scroll narrative. Not a timeline. Not a blog. A cinematic assertion of values.
Authority + Heritage
The Vault
Collections as museum pieces. Horizontal scroll. Each bottle numbered. Edition scarcity visible. No catalog grid.
Collector Psychology
Product Pages
Full-screen hero → name + statement → 360° bottle → craft blocks → scarcity signal → acquisition CTA. No specs above the fold.
Ownership Desire
The Alliance
Bugatti dedicated chapter. Treated as a campaign, not a partnership page. "The Millisecond Theory" — shared values story.
Halo Effect
Black Card Portal
Invite-only vault. Gated via private code or NFT wallet. Library releases not visible to public. Direct sommelier access.
Tiered Exclusivity
Phase 06 — Interaction Design

The Elite
Experience Layer

Every scroll must feel intentional. Every hover must feel inevitable. This is where competitors cannot follow without the same technical commitment.

Carbon Edition No. 7
Hover to experience the parallax depth layer
01
Carbon Weave Entry
Age Verification Screen
SVG mask of carbon weave dissolves as the mouse follows the pattern. The brand reveals itself to those who seek it — not through a standard popup, but through participation.
The brand rewards curiosity. Access feels earned, not given.
SCROLL ↓
02
Kinetic Scroll (Lenis)
All Pages
Lenis smooth scroll gives the entire site a heavy, physical weight. Elements don't snap — they float into position with varying inertia, mirroring the engineering precision of a Bugatti door closing.
Weight signals value. A site that moves with inertia feels expensive.
03
360° Bottle Viewer
All Product Pages
WebGL/Three.js renders a high-fidelity 3D carbon bottle that rotates on scroll or drag. Light dances across the weave pattern in real-time — providing digital tactile experience that static images cannot replicate.
Tactile exploration triggers the psychology of ownership. You feel like you're already holding it.
ACQUIRE
04
Magnetic Button Pull
All Primary CTAs
Buttons have gravitational attraction — they pull toward the cursor on approach. The "Acquire" button doesn't just change color; it stretches and deforms toward the cursor, signaling desire through physics.
Attraction = desire. The button reaching toward you mirrors the subconscious "wanting to buy."
VINTAGE 2018
05
Parallax 2.0 Layers
Homepage + Brand Story
Three-layer parallax depth (0.3 / 0.6 / 1.0 speed multipliers). Background, product, and text move at different rates, creating perceived 3D depth from a flat screen. GSAP ScrollTrigger with scrub enabled.
Depth signals quality. The brain processes layered environments as more sophisticated and valuable.
We craft exceptional champagne × BUILT. NOT BOTTLED.
06
Scroll Text Reveal
All Story Sections
Copy reveals line-by-line as the user scrolls, with staggered delays. Each line is a statement, not a paragraph. Text emerges from below with a power3.out ease — like a press conference, not a blog post.
Forced pacing builds anticipation. The user earns each line, which increases retention and perceived depth.
Phase 07 — Wix Studio Execution

Build Blueprint:
Native vs. Custom

Wix Studio is the foundation. Custom code is the architecture. Know exactly where each layer lives before writing a single element.

◆ Built Natively in Wix Studio
⊞
Section Grid (12-col, 40px gutter)
Foundation for all editorial layouts. Enables "broken" asymmetric compositions where images overlap text with mathematical precision.
⊃
CMS Collections
Powers Vintages, Collaborations, Editions. Fields: edition number, release size, story content, production batch, media assets.
≡
Wix Members Area
Basic tier gating for the Black Card portal. Upgraded with Velo API for advanced logic and crypto wallet integration.
⊡
Wix Stores (Unified)
Migrate from WooCommerce subdomain. Unify commerce + brand under one domain. Critical for UHNWI journey continuity.
◎
Responsive Breakpoints
Custom layouts at 1440px, 1024px, 768px, 375px. Never rely on auto-responsiveness for luxury content — every breakpoint is a deliberate design decision.
◆ Custom Code (The Elite Layer)
⟨/⟩
GSAP + ScrollTrigger
Timeline-based scroll animations. Text stagger reveals. Parallax layer depth. Pinned section storytelling where content scrolls, bottle stays fixed.
◑
Lenis Smooth Scroll
Replaces native browser scroll. Duration: 1.2s. Easing: exponential out. Wheel multiplier: 0.8. Creates the "heavy luxury" weight sensation.
⬡
Three.js Bottle Viewer
WebGL 3D carbon bottle on product pages. Responds to scroll position. Real-time light simulation on weave texture. Fallback to high-res video on low-end devices.
⊛
WebGL Age Gate (GLSL)
Carbon weave fragment shader. Mouse position drives weave distortion. Cursor coordinates mapped to UV displacement on entry screen.
⊕
Velo Private Vault Logic
Backend tiered access. Member status gating. Optional: Web3 wallet connection via custom API for crypto-native buyers. Concierge chat API integration.
// gsap-init.js — Core scroll animation setup
import Lenis from 'lenis';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Luxury inertia scroll — the weight that signals premium
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
  wheelMultiplier: 0.8,
});

// Three-layer parallax: background (0.3) · mid (0.6) · text (1.0)
gsap.to('.layer-bg', { yPercent: 30, ease: 'none',
  scrollTrigger: { trigger: '.hero', scrub: true } });

// Text reveal: line-by-line stagger on scroll entry
gsap.from('.reveal-line', { y: 50, opacity: 0, duration: 1,
  stagger: 0.12, ease: 'power3.out',
  scrollTrigger: { trigger: '.manifesto', start: 'top 80%' } });

// Bottle pin: product stays fixed while story scrolls past
ScrollTrigger.create({ trigger: '.product-story',
  pin: '.bottle-3d', start: 'top top', end: 'bottom bottom', scrub: true });

Phase 08 — Performance Strategy

Asset TypeOptimization MethodTargetPriority
Hero VideoAV1 codec, adaptive bitrate. 4K on 25Mbps+. Fallback: WebP poster image with GSAP reveal < 5MB loop
Critical
Product ImagesWebP format. Responsive srcset at 400/800/1600px. Lazy load all below-fold imagery < 300KB each
Critical
GSAP AnimationsDefer execution until hero is interactive. Use will-change: transform on animated elements only. RAF-based ticker via Lenis < 16ms frame
Critical
3D Bottle (WebGL)Deferred load after first scroll. LOD switching at device capability. Canvas fallback to 360° video strip on mobile Load after LCP
High
FontsPreload Cinzel + Cormorant via <link rel="preload">. Font-display: swap. Subset to Latin character ranges only < 80KB total
Critical
95+
Core Web Vitals target
<2s
Time to Interactive
60fps
Animation frame rate
CDN
Wix Global · All static assets
Phase 09 — Content Strategy

The Language
of Controlled Power

Stop explaining. Start asserting. Every word on this site is a deliberate act — not a description, not a pitch, not a justification.

Copy Transformation — Before & After

× Current — Explains Value
"Champagne Carbon is born of a passionate love for innovation and the art of champagne. We combine the finest Chardonnay grapes with advanced carbon fiber technology to create a high-tech luxury product that charms tradition while pushing boundaries."
◆ New — Asserts Value
"Carbon is not packaging.
It is structure.

Borrowed from performance engineering.
Applied where it has never been.

The result does not require explanation."
× Bugatti Section — Current
"A unique collaboration between Champagne Carbon and Bugatti Automobiles, creating a limited edition carbon fiber bottle to celebrate the 110th anniversary of Bugatti."
◆ Bugatti Section — New
"Two disciplines.
One obsession: the millisecond.

The time a Bugatti shifts gear.
The time a cork leaves a bottle.

EB.01. 90% Chardonnay. 10% Bugatti."
× Product Description — Current
"Tasting notes: Fresh notes of white fruit, citrus, and mineral finish with persistent bubbles and elegant complexity."
◆ Product Description — New
"Attack: Precise.
Structure: Mineral.
Heart: Opulent.
Finish: Eternal.

Edition 047 of 250.
This number does not repeat."
01
Short sentences. Always.
Three words carry more authority than thirty. Every sentence that can be cut, must be cut. What remains should feel final — not like part of a longer explanation.
02
Never explain the value.
The moment you justify your price, you've lost. "This bottle is worth €3,000 because..." is not luxury copy. Luxury copy assumes the reader already understands — and respects them for it.
03
Scarcity is factual, not emotional.
Don't say "extremely limited." Say "Edition 047 of 250. This number does not repeat." One is marketing. The other is mathematics.
04
CTAs are not commands. They are invitations.
Replace "Buy Now" with "Acquire." Replace "Learn More" with "Explore." Replace "Add to Cart" with "Secure This Edition." The tone changes the entire transaction psychology.
Phase 10 — Category-Dominating Ideas

Beyond
Competitor Standards

Five features that no luxury champagne brand currently offers. Own them first, and the category definition changes around you.

IDEA 01
The Carbon Origin NFT
Every bottle purchased via the Vault receives a digital twin — a blockchain certificate of authenticity showing: production number, harvest date, disgorgement date, and the specific carbon batch ID used. Tokenized on Ethereum. Appeals directly to the crypto-native elite who value provenance as investment data.
Crypto Audience + Collector Psychology
IDEA 02
The Allocation System
Limited editions — especially Bugatti collaborations — are not available for direct purchase. Users must "Request Allocation." The brand responds within 24 hours with a private offer. This inverts the power dynamic entirely: the buyer is not purchasing, they are applying for access. Scarcity becomes structural, not a marketing claim.
Perceived Rarity + Exclusivity Signaling
IDEA 03
The Carbon Concierge
A persistent, minimal "C" icon fixed to every page. Opens a direct WhatsApp/Signal line to a private sommelier — not a chatbot. For corporate gifting (500+ bottles), event planning, or cellar consultation. An AI agent pre-qualifies intent before seamless handoff to a human brand ambassador. 24/7 presence without sacrificing human touch.
UHNWI Conversion + Corporate Gifting
IDEA 04
Real-Time Provenance Tracker
Each Bugatti edition (EB.01–EB.04) has a dedicated page showing its exact production number, its "Life Map" (harvest → pressing → aging → disgorgement → carbon application → QC → allocation), and a live counter of remaining bottles in the series. Transforms a purchase from consumption into investment.
Collector Mentality + Repeat Acquisition
IDEA 05
Binaural Tasting Experience
Each vintage has a bespoke spatial audio track — designed with a sound artist and calibrated to the profile of that specific wine. Available on the product page and via a QR code inside the box. Designed to be listened to through headphones while drinking. The digital experience extends into the physical ritual. No champagne brand offers this. Krug does audio — but nothing like this.
Multi-Sensory + Press-Worthy Differentiator
IDEA 06
Hidden Vault Releases
Certain ultra-limited editions exist on the site but are accessible only via a private URL shared with existing customers — or via a code embedded inside the physical box. The pages are unlinked from navigation. Search engines are blocked. This is the digital equivalent of a secret menu. For those who know, finding it is part of the experience.
Status Signaling + Word-of-Mouth Among Elites
Execution Roadmap

Built.
Not Bottled.

From vision to deployment — the Obsidian Laboratory in four phases.

Phase A
Foundation
Wix Studio setup · 12-column grid architecture · CMS structure for all collections · Font system integration · Custom code environment (GSAP, Lenis loaded)
Phase B
The Experience
WebGL age gate · Homepage cinematic build (5 scroll sections) · GSAP scroll animations · Three-layer parallax · Bugatti alliance chapter · Lenis smooth scroll calibration
Phase C
The Vault
Collections architecture · Product pages with 360° or Three.js bottle · Scarcity signals · Allocation request system · Black Card gated portal · Concierge "C" icon (WhatsApp integration)
Phase D
Dominance
NFT certificate system · Provenance tracker · Binaural tasting experience · Hidden vault URL system · Performance audit (target 95+ Core Web Vitals) · Launch strategy for crypto-native audiences
The Transformation
DimensionCurrent StateAfter Obsidian Laboratory
Visual ToneCommercial photography, flat lightingCinematic macro-realism, Rembrandt-lit carbon
UX ModelStandard e-commerce product gridImmersive vault — narrative-first journey
TechnologyStandard Wix/WooCommerce splitGSAP + WebGL + Velo hybrid, unified platform
Access ModelPublic, open cartTiered: public → allocation → private vault
Brand Perception"Cool champagne with carbon packaging""A collector-grade engineered object"
Bugatti RoleSub-menu pageHomepage hero · Authority transfer device
Conversion PathAdd to Cart → CheckoutRequest Allocation → Private Concierge
Champagne Carbon · The Obsidian Laboratory
Carbon does not follow codes. Carbon sets them.
Blueprint 2025