{"id":31871711,"url":"https://github.com/junkdog/tachyonfx-renderer","last_synced_at":"2026-07-03T16:05:04.578Z","repository":{"id":314366548,"uuid":"1051614239","full_name":"junkdog/tachyonfx-renderer","owner":"junkdog","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-12T17:39:02.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-12T20:55:13.858Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junkdog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-06T11:15:44.000Z","updated_at":"2025-10-12T17:39:05.000Z","dependencies_parsed_at":"2025-09-12T03:55:10.455Z","dependency_job_id":"262a2e6f-e21e-412e-8ecf-b02f70c92fee","html_url":"https://github.com/junkdog/tachyonfx-renderer","commit_stats":null,"previous_names":["junkdog/tachyonfx-player","junkdog/tachyonfx-renderer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/junkdog/tachyonfx-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkdog%2Ftachyonfx-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkdog%2Ftachyonfx-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkdog%2Ftachyonfx-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkdog%2Ftachyonfx-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junkdog","download_url":"https://codeload.github.com/junkdog/tachyonfx-renderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junkdog%2Ftachyonfx-renderer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279012809,"owners_count":26085191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-12T20:55:11.819Z","updated_at":"2026-07-03T16:05:04.561Z","avatar_url":"https://github.com/junkdog.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TachyonFX Renderer\n\n[![NPM Badge]][NPM]\n\nWebAssembly library for rendering [tachyonfx](https://github.com/junkdog/tachyonfx) effects in the browser. Replaces\nanimated GIFs in documentation with live, interactive terminal effect demos.\n\n**[🚀 Live Demo](https://junkdog.github.io/tachyonfx-renderer/)**\n\n## Installation\n\n```bash\nnpm install tachyonfx-renderer\n```\n\n## Usage\n\n```typescript\nimport init, { createRenderer, RendererConfig } from 'tachyonfx-renderer';\n\nawait init();\n\nconst config = new RendererConfig('container-id')\n  .withDsl('fx::slide_in(Motion::RightToLeft, 10, 0, Color::Black, (800, Interpolation::QuadOut))')\n  .withCanvas('\\x1b[32mHello, Terminal Effects!\\x1b[0m')\n  .withSleepBetweenReplay(1500);  // Optional: 1.5s between automatic replays\n\nconst renderer = createRenderer(config);\n\n// Update effect and restart\nrenderer.updateEffect('fx::fade_in((600, Interpolation::CubicOut))');\nrenderer.restartEffect();\n\n// Cleanup\nrenderer.destroy();\n```\n\n## API\n\n### `RendererConfig`\n\nBuilder for renderer configuration.\n\n#### Constructor\n- `new RendererConfig(containerId)` - Create config with container DOM element ID\n\n#### Builder Methods\n- `withDsl(dslCode)` - Set effect DSL (see [tachyonfx DSL docs][tfx-dsl] and [fx docs][fx-docs])\n- `withCanvas(ansiContent)` - Set ANSI-formatted text content\n- `withSleepBetweenReplay(sleepMs)` - Optional: Set milliseconds between automatic effect replays\n- `withCanvasPaddingColor(color)` - Optional: Set background color for canvas padding area (hex RGB, e.g. `0x1d2021`)\n- `withAutoResizeCanvasCss(enable)` - Optional: Control whether the renderer auto-sets canvas CSS dimensions on resize. Set to `false` when external CSS controls the canvas size\n\n [tfx-dsl]: https://github.com/junkdog/tachyonfx/blob/development/docs/dsl.md\n [fx-docs]: https://docs.rs/tachyonfx/latest/tachyonfx/fx/index.html\n\n### `createRenderer(config)`\n\nCreates a renderer instance from configuration.\n\nReturns a `TachyonFxRenderer` handle.\n\n### `TachyonFxRenderer` methods\n\n- `updateEffect(dslCode)` - Change and apply a new effect\n- `restartEffect()` - Restart the current effect from the beginning\n- `destroy()` - Stop rendering and cleanup resources\n\n\n## Multiple Instances\n\nMultiple renderers can run independently on the same page:\n\n```typescript\nconst config1 = new RendererConfig('terminal-1')\n  .withDsl(dsl1)\n  .withCanvas(content1);\nconst renderer1 = createRenderer(config1);\n\nconst config2 = new RendererConfig('terminal-2')\n  .withDsl(dsl2)\n  .withCanvas(content2);\nconst renderer2 = createRenderer(config2);\n\nrenderer1.updateEffect(newDsl);\nrenderer2.restartEffect();\n```\n\n## Example\n\nSee the `example/` directory for a complete TypeScript/webpack setup with dual canvas instances.\n\n```bash\n./build-wasm.sh\ncd example\nnpm install\nnpm run dev\n```\n\n## Building from Source\n\n```bash\n# Build WASM library\n./build-wasm.sh\n\n# Or with wasm-pack directly\nwasm-pack build --target web --out-dir pkg\n```\n\n## License\n\nMIT\n\n[npm]: https://www.npmjs.com/package/tachyonfx-renderer\n[NPM Badge]: https://img.shields.io/npm/v/tachyonfx-renderer.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkdog%2Ftachyonfx-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunkdog%2Ftachyonfx-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkdog%2Ftachyonfx-renderer/lists"}