Inspiring interactions: how we designed a landing page for our Christmas 2025 campaign

Each year, our Christmas campaign gives us the chance to experiment, explore new ideas, and showcase what we do best. It’s a space to step outside client briefs and create something that reflects our evolving design and development capabilities.

For this year’s campaign, we decided to go beyond our usual festive video content and curate a more interactive digital experience; something playful, immersive and more than a little bit memorable!

We created an interactive landing page for a fictional festive perfume, designed to complement the wider Christmas campaign and bring the concept to life.

Built using Next.js, the project showcases P+S’s expertise in delivering high-performance, scalable frontend experiences. Next.js gave us the flexibility to combine lush visuals, animation, and interactivity without compromising on performance, accessibility, or responsiveness. The finished page included:

• Lazy-loaded imagery and video – so the page feels quick and responsive, even with rich media.
• Optimised media sizes, with mobile-specific formats – to deliver high-quality visuals without slowing down mobile users.
• No unused JavaScript or CSS – keeps the experience lightweight and snappy.
• Optimised 3D models – ensures interactive content is smooth and immersive without compromising performance.
• Scroll-driven animations – animations are engaging but only run when needed, reducing unnecessary processing.

Bringing the ‘product’ to life

At the centre of the experience is an interactive 3D perfume bottle, which we built with Three.js. This allowed us to create a sense of depth and tactility that reinforced the premium feel of the concept and wouldn’t have been possible with static imagery alone. Some of the effects we used included:

• ‍Dynamic lighting and reflections – to give the bottle a realistic, premium look.
• ‍Custom environments – to set the scene and mood around the product.
• ‍Smooth intro animation – to engage users immediately when the page loads. ‍
• Mouse-responsive interaction – allowing users explore the bottle in real time, making the experience playful and immersive. ‍
• High-quality 3D rendering in the browser – delivering a rich, interactive experience without leaving the webpage.

‍

Keeping things moving

All on-page movement is scroll-based and powered by Motion, giving users control over the pace of the experience while keeping animations smooth and purposeful.

A full-screen video ties the landing page back to the wider campaign, while responsive layouts ensure the experience works seamlessly across mobile and desktop.

Despite the use of 3D, animation, and video, the site is fully compliant with accessibility standards and this was embedded from the outset, with careful consideration given to how all users experience the site, including:‍

• ‍Semantic HTML and clear page structure – ensuring screen readers and assistive technologies can interpret the page correctly.
• ‍Full keyboard navigation and logical focus order – allowing users who can’t use a mouse to navigate intuitively.
• ‍Sufficient colour contrast across text and UI elements – making content readable for users with low vision or colour blindness. ‍
• Meaningful image descriptions for visual content – letting users who rely on screen readers understand key visuals. ‍
• Reduced-motion support for scroll-based animations – preventing motion-related discomfort and respecting user preferences.

The result

The finished landing page added a new, interactive dimension to our out-there Christmas campaign. Using Next.js, Three.js, and Motion we were able to create an engaging digital experience that balanced bringing our creativity to life with high-end performance and accessibility.

You can explore the final result here: https://slej.proctorsgroup.com/