BURPLE Case Study

Overview

A brand revival project for BURPLE, a premium beverage company looking to modernize their image. My mission was to transform their brand identity and create a visually stunning, animated website that would reignite customer interest. I handled the complete creative direction: designing the new can aesthetics in Cinema 4D, creating dynamic video content in After Effects, and building the interactive website in VS Code using HTML5 and CSS3.

BURPLE Screenshot

My Creative Journey

This was a passion project about brand revitalization. I started in Cinema 4D to redesign the BURPLE can—creating sleek, modern aesthetics that reflected the brand's evolution. Then I moved to After Effects to produce cinematic video content that showcased the product in dynamic, eye-catching ways. Finally, I coded the entire website using HTML5 and CSS3 in VS Code, layering in GSAP animations to bring the brand story to life. This project taught me that web design isn't just code—it's about telling a compelling brand story.

Design & Architecture

Visual Theme: Modern, vibrant beverage brand aesthetic with bold colors and dynamic visuals

Layout: Flexible grid for product showcase (3x3 on desktop, responsive on mobile)

  • Video Background - Professional video in hero section with auto-play, muted audio, responsive sizing, and text overlay
  • Product Grid - 3x3 flexible grid with desktop (3 cols), tablet (2 cols), and mobile (1 col) layouts with hover effects
  • Navigation - Smooth scroll navigation with sticky header, smooth scrolling to sections, and mobile-friendly menu

    • Technologies & Tools Used

    • 3D Design & Product Visualization: Cinema 4D - Completely redesigned can aesthetics with modern materials, lighting, and brand identity
    • Motion Graphics & Video: After Effects - Created cinematic product videos, promotional animations, and dynamic visual effects
    • Web Development: HTML5, CSS3, JavaScript in VS Code

    Key Features

    • Full-screen hero section with video background
    • Animated product cards with information reveals
    • Smooth page transitions
    • Mobile-responsive design
    • Professional brand storytelling through animation
    • Fast performance with optimized assets

    Results & Impact

    • Successfully revitalized BURPLE's brand image with modern design language
    • Created engaging user experience with smooth 30fps animations
    • Reduced bounce rate through interactive, story-driven design
    • Increased time-on-site due to compelling video content and animations
    • Professional brand presentation across all touchpoints
    • Mobile-optimized experience for all users
    • Seamless integration of 3D product renders, video, and web design

    What I Learned

    • Brand consistency across 3D, video, and web mediums is crucial
    • Storytelling through animation enhances emotional connection with users
    • After Effects skills translate beautifully into web animations
    • Cinema 4D and web design can work in perfect harmony
    • Performance optimization is essential for animation-heavy sites
    • Every frame counts when reviving a brand