How to render real-time animations in Polyglot Notebook using C#?

[PrashantUnity]

I am using .NET Polyglot Notebook (C#).

I want to render animations (not static images) inside a notebook cell —
similar to how Processing or p5.js can show continuous animations.

What I have tried:

• Rendering multiple images (this creates many outputs instead of animation)
• Using SKBitmap / Canvas / drawing libraries

What I want:

• A single output area that updates per frame

Thanks

[jonsequitur]

One approach is to use the Update method on the Microsoft.DotNet.Interactive.DisplayedValue instance returned by the Display extension method. This will work but the refresh rate will be pretty low. You can also use JavaScript libraries directly if you want to use proper animation APIs.

Here's an example:

using Microsoft.DotNet.Interactive.Formatting;

var display = "".Display("text/html");

foreach (var color in new[]{"red", "green", "yellow", "blue", "black"})
{
    var html = $"""<p style="background-color:{color}">{color}!</p>""".ToHtmlContent();

    display.Update(html);

    await Task.Delay(750);
}

[PrashantUnity]

@jonsequitur Thankyou