Mobile
375px viewport
Premier Automotive Paint Store
7-page automotive paint marketing site with HLS.js video gallery, lightbox with keyboard nav, requestAnimationFrame infinite brand carousel, custom scroll animation hook, session-aware splash screen, page transition system, and three JSON-LD schemas — zero UI libraries or animation frameworks.
Two custom mobile nav variants
Default inline collapse and hero slide-in overlay with staggered child animation using CSS delays — no external menu library
HLS video gallery on mobile
Full-screen lightbox with HLS.js streaming, tap-to-navigate thumbnail strip, and swipe-friendly arrow controls — lazy-loaded only when needed
Scroll animations on mobile
useScrollAnimation() hook triggers directional fade-ins as content enters the viewport — smooth on any device, respects prefers-reduced-motion
Fast mobile-first build
AVIF images via next/image, lazy-loaded HLS.js, server components everywhere except interactive pages — lean bundle on every screen size
Pro Match Paints is an automotive paint and color-matching supplier based in Bellflower, CA. They serve both professional collision centers and DIY enthusiasts with an extensive catalog of paints, primers, and finishing products — with a focus on precision color matching.
HLS Video Gallery + Lightbox
14-item gallery (10 HLS .m3u8 videos + 4 images) in a full-screen lightbox with arrow key/ESC navigation, thumbnail strip, and lazy-loaded HLS.js — only initialized when video content is detected.
Custom Scroll Animation System
useScrollAnimation() hook backed by IntersectionObserver supports directional fade-in (up/down/left/right) with configurable delay, duration, and one-time trigger — no GSAP or Framer Motion.
rAF Infinite Brand Carousel
requestAnimationFrame-driven infinite scrolling logo carousel with gradient edge fade and pause-on-hover — no external carousel library, no layout jank.
Session-Aware Splash Screen
Branded logo intro screen shown exactly once per session via sessionStorage — suppressed on repeat visits and page refreshes without any timing bugs.
Page Transition System
Detects route changes via usePathname(), fades content out, smooth-scrolls to top, then fades back in — consistent cinematic feel across all 7 pages with no flash.
Full SEO with Three JSON-LD Schemas
AutoPartsStore, WebSite, and SiteNavigationElement schema.org structured data baked in, alongside a generated sitemap.ts and robots.ts using Next.js App Router conventions.
Not sure where to start?
Full custom marketing website for Jessica Matteson, PLA — a Connecticut & New York landscape architect with 25 years of experience. Built in Next.js 15 with quiet luxury aesthetics: animated hero carousel, word-by-word scroll reveals, interactive 9-step process, portfolio grid, and a custom brand design system.
Free real-time precious metals calculator and educational resource — built for everyday people who want to know what their gold, silver, or platinum is worth before selling.
Bilingual website for a 100% Mexican crane rental company established in 1984, featuring a fleet of hydraulic cranes and industrial equipment for construction, mining, and energy projects.
