KBIC: Facial skin needle roller

Client: KBIC Services: Interactive 3D, Consumer product demo, Usage walkthrough Duration: 6 weeks Tech: Three.js, Verge3D, responsive mobile-first UI

The problem

KBIC manufactures facial skin needle rollers (a consumer beauty / cosmetology tool that combines precise engineering with a direct-to-consumer sales motion. The product looks simple from the outside; its value is in the internal construction) the density of micro-needles, the rotation mechanism, the skin-contact geometry, the specifics that differentiate a medical-grade tool from a cheap imitation.

Static product photography couldn't carry that story. A customer comparing a KBIC device to a $20 knockoff on a generic e-commerce marketplace wouldn't see the differences. And would make the decision on price.

The request: a browser-based 3D product demo that could show the device's internal construction, demonstrate the correct usage pattern on skin, and justify KBIC's premium positioning against lower-cost competitors.

What we built

A short-session 3D demo, sized for mobile-first beauty-consumer browsing behavior, with three layered presentations.

• Product-focused view. A photorealistic 3D render of the device with rotation, zoom, and material-accurate treatment. The engineering is visible in a way photography doesn't capture.
• Cross-section view. A cutaway showing the internal needle array, the rotation mechanism, and the ergonomic handle structure. Supports KBIC's technical differentiation claim.
• Usage walkthrough. An animation showing correct device motion across a stylized skin surface, with on-screen callouts for pressure, angle, and motion direction.
• Before / after indicator. Not a results claim (KBIC didn't make specific efficacy claims), but a visual demonstration of how the device interacts with skin layers.

How we built it

Weeks 1–2. Kickoff, CAD + reference photography review. KBIC supplied engineering drawings; we built the 3D model from scratch to match the photography tone.

Weeks 3–4. 3D asset build, material development (the device has a specific metallic finish that needed careful PBR work), cross-section animation setup.

Week 5. UI layer. Mobile-first controls, rotation gestures, cross-section toggle, usage-walkthrough trigger. Client review.

Week 6. Integration with KBIC's existing Cafe24 storefront, performance tuning for mobile, launch.

What it changed

KBIC embedded the demo into their product-page experience on their Cafe24 store. Conversion rate on the featured product page improved against the baseline product photography; session time doubled.

What we learned

Beauty-consumer 3D needs different polish than industrial 3D. Industrial 3D can read slightly technical, slightly utilitarian. Beauty 3D cannot. The product has to look seductive in a way that aligns with the category's visual conventions. We spent more of the budget on material and lighting work than we usually do on a comparable-scope industrial project. The delta showed up directly in the conversion numbers.

Mobile-first means mobile-first, not mobile-afterthought. 80% of KBIC's traffic is mobile. We built the 3D presentation primarily for portrait orientation on a phone, then adapted to desktop (the opposite of our typical workflow. The controls, the fonts, the cross-section toggle, the usage-walkthrough trigger) all designed for one-thumb operation.

Technical differentiation requires technical visualization. The cross-section view was the single most-effective persuasion element. It's the thing that distinguishes a $60 KBIC device from a $20 generic device. Photography can't do that. 3D can.

Stack

• Runtime: Three.js + Verge3D
• UI: Vanilla TypeScript + HTML/CSS (no React overhead. The integration into Cafe24's storefront required minimal bundle weight)
• Assets: GLTF with Draco, ~3.5 MB total for the device plus cross-section plus usage animation
• Performance: 60 fps on a mid-range 2021 Android, sub-2s LCP on 4G
• Integration: embedded into Cafe24 product page via iframe with storefront event bridging

Want something similar?

Consumer beauty, cosmetics, personal-care devices. Products where the technical differentiation matters but photography can't show it. The KBIC pattern fits a growing category of premium consumer hardware that competes against cheap imitations on platforms where customers can't tell the difference from the outside.

Send a two-sentence email to info@cclemang.com.

Back to all work →