Project Description: CONTRA Phone – The Blossom Sanctuary

Status ( incomplete and unpolished)

Project Overview

CONTRA: The Blossom Sanctuary is an immersive, world-class 3D cinematic web experience built for the Google Stitch flagship portal competition. Moving far beyond traditional, flat e-commerce layouts, this project establishes a "Digital Sanctuary" that merges high-fashion luxury product presentation with interactive, atmospheric storytelling. The experience is engineered using an HTML-native canvas that links fluid 3D animations directly to the user’s real-time scroll.

The Creative Vision

The aesthetic concept creates an intentional contrast between raw, precision hardware and organic tranquility.

The Hero Asset: The CONTRA flagship smartphone floats weightlessly as a central monument, showcasing its premium titanium frame and its signature pulsing hardware feature: the Aura Ring.

The Environment: A vast, minimalist White Fantasy Void featuring a soft, glowing white marble floor. Arching over the device is a massive, hyper-detailed ancient Japanese Cherry Blossom tree in full bloom.

The "Alive" Factor: To make the portal feel active and responsive, a custom 3D particle system drifts pink petals through the workspace. The phone's Aura Ring dynamically casts an emissive white-and-pink glow that bleeds into the atmosphere and reflects off the passing petals.

Technical Architecture & Core Mechanics

Built on a high-performance WebGL stack utilizing React-Three-Fiber and Three.js, the project is optimized for a locked 60 FPS delivery directly in the browser:

Scroll-Bound Interpolation: Using canvas scroll controls, the smartphone executes a flawless, continuous $360^\circ$ rotation along its Y-axis mapped perfectly to the user's scroll depth.

GPU-Accelerated Particle Engine: To prevent performance lag, the falling cherry blossom petals are managed via an instanced mesh (THREE.InstancedMesh). This compiles over 100 unique, tumbling petals into a single draw call, calculating wind drift and reset boundaries on the GPU.

Cinematic Lighting & Shaders: The camera uses a post-processing Bloom Shader combined with a highly emissive MeshDistortMaterial. This causes the phone's light ring to bleed naturally into the high-contrast white environment, giving it a premium, ethereal glow.

Dynamic Material Swapping: A responsive front-end state manager hooks into the 3D scene, allowing users to select from a 6-color finish palette (including Obsidian, Pearl, Alpine, and Rose) which instantly repaints the phone's digital shaders.

The User Experience (UX) Journey

1. Section 1: The Reveal (Hero Phase)

The user lands on a pristine white canvas. The CONTRA phone floats dead-center under the blossom canopy. The word "CONTRA" sits anchored in the background layer in a massive, bold 200px Syne typography outline, establishing an immediate high-fashion editorial vibe.

2. Section 2: Aura Intelligence (Detail Phase)

As the user scrolls, the phone smoothly spins $360^\circ$ and tracks across the screen to clear space for the UI. A semi-transparent, ultra-blurred glassmorphic layout card flies in from the side with a crisp motion blur effect, revealing the hardware specs (Aura-Flow OLED, X-IMAGE Variable System, Grade 5 Titanium) alongside the interactive finish-swapper.

3. Section 3: Material Honesty (The Sanctuary)

The camera shifts depth-of-field, drifting past the hardware as a final brand philosophy statement fades onto the screen. The interaction leaves the user with a lasting impression of the phone not just as a tool, but as a design environment.

While standard competition entries rely on flat grids and basic scrolling text, The Blossom Sanctuary wins on both Creativity and Technical Execution. By syncing advanced WebGL rendering, GPU particle physics, and high-fidelity post-processing with simple scroll behavior, this project redefines the boundaries of modern, flagship interactive web design.

Preview1 :https://stitch.withgoogle.com/preview/420511950395424838?node-id=d0e8c33cd85a47428ddf3d0c4f36681f

Preview 2:https://stitch.withgoogle.com/preview/420511950395424838?node-id=08e254f0306b4cce94b63657831bb2ef