America/New_York
About
Work
Blog
Services
/
Start a Project
Work
/
Start a Project
Available nowChat with me
Projects

Maison Lumière – Luminous Makeup Artistry

Maison Lumière – Luminous Makeup Artistry
Avatar
May 26, 2026

Concept snapshot

Record date: May 26, 2026. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.

Overview

Maison Lumière is a luxury makeup artistry brand experience built around the fictional artist Élodie Rivière. The site treats makeup not as a service menu but as an art form — luminous, skin-first, and designed for life's defining moments. Every section is crafted with editorial restraint: warm porcelain surfaces, soft gold accents, and typography that feels at home in a fashion quarterly. The experience spans three pages — home, portfolio, and booking — each sharing a cohesive visual language of scroll-driven reveals, film-grain texture, and considered motion. It is hand-built with vanilla HTML, CSS, and JavaScript, using GSAP for production-grade animation and Lenis for smooth scrolling. Live Demo: https://maisonlumiere.apalaugonzalez.com/

Key Features

Triptych Hero

  • Three-Panel immersive hero — Bridal, Editorial, and Red Carpet panels with full-bleed photography, dark scrims, and hover-driven label reveals
  • Shared headline strip — A centered typographic layer that unifies the triptych with a split-text word-reveal animation on load
  • Scroll-down indicator — Animated line with "Scroll" label, fade-out on first scroll
  • Mobile fallback — Full-viewport single image with gradient scrim for touch devices and no-js environments

