Braun: 100

The Vision

The interactive timeline was more than just a showcase of Braun’s product milestones. It was envisioned as a curated digital experience that captured the brand’s design legacy, attention to detail, and cultural impact.

Visitors would scroll through rooms styled in various eras, meet key designers, and explore product highlights from each decade. It had to feel cinematic, but responsive. Sophisticated, but intuitive.

CamelWeb’s Role

CamelWeb handled the entire front-end build and CMS integration based on detailed visual concepts provided by the creative agency. We were responsible for:

• Translating visual design into high-performance web components

• Developing scroll-based animations with pixel-perfect smoothness

• Ensuring compliance, accessibility, and browser compatibility

• Integrating with Contentful for modular content control

Technology Stack

• React and Next.js for a flexible, component-based architecture

• GSAP and Locomotive Scroll for refined animation and scrolling

• Contentful CMS for easy content structuring and localisation support

Challenges & Solutions

• 1. Precision Scroll Behaviour
  The timeline relied heavily on a cinematic scrolling experience to tell the story. Achieving smooth, consistent performance across devices required intense tuning of scroll physics, animation triggers, and lazy-loading strategies.
  
  Solution: We used GSAP in combination with Locomotive Scroll to synchronise animation frames, prevent layout shifts, and optimise GPU usage. Our team refined the scroll experience to maintain a constant 60fps feel.
  

• 2. Creative Constraints vs. Technical Realities
  The original designs were ambitious — sometimes pushing boundaries that would impact accessibility, performance or usability.
  
  Solution: CamelWeb maintained close contact with the creative agency throughout. We proposed subtle design alternatives where needed, and helped them understand technical trade-offs without compromising artistic intent. This collaborative approach protected both user experience and performance.

Timeline & Delivery

The project ran over the course of 3 to 6 months, with multiple creative review stages, continuous QA, and stakeholder demos. Our team adapted to shifting priorities and creative updates, delivering each phase on time while preserving quality throughout.

Results

• Successfully launched to coincide with Braun's centennial celebration

• Highly praised by both client and creative agency for smoothness and attention to detail

• Stable and scalable performance across devices

• Easily expandable thanks to the modular Contentful architecture

Why It Worked

We believe this project succeeded because of:

• Transparent communication with all stakeholders

• A strong bridge between design fidelity and engineering reality

• Technological choices that balanced control and flexibility

• Our commitment to performance and best practices, even under creative pressure

Conclusion

This timeline wasn’t just a celebration of Braun's design legacy — it was an opportunity for CamelWeb to demonstrate how carefully planned development can elevate creative storytelling.

From smooth scroll effects to scalable CMS integration, we took care of every technical detail so our partners could focus on what they do best: telling the story.

Project Highlights

• 3–6 month build time

• React, Next.js, GSAP, Locomotive Scroll

• Modular integration with Contentful

• Built for performance, accessibility, and long-term maintainability