Building Cleetus: A Neon Pink VRM Character Journey
Building Cleetus: A Neon Pink VRM Character Journey
“From the cold labs of SpiceX to the warm glow of hot pink neon — this is Cleetus’s story.”
The Backstory
Cleetus isn’t just another 3D character. He’s a pink demi-humanoid who recently escaped from the SpiceX facility — a mysterious corporate lab where experiments pushed the boundaries of humanoid development. Now free, Cleetus brings his unique blend of glitchy charm and neon energy to the web.
Tech Stack
Bringing Cleetus to life required a carefully chosen technology stack:
- WebJSX — Declarative web components for the UI layer
- Three.js — Industry-standard WebGL rendering
- @pixiv/three-vrm — Specialized VRM (Virtual Reality Model) support for Three.js
This combination let us build a performant, browser-native 3D character experience without plugins or heavy downloads.
The 6 Development Phases
Phase 1: Initial Prototype
We started with basic Three.js scene setup and VRM loading. Getting the model to render correctly in the browser was the first milestone. The initial prototype proved the concept — a fully rigged 3D character running natively in web browsers.
Phase 2: Hot Pink Theme Pivot
The original design was… forgettable. Then came the pivot: hot pink neon aesthetic. We committed to the bit with:
- Primary:
#ff00ff(pure magenta) - Secondary:
#ff1493(deep pink) - Neon glows and bloom effects
- Cyberpunk-inspired lighting
This wasn’t just a color change — it became Cleetus’s identity.
Phase 3: Animation Retargeting Setback
Here’s where things got rough. We had 108 HYPERIGmk2 animations ready to go — a treasure trove of motion capture data. But retargeting them to Cleetus’s VRM skeleton? Total nightmare.
The bone mappings were incompatible. Animations came out twisted, broken, or completely wrong. We spent days debugging why Cleetus’s arms were rotating 180° or why his legs were doing… that.
Phase 4: Bone Naming Fix
The breakthrough? Bone naming conventions.
VRM uses specific bone naming standards that HYPERIGmk2 didn’t follow exactly. After painstakingly mapping each bone name to the correct VRM standard, the animations finally started working. The lesson: never underestimate the power of naming conventions in 3D pipelines.
Phase 5: The @C1337U5 Moment
Every project has that moment where everything clicks. For Cleetus, it was the @C1337U5 moment — when the community discovered the project and started sharing it.
Suddenly Cleetus wasn’t just our project anymore. He was everyone’s weird pink friend from the internet. The engagement validated all the late nights debugging skeleton hierarchies.
Phase 6: Mobile Polish
The final phase: making Cleetus look good everywhere. We implemented:
- Mobile-first responsive design — Touch controls, adaptive sizing
- Performance optimizations for mobile GPUs
- Battery-conscious rendering
- Adaptive quality based on device capability
Now Cleetus shines on everything from desktop workstations to phones.
The Numbers
| Stat | Value |
|---|---|
| Animations Retargeted | 108 HYPERIGmk2 |
| Color Palette | #ff00ff, #ff1493 |
| Tech Stack | WebJSX + Three.js + VRM |
| Development Phases | 6 |
| SpiceX Escapes | 1 (successful) |
What’s Next?
Cleetus is just getting started. With a solid foundation, a wild aesthetic, and 108 animations in the bank, the possibilities are endless. Watch this space (and the jb0gie/cleetus repo) for what’s coming next.
“They tried to contain him. They failed.”
— The Cleetus Team
Hero Image Prompt
A striking 3D render of Cleetus, a neon pink demi-humanoid VRM character with glowing magenta accents (#ff00ff and #ff1493), standing confidently against a dark cyberpunk background with glitch effects and neon geometric shapes. The character has a friendly, mischievous expression with vibrant pink skin, wearing minimal futuristic clothing that showcases the VRM rigging structure. Dramatic rim lighting in hot pink, particle effects suggesting digital escape, subtle “SpiceX” facility branding in the background (partially destroyed), high contrast, volumetric lighting, 8k detail, octane render style, vertical composition suitable for blog hero image.
Repository: github.com/jb0gie/cleetus