https://railsblocks.com/assets/controllers/rainbow_button_controll…2909695f780b5434f288f0d138bcadfd265d5d64.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4  static values = {
5    speed: { type: Number, default: 4 },
6    intensity: { type: Number, default: 0.3 },
7  };
8
9  connect() {
10    this.createRainbowEffect();
11  }
12
13  disconnect() {
14    if (this.animationFrame) {
15      cancelAnimationFrame(this.animationFrame);
16    }
17  }
18
19  createRainbowEffect() {
20    const button = this.element.querySelector("a, button");
21    if (!button) return;
22
23    const animate = () => {
24      const time = Date.now() * 0.001 * this.speedValue;
25
26      // Generate more subtle red-hued colors
27      const colors = this.generateSubtleRedColors(time);
28
29      // Create border gradient and visible shadow
30      const borderGradient = `linear-gradient(135deg, ${colors.join(", ")})`;
31      const shadowColor = colors[Math.floor(colors.length / 2)]; // Use middle color for shadow
32      const shadowIntensity = 0.2 + Math.sin(time) * 0.1; // More visible shadow variation
33
34      // Apply only to border and shadow
35      button.style.setProperty("--rainbow-border", borderGradient);
36      button.style.setProperty("--rainbow-shadow", `0 0 8px ${shadowColor.replace(")", `, ${shadowIntensity})`)}`);
37
38      this.animationFrame = requestAnimationFrame(animate);
39    };
40
41    // Add the rainbow effect class
42    button.classList.add("rainbow-effect");
43    animate();
44  }
45
46  generateSubtleRedColors(time) {
47    const colors = [];
48    const numColors = 3; // Even fewer colors for subtlety
49    const intensity = this.intensityValue;
50
51    for (let i = 0; i < numColors; i++) {
52      const phase = (time + i * 1.0) % (Math.PI * 2);
53
54      // More constrained red spectrum (deeper reds to warm oranges)
55      const hue = 0 + Math.sin(phase) * 12; // Narrower range: 0-12 degrees
56      const saturation = 50 + Math.sin(phase * 1.2) * 20 * intensity; // More visible: 30-70%
57      const lightness = 45 + Math.sin(phase * 1.5) * 15 * intensity; // More contrast: 30-60%
58
59      colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
60    }
61
62    return colors;
63  }
64};