rAInbow: AI-Powered Gradient Micro-Frontend

Add beautiful AI-generated gradients to any web application. rAInbow provides two components: a canvas that fills containers with gradients, and a floating action button with an interactive modal. Unlike rainbows, this is a waste of water.

Features

• 🎨 AI-Powered: Generates unique gradients using Cohere's API
• ⚡ Lightweight: Minimal overhead, optimized for production
• 🧩 Web Components: Use native <rainbow-canvas> and <rainbow-overlay> elements
• 🎯 Independent: Use just the canvas, just the overlay, or both
• 📱 Responsive: Works on all modern browsers
• 🔒 Error Resilient: Falls back to beautiful gradient on any error

Quick Start

1. Install Dependencies

npm install rainbow-micro

Also ensure Vue 3 is available globally (CDN or your bundler):

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Load the required stylesheets:

<link rel="stylesheet" href="node_modules/rainbow-micro/dist/esm/assets/rainbow-canvas-*.css">
<link rel="stylesheet" href="node_modules/rainbow-micro/dist/esm/assets/rainbow-overlay-*.css">

ℹ️ Find the exact hash by checking node_modules/rainbow-micro/dist/esm/assets/. Only load CSS for components you're using.

2. Set Configuration

Before loading rAInbow, set your API key:

<script>
  window.__RAINBOW_CONFIG__ = {
    apiKey: 'your-cohere-api-key'
  }
</script>

Get a free API key from Cohere.

3. Use Web Components

Add the custom elements anywhere in your HTML:

<!-- Gradient canvas -->
<rainbow-canvas style="height: 300px;"></rainbow-canvas>

<!-- Floating action button -->
<rainbow-overlay></rainbow-overlay>

4. Load Scripts

<!-- Load from your node_modules or CDN -->
<script src="node_modules/rainbow-micro/dist/esm/rainbow-canvas.js" type="module"></script>
<script src="node_modules/rainbow-micro/dist/esm/rainbow-overlay.js" type="module"></script>

That's it! Components are ready to use.

Components

<rainbow-canvas>

Fills a container with an AI-generated gradient background.

<style>
  .hero {
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
  }
</style>

<rainbow-canvas class="hero"></rainbow-canvas>

Features:

• Fills 100% of container width and height
• Lazy-loads gradient on first render
• Caches gradient for entire session
• All canvas elements share the same gradient (one API call)

<rainbow-overlay>

Floating action button in bottom-right corner with modal.

<div data-rainbow="action"></div>

Features:

• Fixed position (20px from bottom-right)
• Click to open modal displaying the gradient
• Smooth animations
• Shares gradient state with canvas components

Multiple Instances: You can add multiple overlay buttons. Each has its own modal, but all share the same gradient:

<div data-rainbow="action"></div>
<div data-rainbow="action"></div>

Configuration

Configuration

API Key (Required)

Set your Cohere API key before loading rAInbow:

window.__RAINBOW_CONFIG__ = {
  apiKey: 'your-cohere-api-key'  // Required
}

Custom Prompt (Optional)

Control the type of gradient generated:

window.__RAINBOW_CONFIG__ = {
  apiKey: 'your-cohere-api-key',
  promptText: 'Sunset gradient with warm oranges and purples'
}

The AI will combine your prompt with the current time to generate unique gradients.

Integration Examples

Canvas Only

Perfect for hero sections, backgrounds, or accent areas:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/rainbow-micro/dist/esm/assets/rainbow-canvas-*.css">
</head>
<body>
  <rainbow-canvas style="height: 300px;"></rainbow-canvas>

  <script>
    window.__RAINBOW_CONFIG__ = {
      apiKey: 'your-key'
    }
  </script>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="node_modules/rainbow-micro/dist/esm/rainbow-canvas.js" type="module"></script>
</body>
</html>

Overlay Only

For floating gradient viewer without background changes:

<rainbow-overlay></rainbow-overlay>

<script>
  window.__RAINBOW_CONFIG__ = {
    apiKey: 'your-key'
  }
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="node_modules/rainbow-micro/dist/esm/rainbow-overlay.js" type="module"></script>

Both Components

Canvas fills a section, floating button shows gradient in modal:

<rainbow-canvas style="height: 400px;"></rainbow-canvas>

<!-- Other content -->

<rainbow-overlay></rainbow-overlay>

<script>
  window.__RAINBOW_CONFIG__ = {
    apiKey: 'your-key'
  }
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="node_modules/rainbow-micro-frontend/dist/esm/rainbow-canvas.js" type="module"></script>
<script src="node_modules/rainbow-micro-frontend/dist/esm/rainbow-overlay.js" type="module"></script>

Dynamic Elements

Components added to the DOM after page load automatically mount:

// Add canvas dynamically
const canvas = document.createElement('div')
canvas.setAttribute('data-rainbow', 'canvas')
canvas.style.height = '300px'
document.body.appendChild(canvas)
// Component mounts automatically!

Styling

Canvas Component

Style the container as normal. rAInbow fills it completely:

.gradient-hero {
  height: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Overlay Component

The floating button is fixed position (bottom-right). CSS defaults work for most cases.

Error Handling

If anything goes wrong (missing API key, network error, timeout), components show a fallback gradient:

#FF1493 (Deep Pink) → #00FF00 (Lime Green)

All errors are logged to browser console with descriptive messages.

Caching & Performance

• First Load: API call (~500-2000ms depending on Cohere latency)
• Subsequent Loads: Cached in memory (<1ms)
• Multiple Components: Only one API call total (all share cached gradient)
• Timeout: 30 seconds

Troubleshooting

Components Not Appearing

1. Check browser console (F12) for errors
2. Verify window.__RAINBOW_CONFIG__ is set before loading scripts
3. Verify Vue 3 is loaded globally
4. Check Network tab - is the API request being made?

Watermelon Gradient Showing

This means an error occurred. Check console for details. Common causes:

• Invalid API key
• Network error
• API timeout
• Cohere API is down

Static Gradients (Not Changing)

Gradients are cached per session. To see a new gradient:

1. Hard reload browser (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)
2. Clear browser cache
3. Open in private/incognito window

Requirements

• Vue 3: Must be available globally (window.Vue)
• Modern Browser: ES2020+ support
• Cohere API Key: Free tier available at cohere.com

Security Note

The API key is included in client-side code. For production:

1. Use a backend proxy to hide the key
2. Implement rate limiting on your server
3. Monitor API usage

Example backend proxy:

// Your backend
app.post('/api/gradient', async (req, res) => {
  const colors = await generateGradient() // Call Cohere with server-side key
  res.json({ colors })
})

// Client-side config
window.__RAINBOW_CONFIG__ = {
  apiEndpoint: '/api/gradient'
}

License

MIT

Support

For issues, questions, or feature requests:

1. Check the documentation
2. Review examples in examples/ folder
3. Open an issue on GitHub