JEFRIRUIZ.COM

LOADING_ASSETS...

Cyber Commerce
Back to Archive

Cyber Commerce

Role

Year

2024-11-20

Stack

The Challenge

E-commerce platforms are often generic and lack the "cyberpunk" aesthetic that appeals to Gen-Z hypebeasts. The goal was to build a visually distinctive shopping experience that feels like browsing a marketplace in 2077.

The Solution

We built a headless commerce store using Shopify and Next.js. We implemented custom WebGL shaders for product displays and a glitch-effect UI that immerses the user in the brand's narrative.

Key Features

  • 3D Product Previews: Interactive file viewing for digital assets.
  • Gamified Checkout: Unlock specialized "drops" based on purchase history.
  • Crypto Payments: Native SOL and ETH integration.

Visual Engineering

The "glitch" effect is powered by a custom WebGL fragment shader. It displaces the RGB channels of product images based on user scroll velocity, creating a sense of digital volatility that matches the brand identity.

// Fragment Shader Snippet
void main() {
  vec2 uv = vUv;
  float amount = distance(uv, vec2(0.5));
  gl_FragColor = texture2D(tDiffuse, uv + amount * 0.05);
}

Outcome

The store saw a 40% increase in session duration compared to the previous template, and the "Drop" mechanism generated a viral social campaign.

Void Social
Next Project

Void Social

Read Case Study