NIVEA SUN

Table of Contents

1. Overview
2. Role
3. Problem
4. Goal
5. Solution
   • Interactive Playground
   • Meteorological Integration
   • Mobile Optimization
6. Challenges and Learnings
7. Final Thoughts

Overview

NIVEA SUN is a data-driven web experience featuring 3D particle systems that adapt to real-time weather conditions. The project combines creative coding with visual storytelling to deliver a branded and engaging user interaction.

👨‍💻 Role

Creative Developer & Technical Designer

❓ Problem

1. The experience needed to reflect real-time weather in an interactive format.
2. Assets had to be lightweight enough for mobile performance.

🎯 Goal

1. Build a responsive 3D particle system synced with live weather data.
2. Offer a playground UI for real-time parameter adjustment.
3. Optimize static elements for responsive rendering.

✨ Solution

Interactive Playground

• Designed an interface that exposes all particle system parameters.
• Allowed client-side customization of visuals in real-time.

Meteorological Integration

• Fetched live data to dynamically control particle behaviors (wind, intensity, color).
• Created seasonal presets based on NIVEA’s marketing needs.

Mobile Optimization

• Converted complex animations into APNGs for non-interactive contexts.
• Used tools like APNGasm and PNGoo to ensure compression without quality loss.

⚙️ Challenges and Learnings

• Integrating live weather APIs required caching strategies and fallback designs.
• Learned about balancing interactivity with accessibility and responsiveness.
• Discovered new formats (APNG) for preserving motion in light assets.

✨ Final Thoughts

• This project pushed the limits of front-end interactivity and performance.
• Techniques developed here will serve future projects in data visualization and branded experiences.