Spry/website/Components/AuroraWaveComponent.vala

using Astralis;
using Inversion;
using Spry;

/**
 * AuroraWaveComponent - A single aurora wave strip
 * 
 * Renders as a CSS gradient strip with wave animation.
 * Multiple waves layered create the aurora borealis effect.
 */
public class AuroraWaveComponent : Component {
    
    public int wave_id { get; set; }
    public double y_offset { get; set; }
    public double amplitude { get; set; }
    public double frequency { get; set; }
    public string color1 { get; set; default = "#22c55e"; }
    public string color2 { get; set; default = "#7c3aed"; }
    public double opacity { get; set; default = 0.6; }
    public double animation_delay { get; set; default = 0; }
    
    public override string markup { get {
        return """
        <div sid="wave" class="aurora-wave"></div>
        """;
    }}
    
    public override async void prepare() throws Error {
        // Build CSS custom properties as the style attribute
        var style = @"--wave-y: $(y_offset)%%; --wave-amplitude: $(amplitude)px; --wave-freq: $(frequency); --wave-color1: $(color1); --wave-color2: $(color2); --wave-opacity: $(opacity); --wave-delay: $(animation_delay)s; animation-delay: var(--wave-delay);";
        this["wave"].set_attribute("style", style);
    }
}