Inspiration -

Fashion is personal. Yet, tailoring remains distant — requiring in-person visits, physical measurements, and scattered communication. We imagined a world where you float into fashion — designing your dream look, matching with the perfect tailor, visualizing the outfit in 3D, and watching your order take shape from start to finish. Thus, GLOW – Style It Yourself was born.

What it does -

GLOW is an exaggerated and artistic tailoring platform for the digital generation — combining Three.js, AI tools, and ReactBits UI to create a flowing, aesthetic user experience.

Users choose between Tailor or Customer, enter via glowing logins, and explore a floating fashion studio. From uploading body dimensions or images, to chatting with a Dree Enhancer Bot that improves your designs, it’s everything your wardrobe never knew it needed.

How we built it -

We used ReactBits and Three.js via Fiber.js for smooth and cinematic front-end UI.

Integrated real-time routing with role-based dashboards for Tailor and Customer.

Created a 3D Dree Enhancer Bot using a mannequin engine and design analysis.

Applied floating effects, animated ribbons, dolls, and AI-based recommendation logic.

Mocked UPI payments and real-time tracking workflows.

Challenges we ran into

Synchronizing 3D animations across roles without disrupting performance

Making the UI feel “floating” while keeping it usable on all screens

Maintaining clean transitions for components rendered by reactbits.dev

AI enhancement on dress designs using limited image processing tools

Debugging rendering layers for ambient effects

What we learned -

Deep dive into react-three-fiber, GLSL shaders, and floating UX principles

Performance balancing between animation and speed

Design principles for fashion-tech apps and 3D avatar-based bots

What's next for GLOW – Style It Yourself

MY STARTUP AND CURRENTLY WORKING TO MAKE IT AVAILABLE WORLD WIDE

Built With

  • css-frontend-framework:-react-+-vite-ui-components:-reactbits-3d-rendering:-three.js
  • customer
  • gsap
  • html
  • languages:-javascript
  • orders
  • pica-(mocked)-payment-flow:-upi-modal-simulation-database-(mocked):-tailors
  • platform:
  • ratings
  • react-spring-image-ai-enhancements:-dall?e
  • react-three-fiber-animation-libraries:-framer-motion
  • sizing
Share this project:

Updates