Inspiration
We wanted to fix two big frustrations in online fashion:
Everyone gets the same boring designs, and
You can’t try clothes on before buying.
So we built CRISHIRTS, a platform where your imagination becomes wearable art, and you can instantly see how it looks on you. A concept blending creativity, AI, and immersive design — perfect for the hackathon’s spooky theme.
What it does
CRISHIRTS turns ideas into actual, try-on-ready t-shirts in seconds.
Core Features
AI Design Generator 🎨 — Type any idea → get a clean, print-ready design
Virtual Try-On 👕 — Upload a photo → see the design on your body
Front/Back print support
Real-time color customization
Cinematic horror-themed interface (fog, embers, animations)
In short:
From imagination → design → try-on → ready to order in under 10 seconds.
How we built it
We engineered a full stack system with:
Frontend
React + TypeScript for stable components
TailwindCSS for fast styling
WebGL + Canvas for cinematic animations
Context + localStorage for persistent cart & session
Backend
A custom AI image pipeline:
prompt → generate_design() → remove_bg() → composite_on_mockup()
A virtual try-on engine
A smart key-rotation layer that maintains uptime and handles failovers
A fast image processing module for design placement & color handling
Everything was built for speed, reliability, and immersion.
Challenges we ran into
- Real-time image processing
Creating a seamless pipeline that could generate, clean, align, and composite designs without delays required careful optimization.
- Virtual try-on timing
Try-on rendering is asynchronous, so we built a robust status polling system with graceful fallback.
- Heavy VFX performance
Fog, embers, parallax, and shadows were GPU-heavy. We fixed this using:
GPU-accelerated transforms
particle throttling
lazy-loaded components
- Cross-browser rendering
Chrome, Firefox, and Edge rendered our cinematic hero text differently → custom CSS logic solved it.
Accomplishments that we're proud of
Idea → design → try-on pipeline working end-to-end
Cinematic horror-themed UI running smoothly at ~60fps
Zero downtime thanks to our smart key-rotation layer
Commercial-grade design quality
Fully responsive and mobile-ready
A product that feels magical to use
What we learned
How to build complex async workflows
How to optimize WebGL & Canvas for smooth effects
How to engineer reliable multi-step image pipelines
How to handle browser inconsistencies gracefully
How to prioritize experience + performance under time pressure
What's next for CRISHIRTS
Short-term:
Payments + checkout
User accounts & design library
More themes (fantasy, cyberpunk, anime)
6 months:
Hoodies, sweatshirts, and accessories
AI style-transfer & design variations
Public design gallery
Long term:
Mobile app + AR try-on
B2B merch platform
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
Log in or sign up for Devpost to join the conversation.