Node Color Mixer 🎨

This is a simple node-based color mixing tool. I built it to play around with colors and see how they blend together using a cool interactive canvas. 🌈✨

Features 🚀

• ⭐ Color Nodes: Pick any color you want using a color picker.
• 🧪 Mixer Nodes: Connect multiple colors and watch them blend into something new!
• 🖼️ Palette Nodes: Keep track of your favorite color combinations.
• 💾 Auto-Save: Everything stays right where you left it, even if you refresh the page.
• 🖱️ Smooth Interface: Drag nodes around and connect them with ease.

Tech Stack 🛠️

• Svelte 5 (using the new runes!)
• SvelteKit for the framework
• Tailwind CSS 4 for the pretty styles
• @xyflow/svelte for the awesome node canvas
• TypeScript to keep things organized

Project Structure 📂

node-color-mixer/
├── src/
│   ├── lib/
│   │   ├── components/      # Our custom nodes (Color, Mixer, etc.)
│   │   ├── types.ts        # Data structures for the nodes
│   │   └── utils.ts        # Color mixing math logic
│   └── routes/
│       └── +page.svelte    # The main app logic and canvas
├── static/                 # Images and icons
└── package.json            # Project dependencies

Usage 🎮

It's super easy to use!

1. Add Nodes: Use the sidebar to add a Color, Mixer, or Palette node.
2. Choose Colors: Pick a color in a Color Node.
3. Connect: Drag from the little circle (handle) on a node to another one.
4. Experiment: Try connecting multiple colors to a Mixer, or chain Mixers together for complex results!
5. Clean up: Click the little "×" on any node if you want to remove it.

How to Install / How to Use 📦

Want to run this on your own computer? Just follow these steps:

1. Clone the project to your machine.
2. Open your terminal and run npm install to get the dependencies.
3. Start the dev server with npm run dev.
4. Click the link that appears in your terminal (usually http://localhost:5173) and start mixing!

Hope you enjoy playing with colors! 😊✨