The Atelier – Cinematic Barbershop Experience

May 20, 2025

• Lenis Smooth Scroll – Custom-configured smooth scrolling with exponential easing for a fluid, weighted feel
• Scroll-Scrubbed Sections – Multiple sections use IntersectionObserver and RAF-driven progress calculations to animate elements based on viewport position
• Pinned Horizontal Scroll – The "Barbers" section pins to the viewport and translates a horizontal track based on vertical scroll progress
• Ritual Crossfade – Three background frames crossfade with scale transforms as the user scrolls through the ritual steps
• Testimonial Scrubbing – Four testimonials rotate based on scroll position through the testimonials section

• Film Grain Overlay – SVG-based animated noise texture applied site-wide with CSS mix-blend-mode
• Vignette Overlay – Radial gradient darkening the edges of the viewport for a cinematic look
• Custom Cursor – Dual-element cursor (dot + ring) with mix-blend-mode difference, hover states, and contextual labels ("VIEW", "BOOK")
• Brass & Ink Palette – Warm brass (#B68A48) against deep ink (#0A0908) with ivory text for an editorial feel
• Reveal Masks – CSS clip-path animations triggered by IntersectionObserver for dramatic section entrances

• Gallery with Lightbox – 28-image masonry-style grid populated dynamically via JavaScript, with filterable categories (Fades, Beards, Line work) and a full lightbox with keyboard navigation
• Booking Modal – Slide-up modal with form fields, service selection, barber selection, and time-slot picker
• Services Flat-Lay – Pinned tools image that zooms to different focal points as each service row enters the viewport center
• Animated Counter – Barber experience years count up with a staggered RAF animation when cards come into view

• Cormorant Garamond + Archivo – Serif display type for headlines, clean sans-serif for body and UI
• Section Counter – Fixed top-right counter that updates as each major section enters the viewport
• Mobile Bottom Nav – Pill-style bottom navigation with animated indicator for mobile users
• Loader Sequence – Branded loading animation with expanding hairline and wordmark reveal before the hero fades in

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

• Lenis – Smooth scroll library with custom easing curve
• CSS Animations & Transitions – Keyframe-driven hero letter reveals, scroll indicator, grain noise animation
• requestAnimationFrame – Custom scroll-driven animation loop for parallax, progress bars, and section-specific effects

• Custom Design Tokens – CSS variables for colors, easing curves, typography scale, and spacing
• Responsive Breakpoints – Mobile-first with dedicated mobile navigation and adjusted section padding
• ** prefers-reduced-motion** – Respects system motion preferences where applicable

• Image Optimization – All assets converted to WebP format, reducing total asset size from ~14.6MB to ~3.5MB (76% reduction)
• Lazy Loading – Gallery images use native loading="lazy" attribute
• will-change Hints – Applied to transform-heavy elements for GPU compositing
• No Framework Overhead – Direct DOM manipulation without virtual DOM reconciliation

• RAF Dispatcher Pattern – Single scroll event listener drives multiple animation callbacks via a centralized pump function, preventing duplicate layout calculations
• IntersectionObserver for Triggers – Used for section counting, reveal masks, and mobile nav state, avoiding expensive scroll-position calculations where possible
• CSS-First Animations – Hero letter reveals, tagline fade-in, and loader sequence use CSS keyframes with animation-play-state toggled by JS

• ARIA Labels – Modal dialogs, navigation, and interactive elements properly labeled
• Keyboard Navigation – Lightbox supports Escape, ArrowLeft, and ArrowRight keys
• Focus Management – Modal open/close handles scroll locking via Lenis stop/start
• Semantic HTML – Section elements with heading hierarchy, figure/figcaption for images

atelier/
├── index.html                    # Single-page site with all sections
├── styles.css                    # Design tokens, layouts, animations
├── atelier.js                    # Scroll choreography & interactions
├── script.js                     # Alternate interaction script
├── favicon.svg                   # Brand mark
└── assets/
    ├── landing_page/             # Hero, ritual, services, booking images
    ├── teams/                    # Barber portrait photos
    └── gallery/                  # Portfolio work images (28 total)

• Vanilla JS Animation Patterns: Built a scalable RAF-based animation system without relying on GSAP or similar libraries, gaining deep understanding of scroll progress calculations and performance budgeting
• Editorial Web Design: Learned to treat a commercial site as a narrative experience, using pacing, typography, and negative space to create emotional impact
• Asset Pipeline Management: Established a workflow for converting and optimizing image assets (WebP conversion, size reduction) for static-site deployment
• Scroll-Driven UX: Gained experience in designing interfaces where scroll position is the primary interaction mechanism, requiring careful attention to viewport math and fallback behavior
• Static Site Deployment: Deployed via Dockploy as a static nginx container, understanding the importance of index.html as the entry point for web servers