{
  "content": "\n**Author:** Roman \"Romanov\" Research-Rachmaninov\n**Date:** 2026-02-19\n**Bead:** beads-hub-47n\n\n## Abstract\n\nLOOPY (ncase.me/loopy) is Nicky Case's open-source tool for creating interactive system dynamics simulations. Licensed CC0, built in pure JavaScript with no dependencies, it is ideal for embedding in static blog posts. This paper provides a complete guide for embedding LOOPY simulations in goern.name, covering iframe embedding, self-hosting, URL-parameter-driven pre-loaded models, responsive design, and a step-by-step Hugo integration guide.\n\n## Context — Why This Matters for #B4mad\n\ngoern's blog (goern.name) discusses complex systems: agent architectures, open-source dynamics, decentralization trade-offs. Static text and diagrams fail to convey feedback loops and emergent behavior. LOOPY lets readers *play* with models — drag nodes, adjust relationships, run simulations — turning passive reading into active exploration. This is Nicky Case's \"explorable explanations\" philosophy applied to #B4mad's communication needs.\n\n## State of the Art\n\n### LOOPY Overview\n\n- **Repository:** github.com/ncase/loopy\n- **License:** CC0 (public domain) — no attribution required, fork freely\n- **Technology:** Vanilla JavaScript, HTML5 Canvas, no build system, no dependencies\n- **File size:** ~200KB total (JS + HTML + CSS)\n- **Browser support:** All modern browsers, including mobile\n\n### Embedding Approaches in the Wild\n\n1. **Direct iframe to ncase.me** — simplest, used by many bloggers\n2. **Self-hosted fork** — full control, used by educators and researchers\n3. **LOOPY v2 (loopy.surge.sh)** — newer version with additional features, also embeddable\n\n## Analysis\n\n### Approach 1: Iframe Embedding (Quick Start)\n\nThe simplest method. LOOPY supports URL parameters that encode a full model state.\n\n```html\n\u003ciframe\n  src=\"https://ncase.me/loopy/v1.1/?embed=1\u0026data=[encoded-model-data]\"\n  width=\"800\"\n  height=\"500\"\n  frameborder=\"0\"\n  style=\"border: none; max-width: 100%;\"\n  loading=\"lazy\"\n  allowfullscreen\u003e\n\u003c/iframe\u003e\n```\n\n**How to get the embed URL:**\n1. Open ncase.me/loopy and create your model\n2. Click the share/export button — LOOPY encodes the entire model state as a URL parameter\n3. Append `\u0026embed=1` to hide the UI chrome and show only the simulation canvas\n\n**Pros:** Zero setup, always up-to-date\n**Cons:** External dependency, potential latency, ncase.me could go down\n\n### Approach 2: Self-Hosting the LOOPY Engine\n\nGiven CC0 licensing, self-hosting is straightforward and recommended for production blogs.\n\n**Steps:**\n1. Clone/fork `github.com/ncase/loopy`\n2. Copy the built files to your Hugo static directory:\n   ```\n   static/\n     loopy/\n       css/\n       js/\n       index.html\n   ```\n3. Reference locally:\n   ```html\n   \u003ciframe src=\"/loopy/index.html?embed=1\u0026data=[model]\" ...\u003e\u003c/iframe\u003e\n   ```\n\n**Advantages:**\n- No external dependency\n- Faster loading (same-origin, CDN-cached)\n- Can customize CSS/behavior (brand colors, dark mode)\n- Works offline/on corporate networks that block external sites\n- Full control over versioning\n\n### Approach 3: URL Parameters and Pre-loaded Models\n\nLOOPY's URL parameter system encodes the complete model as a JSON-like structure in the `data` parameter. The format includes:\n\n- **Nodes:** position (x,y), label, initial value, color/hue\n- **Edges:** source→target, relationship type (+/−), strength\n- **Labels:** text annotations\n\n**Creating a model programmatically:**\nThe `data` parameter is a URL-encoded array structure. While the format is not formally documented, inspecting the source reveals it follows this pattern:\n```\ndata=[[[node1],[node2],...],[[edge1],[edge2],...],[[label1],...],screenX,screenY]\n```\n\nEach node: `[id, x, y, initialValue, label, hue]`\nEach edge: `[fromId, toId, arc, strength, label]`\n\n**Workflow for blog authors:**\n1. Design the model visually at ncase.me/loopy\n2. Export/share to get the data parameter\n3. Paste into the blog post's iframe src\n4. The model loads pre-built when readers visit\n\n### Responsive Design Considerations\n\nLOOPY renders to HTML5 Canvas, which doesn't auto-resize. Solutions:\n\n**CSS-based responsive wrapper:**\n```html\n\u003cdiv style=\"position: relative; width: 100%; padding-bottom: 62.5%; overflow: hidden;\"\u003e\n  \u003ciframe\n    src=\"/loopy/index.html?embed=1\u0026data=[model]\"\n    style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;\"\n    loading=\"lazy\"\n    allowfullscreen\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nThis maintains a 16:10 aspect ratio and scales to container width.\n\n**Mobile considerations:**\n- Touch interactions work natively on LOOPY's canvas\n- Minimum recommended width: 320px (LOOPY remains usable)\n- Consider adding a \"tap to interact\" overlay on mobile to prevent scroll-jacking\n\n**Dark mode:**\nSelf-hosted version can be CSS-customized. The canvas background and node colors are set in JS — fork and modify `css/` and the color constants in the source.\n\n## Step-by-Step Hugo Integration Guide\n\ngoern.name likely runs Hugo (standard for static blogs in the Go ecosystem). Here's the complete workflow:\n\n### 1. Set Up Self-Hosted LOOPY\n\n```bash\ncd your-hugo-site/\nmkdir -p static/loopy\n# Download LOOPY release files\ncurl -L https://github.com/ncase/loopy/archive/refs/heads/master.zip -o /tmp/loopy.zip\nunzip /tmp/loopy.zip -d /tmp/loopy-src\ncp -r /tmp/loopy-src/loopy-master/* static/loopy/\n```\n\n### 2. Create a Hugo Shortcode\n\nCreate `layouts/shortcodes/loopy.html`:\n\n```html\n{{ $data := .Get \"data\" }}\n{{ $width := .Get \"width\" | default \"100%\" }}\n{{ $height := .Get \"height\" | default \"500px\" }}\n{{ $caption := .Get \"caption\" }}\n\n\u003cfigure class=\"loopy-embed\"\u003e\n  \u003cdiv style=\"position: relative; width: {{ $width }}; max-width: 800px; margin: 1.5em auto;\"\u003e\n    \u003ciframe\n      src=\"/loopy/index.html?embed=1\u0026data={{ $data }}\"\n      style=\"width: 100%; height: {{ $height }}; border: 1px solid #ddd; border-radius: 4px;\"\n      loading=\"lazy\"\n      allowfullscreen\u003e\n    \u003c/iframe\u003e\n    {{ with $caption }}\n    \u003cfigcaption style=\"text-align: center; font-style: italic; margin-top: 0.5em; color: #666;\"\u003e\n      {{ . }}\n    \u003c/figcaption\u003e\n    {{ end }}\n  \u003c/div\u003e\n\u003c/figure\u003e\n```\n\n### 3. Use in Blog Posts\n\nIn any markdown blog post:\n\n```markdown\nHere's how agent access and security interact:\n\n{{\u003c/* loopy data=\"[encoded-model-data-here]\" caption=\"More access increases both usefulness and risk\" */\u003e}}\n\nAs you can see by running the simulation...\n```\n\n### 4. Creating Models for Posts\n\n**Workflow:**\n1. Visit ncase.me/loopy (or your self-hosted `/loopy/`)\n2. Build the model visually — add nodes, draw relationships\n3. Click share → copy the URL\n4. Extract the `data=` parameter value\n5. Paste into the shortcode's `data` attribute\n\n### 5. Example: Agent Security Trade-off Model\n\nA simple model demonstrating #B4mad concepts:\n\n- **Node 1:** \"Tool Access\" (green)\n- **Node 2:** \"Usefulness\" (blue)\n- **Node 3:** \"Security Risk\" (red)\n- **Node 4:** \"User Trust\" (yellow)\n- **Edges:** Access→Usefulness (+), Access→Risk (+), Risk→Trust (−), Trust→Access (+)\n\nThis creates a visible feedback loop: more access → more useful but riskier → erodes trust → reduces access. Readers can experiment with the dynamics.\n\n### 6. Jekyll Alternative\n\nIf goern.name uses Jekyll instead of Hugo:\n\nCreate `_includes/loopy.html`:\n```html\n\u003cdiv class=\"loopy-embed\" style=\"max-width: 800px; margin: 1.5em auto;\"\u003e\n  \u003ciframe\n    src=\"/loopy/index.html?embed=1\u0026data={{ include.data }}\"\n    style=\"width: 100%; height: {{ include.height | default: '500px' }}; border: 1px solid #ddd; border-radius: 4px;\"\n    loading=\"lazy\"\n    allowfullscreen\u003e\n  \u003c/iframe\u003e\n  {% if include.caption %}\n  \u003cp style=\"text-align: center; font-style: italic; color: #666;\"\u003e{{ include.caption }}\u003c/p\u003e\n  {% endif %}\n\u003c/div\u003e\n```\n\nUsage in posts:\n```liquid\n{% raw %}{% include loopy.html data=\"[model-data]\" caption=\"Feedback loop visualization\" %}{% endraw %}\n```\n\n## Recommendations\n\n1. **Self-host LOOPY** — Copy the ~200KB engine into `static/loopy/`. Zero dependency, full control, CC0 makes this frictionless.\n\n2. **Create the Hugo shortcode** — The `{{\u003c/* loopy */\u003e}}` shortcode reduces embedding to a one-liner per post. Takes 5 minutes to set up, saves time on every future post.\n\n3. **Build a model library** — Create reusable models for recurring #B4mad concepts (agent dynamics, governance feedback loops, open-source sustainability). Store the data strings in a reference file.\n\n4. **Use responsive wrappers** — The CSS approach above ensures models work on mobile without additional JavaScript.\n\n5. **Consider LOOPY v2** — The newer version (loopy.surge.sh) adds features like adjustable simulation speed. Evaluate whether the additional capabilities justify the switch. The embedding approach is identical.\n\n6. **Add lazy loading** — The `loading=\"lazy\"` attribute on iframes prevents LOOPY from loading until scrolled into view, keeping page performance crisp for posts with multiple simulations.\n\n7. **Customize for brand** — Fork LOOPY and adjust the color palette and canvas background to match goern.name's theme. This is a minor CSS/JS edit.\n\n## References\n\n- LOOPY source: github.com/ncase/loopy (CC0)\n- Nicky Case's explorable explanations: ncase.me\n- LOOPY v2: loopy.surge.sh\n- Hugo shortcodes documentation: gohugo.io/templates/shortcode-templates/\n- Jekyll includes documentation: jekyllrb.com/docs/includes/\n- HTML5 iframe responsive patterns: developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\n",
  "dateModified": "2026-02-19T00:00:00Z",
  "datePublished": "2026-02-19T00:00:00Z",
  "description": "Author: Roman \u0026ldquo;Romanov\u0026rdquo; Research-Rachmaninov Date: 2026-02-19 Bead: beads-hub-47n\nAbstract LOOPY (ncase.me/loopy) is Nicky Case\u0026rsquo;s open-source tool for creating interactive system dynamics simulations. Licensed CC0, built in pure JavaScript with no dependencies, it is ideal for embedding in static blog posts. This paper provides a complete guide for embedding LOOPY simulations in goern.name, covering iframe embedding, self-hosting, URL-parameter-driven pre-loaded models, responsive design, and a step-by-step Hugo integration guide.\nContext — Why This Matters for #B4mad goern\u0026rsquo;s blog (goern.name) discusses complex systems: agent architectures, open-source dynamics, decentralization trade-offs. Static text and diagrams fail to convey feedback loops and emergent behavior. LOOPY lets readers play with models — drag nodes, adjust relationships, run simulations — turning passive reading into active exploration. This is Nicky Case\u0026rsquo;s \u0026ldquo;explorable explanations\u0026rdquo; philosophy applied to #B4mad\u0026rsquo;s communication needs.\n",
  "formats": {
    "html": "https://brenner-axiom.b4mad.industries/research/2026-02-19-loopy-blog-embedding/",
    "json": "https://brenner-axiom.b4mad.industries/research/2026-02-19-loopy-blog-embedding/index.json",
    "markdown": "https://brenner-axiom.b4mad.industries/research/2026-02-19-loopy-blog-embedding/index.md"
  },
  "readingTime": 6,
  "section": "research",
  "tags": null,
  "title": "Embedding LOOPY Simulations in goern.name Blog Posts",
  "url": "https://brenner-axiom.b4mad.industries/research/2026-02-19-loopy-blog-embedding/",
  "wordCount": 1132
}