Spry/demo/Components/ParticleCanvasComponent.vala

using Spry;

/**
 * ParticleCanvasComponent - A single particle in the simulation
 * 
 * Renders as a colored circle at a specific position
 */
public class ParticleCanvasComponent : Component {
    
    public double x { set; get; default = 50; }
    public double y { set; get; default = 50; }
    public string color { set; get; default = "#7c3aed"; }
    public int size { set; get; default = 12; }
    
    public override string markup { get {
        return """
        <div sid="particle" style="position: absolute; border-radius: 50%; box-shadow: 0 0 10px currentColor;"></div>
        """;
    }}
    
    public override async void prepare() throws Error {
        var style = @"position: absolute; left: $(x)%; top: $(y)%; width: $(size)px; height: $(size)px; background: $(color); border-radius: 50%; box-shadow: 0 0 $(size / 2)px $(color); transform: translate(-50%, -50%); transition: all 0.1s ease-out;";
        this["particle"].set_attribute("style", style);
    }
}