🌊 TachyonFX Renderer

WebAssembly Terminal Effects in the Browser

Canvas 1: Showcase

// Create the renderer with config
const config1 = new RendererConfig('canvas1')
  .withDsl('fx::slide_in(Motion::RightToLeft, 10, 0, Color::Black, (800, Interpolation::QuadOut))')
  .withCanvas(ansiContent)
  .withSleepBetweenReplay(1500);
const renderer1 = createRenderer(config1);

// Update to fade effect
renderer1.updateEffect('fx::fade_from_fg(Color::Black, (600, Interpolation::CubicOut))');

// Update to complex parallel effect
renderer1.updateEffect(`fx::parallel(&[
  fx::sweep_in(Motion::RightToLeft, 15, 0, Color::Black, (1000, Interpolation::BounceOut)),
  fx::coalesce((1000, Interpolation::QuadOut))
])`);

// Restart current effect
renderer1.restartEffect();

Canvas 2: Timeline

// Create the renderer with config
const config2 = new RendererConfig('canvas2')
  .withDsl('fx::sweep_in(Motion::LeftToRight, 10, 0, Color::Black, (1200, Interpolation::QuadOut))')
  .withCanvas(ansiContent);
const renderer2 = createRenderer(config2);

// Restart current effect
renderer2.restartEffect();

Global Controls

API Demonstration

This example demonstrates the TachyonFX Renderer API using two independent canvas instances. Each renderer loads different ANSI content and applies different effects from the DSL.

Available API: new RendererConfig(container_id), .withDsl(dsl_code), .withCanvas(canvas_content), .withSleepBetweenReplay(ms), createRenderer(config), updateEffect(dsl_code), restartEffect(), destroy()