Brown Noise App Landing Page| Figma to Code

brownnoise.site — Brown Noise App Landing Page



Developer: Badar Bukhari



A high-conversion, SEO-optimized marketing landing page for a brown noise wellness brand — built entirely in vanilla HTML, CSS, and JavaScript with zero external JS libraries. The site promotes a mobile app for sleep and focus, featuring a cinematic autoplay video hero, interactive audio track showcase, science-backed content sections, social proof with testimonials, and App Store deep-link integration with affiliate tracking.



Tech Stack

• Tech: HTML5, CSS3, Vanilla JavaScript
• Media: HTML5 Video/Audio, WebP Images
• Hosting: Static Hosting

Animations & Interactions

• Scroll-triggered fade-ins using Intersection Observer
• Smooth CSS hover transitions
• Autoplay MP4 hero loop for cinematic experience
• Custom interactive audio card UI elements

Design Approach

Mobile-first responsive layout with a dark immersive visual theme. Built without any frameworks to ensure fast load times, clean performance, and maximum SEO efficiency.
Developer: Badar Bukhari