Type anything and watch the world shift to match
A full-stack project that combines AI colour generation with physical hardware. Type a prompt, and an LLM interprets it into a colour — changing both a web interface background and a 3D printed daisy lightstick's LED in real time. Inspired by K-Pop lightsticks, this project aims to connect people through matching their inner thoughts to the light of their lightstick. Status: Work in Progress 🚧
View CAD Model on OnShape (if 403 Error, open in Incognito Mode)
Chromatic is a web app built with Next.js that takes a text prompt from the user, sends it to Google's Gemini AI, and receives a hex colour code in return. The colour is displayed as a background on the web interface, and will eventually be sent to a physical ESP32-powered LED lightstick shaped like a daisy — inspired by the G-Dragon KPOP lightstick.
This project combines:
- Frontend: Next.js web app (generated with v0)
- AI Backend: Google Gemini 2.5 Flash API via Vercel AI SDK
- Hardware (in progress): ESP32C3 microcontroller + WS2812B RGB LED in a custom 3D printed daisy lightstick casing
User types prompt → Next.js API route → Gemini AI interprets colour → Hex code returned → Background updates → (soon) ESP32 lights up LED
- User enters a text prompt (e.g. "sunset over the ocean")
- The frontend sends a POST request to
/api/generate-color - The API route forwards the prompt to Gemini with a system prompt instructing it to act as a "synesthetic colour artist"
- Gemini returns a hex colour code and a creative colour name
- The frontend updates the background colour with a smooth transition
- (Planned) The hex code is also sent to an ESP32 microcontroller over WiFi, which sets the colour of a WS2812B LED inside a 3D printed daisy lightstick
- Node.js 18+
- pnpm
- Google Gemini API key (free tier available at aistudio.google.com)
| Component | Spec | Purpose |
|---|---|---|
| Seeed XIAO ESP32C3 | With external antenna | WiFi microcontroller |
| WS2812B LED strip | 5V, 60 LED/m, White PCB | RGB LED |
| TP4056 charging module | Type-C | LiPo battery charging |
| MT3608 boost converter | 5V output | Step up 3.7V → 5V |
| LiPo battery | 3.7V, 1000mAh, JST connector | Power source |
The lightstick casing is designed in OnShape, inspired by the G-Dragon's daisy lightstick.
Design features:
- Daisy flower head with organic pillow-shaped petals
- Frosted/clear petals to diffuse LED light
- Removable bottom cap for component access
- Internal component carrier sled
- Wire channel running from LED head to component bay
- Screwable petal assembly for easy maintenance
- Complete 3D printed lightstick casing
- Wire and assemble hardware components
- Write ESP32 firmware to receive colour over WiFi
- Connect Next.js app to send colour data to ESP32
- Add animations and colour transition effects on the LED
- Frontend: Next.js 15, React, Tailwind CSS, TypeScript
- AI: Google Gemini 2.5 Flash via Vercel AI SDK
- Hardware: ESP32C3, WS2812B, Arduino/MicroPython
- CAD: OnShape
- Package manager: pnpm
MIT