JSPM

tachyonfx-renderer

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 75
  • Score
    100M100P100Q72251F
  • License MIT

WebAssembly terminal effects renderer for the browser

Package Exports

  • tachyonfx-renderer
  • tachyonfx-renderer/tachyonfx_renderer.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tachyonfx-renderer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TachyonFX Renderer

NPM Badge

WebAssembly library for rendering tachyonfx effects in the browser. Replaces animated GIFs in documentation with live, interactive terminal effect demos.

🚀 Live Demo

Installation

npm install tachyonfx-renderer

Usage

import init, { createRenderer, RendererConfig } from 'tachyonfx-renderer';

await init();

const config = new RendererConfig('container-id')
  .withDsl('fx::slide_in(Motion::RightToLeft, 10, 0, Color::Black, (800, Interpolation::QuadOut))')
  .withCanvas('\x1b[32mHello, Terminal Effects!\x1b[0m')
  .withSleepBetweenReplay(1500);  // Optional: 1.5s between automatic replays

const renderer = createRenderer(config);

// Update effect and restart
renderer.updateEffect('fx::fade_in((600, Interpolation::CubicOut))');
renderer.restartEffect();

// Cleanup
renderer.destroy();

API

RendererConfig

Builder for renderer configuration.

Constructor

  • new RendererConfig(containerId) - Create config with container DOM element ID

Builder Methods

  • withDsl(dslCode) - Set effect DSL (see tachyonfx DSL docs and fx docs)
  • withCanvas(ansiContent) - Set ANSI-formatted text content
  • withSleepBetweenReplay(sleepMs) - Optional: Set milliseconds between automatic effect replays

createRenderer(config)

Creates a renderer instance from configuration.

Returns a TachyonFxRenderer handle.

TachyonFxRenderer methods

  • updateEffect(dslCode) - Change and apply a new effect
  • restartEffect() - Restart the current effect from the beginning
  • destroy() - Stop rendering and cleanup resources

Multiple Instances

Multiple renderers can run independently on the same page:

const config1 = new RendererConfig('terminal-1')
  .withDsl(dsl1)
  .withCanvas(content1);
const renderer1 = createRenderer(config1);

const config2 = new RendererConfig('terminal-2')
  .withDsl(dsl2)
  .withCanvas(content2);
const renderer2 = createRenderer(config2);

renderer1.updateEffect(newDsl);
renderer2.restartEffect();

Example

See the example/ directory for a complete TypeScript/webpack setup with dual canvas instances.

./build-wasm.sh
cd example
npm install
npm run dev

Building from Source

# Build WASM library
./build-wasm.sh

# Or with wasm-pack directly
wasm-pack build --target web --out-dir pkg

License

MIT