{"_id":"@brett_lamy/viz-engine","_rev":"2-17d7b35a280f806f863af821a134b829","name":"@brett_lamy/viz-engine","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@brett_lamy/viz-engine","version":"0.2.0","_id":"@brett_lamy/viz-engine@0.2.0","maintainers":[{"name":"bel423","email":"bel423@gmail.com"}],"homepage":"https://github.com/BLamy/viz-engine#readme","bugs":{"url":"https://github.com/BLamy/viz-engine/issues"},"dist":{"shasum":"1ea39e48d2421b388c90ecdc82e62a65bdc231eb","tarball":"https://registry.npmjs.org/@brett_lamy/viz-engine/-/viz-engine-0.2.0.tgz","fileCount":53,"integrity":"sha512-1I++YB/jQHkaoFGhv7zbEDfOJKmFblWCdkjqqxqcC9UTtPLtjkjEDiP2apiL9c8TfGRk9wRjL9sgliqyVszwUg==","signatures":[{"sig":"MEUCIExjPIQPbV1Hwry100rk5cvNW6BefVe5/G2S15HhpjrfAiEA5cPLPHpNlEGZQiwDvIaaimqVOsC7aQRog2MfNbONnic=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":320081},"main":"./dist/index.js","type":"module","types":"./dist/src/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/index.js"},"./acts":{"types":"./dist/src/acts.d.ts","import":"./dist/acts.js"},"./draw":{"types":"./dist/src/draw.d.ts","import":"./dist/draw.js"},"./narrator":{"types":"./dist/src/narrator.d.ts","import":"./dist/narrator.js"},"./styles.css":"./dist/styles.css"},"gitHead":"78120a42010e1a242bc1e065334c64896cd2e570","scripts":{"build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"bel423","email":"bel423@gmail.com"},"repository":{"url":"git+https://github.com/BLamy/viz-engine.git","type":"git"},"_npmVersion":"10.9.2","description":"A declarative, audio-synchronized SVG timeline engine for narrated explainers.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"23.11.0","dependencies":{"d3":"^7.9.0","katex":"^0.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7","react":"^19","react-dom":"^19","typescript":"^5","vite-plugin-dts":"^4","@vitejs/plugin-react":"^5"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/viz-engine_0.2.0_1787158530673_0.7637348517830507","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@brett_lamy/viz-engine","version":"0.2.1","description":"A declarative, audio-synchronized SVG timeline engine for narrated explainers.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/src/index.d.ts","exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/index.js"},"./draw":{"types":"./dist/src/draw.d.ts","import":"./dist/draw.js"},"./acts":{"types":"./dist/src/acts.d.ts","import":"./dist/acts.js"},"./narrator":{"types":"./dist/src/narrator.d.ts","import":"./dist/narrator.js"},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"vite build","prepublishOnly":"npm run build"},"dependencies":{"d3":"^7.9.0","katex":"^0.17.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"publishConfig":{"access":"public"},"engines":{"node":">=18"},"repository":{"type":"git","url":"git+https://github.com/BLamy/viz-engine.git"},"devDependencies":{"vite":"^7","@vitejs/plugin-react":"^5","vite-plugin-dts":"^4","typescript":"^5","react":"^19","react-dom":"^19"},"gitHead":"412a0eb6733332670632985a2f8c9c7d10f0a6dc","_id":"@brett_lamy/viz-engine@0.2.1","bugs":{"url":"https://github.com/BLamy/viz-engine/issues"},"homepage":"https://github.com/BLamy/viz-engine#readme","_nodeVersion":"22.23.2","_npmVersion":"12.0.2","dist":{"integrity":"sha512-gp0ozr8kyeNd8ekOAF28oi67CSogSs0OIWS3fwd6otJays/BPzlKi4FEeYQeqmxfdUDGvfh4folhFp4V17mDpw==","shasum":"346520ca95201c5b32b258875864a9e72e68c4f6","tarball":"https://registry.npmjs.org/@brett_lamy/viz-engine/-/viz-engine-0.2.1.tgz","fileCount":53,"unpackedSize":320081,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA3cGF+NWV7nC5mdD/Iq6D0BB0oR1XTdRozUQ349oirqAiEArILMU7/6VS/p6AUbTFWgOubsw7zoWIfOBdSXwxSGeiQ="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4551300a-2d3b-4660-ac1e-df817242fb93"}},"directories":{},"maintainers":[{"name":"bel423","email":"bel423@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/viz-engine_0.2.1_1787159560064_0.1547863770324589"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-19T16:55:30.551Z","modified":"2026-08-19T17:12:40.441Z","0.2.0":"2026-08-19T16:55:30.810Z","0.2.1":"2026-08-19T17:12:40.257Z"},"bugs":{"url":"https://github.com/BLamy/viz-engine/issues"},"homepage":"https://github.com/BLamy/viz-engine#readme","repository":{"type":"git","url":"git+https://github.com/BLamy/viz-engine.git"},"description":"A declarative, audio-synchronized SVG timeline engine for narrated explainers.","maintainers":[{"name":"bel423","email":"bel423@gmail.com"}],"readme":"# @brett_lamy/viz-engine\n\nThe reusable timeline and SVG primitive layer behind the O'RLY explainer\nbookshelf.\n\n```tsx\nimport { Camera, Player, Timeline, colors, ease } from '@brett_lamy/viz-engine';\nimport '@brett_lamy/viz-engine/styles.css';\n\nconst timeline = new Timeline();\nconst radius = timeline.channel('radius', 0);\ntimeline.tween(radius, 80, { at: 0, dur: 1, ease: ease.enter });\n\nexport function Demo() {\n  return (\n    <Player timeline={timeline} loop>\n      {(state) => (\n        <Camera x={640} y={360} k={1}>\n          <circle cx={640} cy={360} r={state.get(radius)} fill={colors.ACCENT} />\n        </Camera>\n      )}\n    </Player>\n  );\n}\n```\n\nThe package also exposes `@brett_lamy/viz-engine/draw`, `/acts`, and\n`/narrator` for the lower-level compatibility APIs.\n\n## Architecture diagrams\n\nThe architecture vocabulary is designed for explanatory diagrams rather than\nstatic infrastructure inventories. `ArchitectureFrame` supplies the restrained\npaper canvas, `ArchitectureCard` gives typed nodes a consistent editorial\nhierarchy, `ArchitectureEdge` routes labeled traffic with scrub-safe flow, and\n`ArchitectureGrid` / `ArchitecturePhaseRail` cover dense stores and protocol\nphases.\n\n```tsx\nimport {\n  ArchitectureCard,\n  ArchitectureEdge,\n  ArchitectureFrame,\n} from '@brett_lamy/viz-engine';\n\n<ArchitectureFrame w={1200} h={620} label=\"EVENT LOG\" rightLabel=\"OFFSET 0043\">\n  <ArchitectureEdge\n    from={{ x: 210, y: 220 }}\n    to={{ x: 520, y: 220 }}\n    label=\"APPEND\"\n    tone=\"blue\"\n    flow={writeU}\n  />\n  <ArchitectureCard x={210} y={220} label=\"WRITER\" meta=\"CLIENT\" tone=\"green\" />\n  <ArchitectureCard x={520} y={220} label=\"STREAM\" meta=\"APPEND-ONLY\" tone=\"blue\" />\n</ArchitectureFrame>\n```\n\nAll primitives are deterministic SVG: drive `u` and `flow` from the timeline,\nand seeking produces the same diagram at the same sampled time.\n\n## Video player\n\n`VizPlayer` is included in this package. Give it a `Timeline` and a render\nfunction; the same timeline remains seekable and can optionally follow\nnarration audio:\n\n```tsx\nimport { Timeline, VizPlayer } from '@brett_lamy/viz-engine';\nimport '@brett_lamy/viz-engine/styles.css';\n\nconst timeline = new Timeline();\nconst opacity = timeline.channel('opacity', 0);\ntimeline.tween(opacity, 1, { at: 0, dur: 0.5 });\n\n<VizPlayer\n  scene={{\n    timeline,\n    render: (state) => <circle opacity={state.get(opacity)} />,\n  }}\n/>\n```\n\nFor markdown/document URLs, `VideoEmbed` selects a native `<video>` element\nfor `.mp4`, `.webm`, and `.ogg` files and an iframe for hosted players:\n\n```tsx\nimport { VideoEmbed } from '@brett_lamy/viz-engine';\n\n<VideoEmbed src=\"https://example.com/explainer.mp4\" title=\"Explainer\" />\n```\n","readmeFilename":"README.md"}