Brilliant Glass — Let the Light In

WordPress · Figma to Code · GSAP · Lenis Scroll · Canada

Neon Treehouse — Digital Marketing Agency Website | WordPress Development | MarkupMarvel

Neon Treehouse is a bold, vibrant digital marketing agency. MarkupMarvel developed their custom WordPress website — dark neon aesthetic, Vimeo video integration, Masonry portfolio grid, and hand-coded precision from design to production.

See Next Project

Client

Brilliant Glass is a Canadian glass company with a razor-sharp focus on people and creativity — believing that the right glass solutions create space for boundless creativity. Their tagline, “Let the Light In,” reflects their philosophy: exceptional glass products and installations that transform buildings and interiors. They needed a website that matched their premium, light-filled brand identity — elegant, animated, and built to impress.

Brilliant Glass company culture page showing boundless creativity and glass expertise — WordPress website built by MarkupMarvel

Project Goals

→ Convert the complete Figma design into a custom hand-coded WordPress website — pixel-perfect, no page builder
→ Implement GSAP animations — smooth, elegant on-load and scroll-triggered effects that match the brand’s premium feel
→ Integrate Lenis smooth scroll for a premium, fluid browsing experience throughout the site
→ Build a fully responsive, mobile-first layout across all devices and screen sizes
→ Configure Yoast SEO and deploy on AWS + Nginx for performance and reliability

Brilliant Glass about page mobile view featuring founders and team — custom WordPress theme by MarkupMarvel

Brilliant Glass case study video — Figma to WordPress custom development with GSAP and Lenis smooth scroll by MarkupMarvel

Problems

1. Translating a light, premium aesthetic into code The Brilliant Glass design is defined by light, space, and elegance — translating these qualities from Figma into a live WordPress website required extreme attention to detail in typography, spacing, and animation timing.

2. GSAP + Lenis smooth scroll performance Combining GSAP animations with Lenis smooth scroll creates a premium browsing experience — but also introduces performance complexity. Ensuring smooth animation without jank or layout shift was a core challenge.

3. Mobile-first execution of an animation-heavy design Animations and smooth scroll effects need careful adaptation for mobile devices — where performance constraints are tighter and touch behavior differs from desktop scroll.

4. Gallery and media management Brilliant Glass’s work is highly visual — showcasing glass installations requires a gallery system that is both beautiful and performant, without slowing down the page.

Solutions

Brilliant Glass "Let the Light In" natural light brilliance poster — custom Figma to WordPress development by MarkupMarvel

1. Pixel-Perfect Figma Execution Every spacing value, typography scale, and color token from the Figma file was implemented precisely in code — ensuring the live site matches the design’s light, premium aesthetic down to the pixel.

2. Optimized Animation Stack GSAP animations were carefully scoped and hardware-accelerated — Lenis smooth scroll was configured to work seamlessly alongside GSAP timelines, delivering fluid motion without performance impact.

3. Mobile-Optimized Animation Behavior Animations were selectively adapted for mobile — reduced complexity, touch-optimized scroll behavior, and performance-first media loading ensure a smooth experience across all devices.

4. FancyBox + Swiper Gallery System A FancyBox lightbox combined with Swiper sliders provides an elegant, interactive gallery experience — lazy-loaded images keep performance green while showcasing Brilliant Glass’s work beautifully.