← Work

Interactive / Web

FlauntBrush

Brand identity, an interactive product configurator, and an e-commerce storefront for a consumer beauty brand: design and front-end, end to end.

Year
2023 - 2025
Role
Brand, Interactive & Front-End Designer
Tools
IllustratorPhotoshopFigma-style UIThree.jsSvelteKit
  • R3F
  • WEB WORKER
  • 60 FPS
FlauntBrush storefront hero — "Create Your Signature Brush."

At a glance

Renderer
React Three Fiber (Three.js)
Model
GLB · 66K verts / 132K tris
Frame budget
~16 ms (60 FPS)
Resolution
2K / 4K / 8K tiers
Pipeline
Sobel normal map · Web Worker

The problem

A consumer beauty brand needed to exist everywhere at once: a visual identity, a storefront people could actually shop, and a way to let them design their own product without leaving the page. The hard part is making personalization feel immediate, so a customer sees their choice rendered the moment they make it, not after a reload or a guess.

The approach

I designed the brand from a blank page (identity, type, color, and art direction), then carried it straight into the interface so the storefront and the product feel like one system. The centerpiece is an interactive custom-handle configurator: a real-time canvas where each choice updates the product visual instantly, designed so the controls stay legible and the preview stays the hero.

Production detail

The hard part is making personalization feel instant: a customer uploads their own artwork and it becomes the actual textured surface of the brush handle, something they can rotate, recolor, and refine in real time without ever leaving the page or waiting on a reload. Getting that to feel immediate is the whole design challenge, and it’s solved in the browser.

Under the hood, the configurator is a real-time 3D canvas built with React Three Fiber (Three.js). The handle ships as an optimized model lit with a three-point studio rig and an HDRI environment so the product reads like a polished render, not a wireframe. When a customer uploads an image, it’s converted into a surface texture by a process running off the main thread, so the 3D view never stutters while it works. Every adjustment (strength, height, blur, detail, color) updates the material in place rather than rebuilding the scene, tuned to refresh within a single frame (~16ms) so the preview always feels live. The control state maps one-to-one to the rendered material, which keeps the interface legible and the product preview the hero. Resolution scales in tiers with loading states for the heaviest work, and every design serializes to JSON so a customer can save a brush, leave, and come back to refine it without re-uploading anything.

Outcome

The brand, configurator, and storefront are live and cohesive at flauntbrush.com: the identity, the interface, and the product all built as one connected system. The configurator turns a customer’s uploaded artwork into a textured 3D handle they can rotate, recolor, and refine in real time, then save and come back to. The personalization feels immediate because the rendering, the image processing, and the state all live in the browser.

See it live

Live storefront, embedded. Or open flauntbrush.com

On Instagram

FlauntBrush content on Instagram