Visual Atmosphere

  • Film Grain Overlay — SVG-filtered animated noise texture applied site-wide for an editorial print feel
  • Scroll Progress Bar — Thin top-edge indicator that tracks page scroll position
  • Magnetic Buttons — Primary CTA buttons that subtly follow the cursor within a radius using damped transforms
  • Porcelain & Ink Palette — Warm neutrals (#F8F2EC porcelain, #2B2320 ink) with blush (#D8A7A0) and gold (#BFA15E) accents
  • Decorative Floral SVG — Parallax-drifting botanical illustration in the statement section

Services & Portfolio

  • Horizontal-Scroll Services — Six service cards (Bridal, Editorial, Red Carpet, Special Occasion, Groups, Lessons) in a scrollable row with image-to-text hover reveals
  • Portfolio Teaser Grid — Asymmetric masonry-style grid on the homepage linking to the full portfolio
  • Full Portfolio Gallery — Dedicated portfolio page with category filtering (All, Bridal, Editorial, Red Carpet, Occasion, Portrait, BTS) and staggered image reveals
  • Lightbox Integration — Full-screen image viewing with keyboard navigation

The Experience Timeline

  • Four-Step Journey — Consultation, Trial, The Day, and The Memory — presented with numbered steps and scroll-triggered fade-in animations
  • Atmospheric Process Image — Warm-lit vanity photograph with parallax drift

Promise & Social Proof

  • Animated Counters — Stats band (12 years, 600+ events, 40 cities, 5.0 rating) with count-up animations triggered on scroll
  • Testimonial Slider — Rotating client quotes with prev/next navigation and avatar portraits
  • Journal Teaser — Editorial-style blog cards with category tags, dates, and excerpt previews

Booking Experience

  • Dedicated Booking Page — Service selector with visual cards, date and time picker, location field, and notes textarea
  • Contact Form — Name, email, phone, and message with validation and success state
  • FAQ Accordion — Expandable answers to common booking questions

Navigation & Mobile

  • Smart Header — Transparent over dark hero, solid on scroll, with wordmark and monogram variants
  • Hamburger Menu — Full-screen overlay with staggered link reveals
  • Mobile Tab Bar — Persistent bottom navigation with animated highlight indicator (Home, Work, Book, Contact)
  • Skip Link — Accessibility-first bypass to main content

Technology Stack

Core

  • Vanilla HTML5 — Semantic structure with ARIA labels, roles, and skip-link accessibility
  • Vanilla CSS3 — Custom properties for design tokens, clip-path animations, CSS grids, and responsive breakpoints
  • Vanilla JavaScript (ES6+) — Module-pattern IIFE with event delegation and RAF-driven animations

Animation & Interaction

  • GSAP + ScrollTrigger — Production-grade scroll-driven animations: section reveals, parallax, split-text word animations, staggered grids, and promise-band counter triggers
  • Lenis — Smooth scroll library with custom easing for a fluid, weighted feel
  • CSS Animations & Transitions — Keyframe-driven hero interactions, button hover states, and mobile menu transitions

Design

  • Custom Design Tokens — CSS variables for a warm beauty-brand palette (porcelain, ivory, champagne, blush, gold, espresso)
  • Responsive Breakpoints — Mobile-first with dedicated tablet and desktop layouts
  • Typography System — Fraunces (display), Cormorant Garamond (accent), Mulish (body) loaded from Google Fonts
  • ** prefers-reduced-motion** — Respects system motion preferences with instant visibility fallbacks

Technical Highlights

Performance Optimizations

  • Image Optimization — All photography delivered in WebP format with loading="lazy" and decoding="async"
  • Fetch Priority — Hero triptych images marked with fetchpriority="high" for fastest LCP
  • GPU-Accelerated Animations — will-change hints on transform-heavy elements
  • No Framework Overhead — Direct DOM manipulation without virtual DOM reconciliation

Animation Architecture

  • GSAP ScrollTrigger Defaults — Consistent trigger start points (top 82%) and toggle actions across all scroll-driven effects
  • Split-Text Word Reveal — Custom splitWords() helper that wraps each word in spans for staggered opacity/translateY animations
  • RAF-Based Magnetic Buttons — Custom damped cursor-follower using requestAnimationFrame and linear interpolation
  • Parallax Layers — data-parallax attributes drive GSAP yPercent offsets tied to scroll progress

Accessibility Considerations

  • ARIA Labels — Navigation, mobile menu, sliders, and interactive elements properly labeled
  • Keyboard Navigation — Lightbox supports Escape key; booking form is fully keyboard accessible
  • Focus Management — Mobile menu and booking modal handle focus trapping
  • Semantic HTML — Section elements with heading hierarchy, article tags for cards and journal posts
  • Reduced Motion — prefers-reduced-motion: reduce instantly reveals all animated content

Project Structure

maison_lumiere/
├── index.html                    # Homepage with all sections
├── portfolio.html                # Full portfolio gallery with filtering
├── booking.html                  # Booking form + contact + FAQ
├── 404.html                      # Branded error page
├── sw.js                         # Service worker for PWA
├── manifest.webmanifest          # PWA manifest
├── assets/
│   ├── css/
│   │   ├── tokens.css            # Design tokens + CSS reset
│   │   ├── base.css              # Layout, typography, utilities
│   │   ├── components.css        # Reusable UI components
│   │   └── pages.css             # Page-specific styles
│   ├── js/
│   │   ├── animations.js         # GSAP ScrollTrigger reveals & scenes
│   │   ├── nav.js                # Header, mobile menu, tab bar
│   │   ├── lenis-init.js         # Smooth scroll initialization
│   │   ├── gallery.js            # Portfolio filtering & lightbox
│   │   └── booking.js            # Booking form validation & interactions
│   └── images/                   # WebP photography assets
└── favicon.svg                   # Brand mark

Challenges and Solutions

Challenge: Triptych Hero on Multiple Viewport Sizes

Solution: Implemented a responsive triptych that collapses gracefully. On desktop, three equal panels span the viewport with shared headline overlay. On mobile, a single full-bleed fallback image replaces the triptych to maintain performance and legibility. The headline strip remains absolute-positioned and centered across both modes.

Challenge: Consistent Editorial Aesthetic Across Three Pages

Solution: Established a strict design-token system in tokens.css shared by all pages. Every surface, ink tone, and accent color is referenced via CSS custom properties, ensuring the porcelain-and-gold palette remains consistent whether viewing the homepage hero or the booking form.

Challenge: Scroll-Driven Animations Without Framework Overhead

Solution: Used GSAP with ScrollTrigger directly (not via a framework wrapper) to keep bundle size minimal. All animations are registered in a single animations.js file with reusable patterns for data-reveal, data-split, and data-parallax attributes, making it easy to add new animated sections without duplicating logic.

Challenge: Portfolio Filtering with Staggered Reveals

Solution: The gallery page uses a category-filtering system that toggles visibility classes on items, then re-triggers GSAP stagger animations whenever the filter changes. This creates a polished "shuffle" effect without requiring a masonry library.

Key Learnings

  • Editorial Beauty Design: Learned to craft a visual language suitable for luxury beauty brands — restrained typography, warm neutral palettes, and generous whitespace that lets photography breathe
  • GSAP ScrollTrigger Patterns: Built reusable animation primitives (data-reveal, data-split, data-parallax) that scale across an entire multi-page site
  • Multi-Page Static Architecture: Managed shared components (header, footer, nav) across three HTML files with consistent CSS and JS, understanding the trade-offs of static sites versus SPAs
  • Performance for Visual-Heavy Sites: Optimized a photography-rich experience through WebP conversion, lazy loading, and fetch-priority hints to keep LCP fast despite large assets
  • PWA Fundamentals: Implemented a service worker and web manifest for installability, understanding the baseline requirements for offline-ready static sites

Live Demo

Experience the full editorial journey — from the triptych hero and scroll-driven statement to the portfolio gallery, booking experience, and mobile tab navigation: View Live Project

Outcome

Maison Lumière demonstrates the ability to craft a high-end, multi-page brand experience for the luxury beauty industry using fundamental web technologies. It showcases skills in:
  • Editorial Visual Design — A warm, restrained aesthetic befitting a high-end makeup artist
  • Scroll-Driven Animation — GSAP + ScrollTrigger for sophisticated reveal choreography
  • Performance Optimization — WebP images, lazy loading, and minimal JavaScript overhead
  • Accessibility — Reduced-motion support, keyboard navigation, and semantic HTML
  • Multi-Page Static Architecture — Clean separation of concerns across homepage, portfolio, and booking pages
The site serves as a portfolio piece highlighting attention to craft, from the porcelain-hued color palette and film-grain texture down to the magnetic micro-interactions on every CTA.