CRISHIRTS

Inspiration

Online fashion feels limited: designs look repetitive, and you can't visualize how something will look on you before buying it. We wanted to remove this gap between imagination and reality. CRISHIRTS was created to let anyone turn ideas into wearable designs and instantly see them on their own body, blending creativity, AI, and immersive design into a fast, intuitive experience.

What it does

CRISHIRTS turns ideas into try-on-ready t-shirts within seconds. Core Features

• AI Design Generator — type any idea and get a clean, print-ready design
• Virtual Try-On — upload a photo and see the design on your body
• Front/Back print support
• Real-time color customization
• Cinematic interface with atmospheric effects
  In short: imagination → design → try-on → ready to order in under 10 seconds.

How we built it

We engineered a full-stack system optimized for speed, reliability, and immersion. Frontend: React + TypeScript for structure, TailwindCSS for styling, WebGL + Canvas for fog and depth effects, and Context + localStorage for persistence. Backend: A custom AI pipeline (generate_design → remove_bg → composite_on_mockup), a virtual try-on engine, a key-rotation reliability layer, and a fast image-processing module for scaling, alignment, and color handling.

Challenges we ran into

Real-time image processing required multi-step optimization to keep generation fast. Try-on rendering needed asynchronous handling with status polling. Cinematic VFX were GPU-heavy, so we used GPU transforms, particle throttling, and lazy loading. Browser differences in text and canvas rendering required custom CSS logic.

Accomplishments that we're proud of

A seamless idea → design → try-on pipeline, smooth cinematic UI, zero downtime via key rotation, commercial-grade design quality, responsive layouts, and an immersive user experience.

What we learned

How to manage complex async workflows, optimize WebGL/Canvas effects, engineer reliable multi-step AI pipelines, handle browser inconsistencies, and balance performance with experience under time pressure.

What's next for CRISHIRTS

Short-term: Payments, checkout, user accounts, design libraries, more themes.
6 months: Hoodies, sweatshirts, accessories, AI style-transfer, public design gallery.
Long term: Mobile app with AR try-on, B2B merch tools, eco-friendly print options.

Built With

• 18
• 2d
• 3d
• ai
• animations
• api
• async
• audio
• backend
• background
• build
• canvas
• cdn
• ci/cd
• code
• color
• compositing
• concurrency
• context
• control
• conversion
• css3
• custom
• debounced
• deployment)
• design
• embers)
• engine
• engine)
• environment
• express.js
• fetch
• fog
• formdata
• framer
• frontend
• fx)
• generation
• github
• global
• glsl
• gpu-accelerated
• graphics
• handling
• hooks
• html5
• http
• image
• input
• javascript
• job
• key
• layer
• layout
• lazy
• limit
• loading
• localstorage
• management
• motion
• networking
• node.js
• node.js)
• ogl
• optimization
• particle
• persistence
• persistent
• pipeline
• png/jpeg)
• polling
• processing)
• providers
• radix
• raster
• rate
• react
• react)
• removal
• render
• rendering)
• responsive
• rotation
• router
• session
• shaders
• shaking)
• sharp
• smart
• sound
• space
• splitting
• state
• svg
• system
• tailwindcss
• three.js
• tree
• try-on
• typescript
• ui
• variable
• vercel
• version
• viewport-based
• virtual
• vite
• web
• webgl
• workflow