JSPM

tachyonfx-renderer

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 71
  • Score
    100M100P100Q8383F
  • 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

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

Installation

npm install tachyonfx-renderer

Usage

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

await init();

const renderer = createRenderer(
  'container-id',
  'fx::slide_in(Motion::RightToLeft, 10, 0, Color::Black, (800, Interpolation::QuadOut))',
  '\x1b[32mHello, Terminal Effects!\x1b[0m'
);

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

// Cleanup
renderer.destroy();

API

createRenderer(containerId, dslCode, ansiContent)

Creates a renderer instance.

  • containerId: DOM element ID for the canvas
  • dslCode: Effect DSL (see tachyonfx DSL docs and fx docs)
  • ansiContent: ANSI-formatted text

Returns a TachyonFxRenderer handle.

TachyonFxRenderer methods

  • updateEffect(dslCode) - Change and apply a new effect
  • playEffect() - Replay the current effect
  • destroy() - Stop rendering and cleanup resources

Effect Examples

// Slide in from right to left
'fx::slide_in(Motion::RightToLeft, 10, 0, Color::Black, (800, Interpolation::QuadOut))'

// Fade in from color
'fx::fade_from_fg(Color::Black, (600, Interpolation::CubicOut))'

// Parallel effects
`fx::parallel(&[
  fx::sweep_in(Motion::RightToLeft, 15, 0, Color::Black, (1000, Interpolation::BounceOut)),
  fx::coalesce((1000, Interpolation::QuadOut))
])`

// Sequential effects
`fx::sequence(&[
  fx::fade_to_fg(Color::Black, (300, Interpolation::Linear)),
  fx::sleep(200),
  fx::fade_from_fg(Color::Black, (300, Interpolation::Linear))
])`

Multiple Instances

Multiple renderers can run independently on the same page:

const renderer1 = createRenderer('terminal-1', dsl1, content1);
const renderer2 = createRenderer('terminal-2', dsl2, content2);

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

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