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

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
On Instagram


