Embed Helix Jump on Your Site

Drop the game into a blog post, a portfolio page, a school project, or anywhere else you want a playable thing on the page. Two lines of HTML, no account, no API key, no tracking.

Live preview

Here's the same iframe you'd paste — playing on this page so you can try the controls before you commit to embedding anywhere. It's the real game, the real physics, the real high-score storage. Tap or drag inside the frame and play.

Live preview at 360 × 540. Resize is up to you.

Why embed it

A playable embed is one of the most generous things you can put on a page. People who came to read your post get a small detour, score 18 rings, and remember the visit. Some uses that make sense:

  • School blogs and class sites — a quick brain-break widget on a sidebar or a "fun page."
  • Developer portfolios — a working interactive thing on an otherwise quiet personal site.
  • Hobby and fan pages — anywhere you want a casual, no-stakes arcade game to share.
  • Internal team pages — the universal lunch-break tab, but on your own infra.
  • Game-review and indie-game blogs — let the reader actually play the thing you're writing about instead of watching a video.

The embed has no ads, no popups, no trackers — just the game and a small "Play on HelixJump.world" link in the corner for attribution.

Option 1 — the iframe (simplest)

Copy this snippet into your HTML wherever you want the game to appear. Adjust the width and height to taste:

<iframe
  src="https://helixjump.world/embed/game/"
  width="480"
  height="720"
  frameborder="0"
  scrolling="no"
  allow="fullscreen; autoplay"
  allowfullscreen
  loading="lazy"
  title="Helix Jump"></iframe>

That's the entire integration. No script tag, no dependency, no config file. If your CMS lets you paste raw HTML into a post (WordPress's HTML block, Ghost's HTML card, Notion via embed, MDX, plain hand-written HTML), this works.

Option 2 — the loader script (auto-sizes, takes attributes)

If you'd rather pass dimensions as attributes and let a small script build the iframe for you, drop in the loader instead. It reads data-width and data-height off its own <script> tag and inserts the iframe in place:

<script src="https://helixjump.world/embed/loader.js"
        data-width="480"
        data-height="720"></script>

The loader is about 80 lines of plain JavaScript, no dependencies, served straight from this site. It defaults to 100% width and 600px height if you omit the attributes, and it includes a <noscript> fallback link so users with JavaScript disabled still see a way to reach the game.

Use the loader if you want responsive embedding without writing CSS for the iframe yourself, or if your CMS strips iframes but allows script tags.

Sizing and responsive behavior

The game is portrait-oriented — the tower runs vertically, the ball falls. Embeds look right when the frame is taller than it is wide. A few sizes that work well:

  • 320 × 480 — sidebar widget, single-column blog rail.
  • 360 × 540 — comfortable inline embed inside a typical 720px content column.
  • 480 × 720 — featured embed, takes up the visual centre of a post.
  • 100% × 80vh — full-width hero on a landing page or course site.

Both the iframe and the loader respect max-width: 100% by default, so on narrow mobile screens the embed will shrink to fit the column instead of overflowing it. If you want it to fill a section completely, set width="100%" and a fixed pixel height — the game will scale its canvas to whatever container you give it.

The game uses 100svh (small viewport height) internally to avoid the mobile-browser toolbar wobble, so vertical sizing stays stable even when the address bar shows and hides on scroll.

Attribution

Every embedded copy includes a small "Play on HelixJump.world ↗" link in the bottom-right corner of the game. It's understated by design — not a banner, not an ad — but please leave it visible. That link is the only thing that distinguishes a generous embed from an outright clone, and it's how other people discover the site.

Beyond that, embed freely. No registration, no commercial restrictions, no rate limits. If your embed gets so much traffic that it starts to matter, send a note — I'll be flattered.

What gets loaded

When the iframe loads it pulls three things from this domain: the embed HTML shell (~3 KB), the game CSS (~14 KB), and the game script (~60 KB). The script then pulls three.js from unpkg.com over HTTPS — about 600 KB compressed, cached aggressively across visits. There are no ad networks, no analytics beacons inside the iframe, and no third-party trackers loaded as part of the game.

The loading="lazy" attribute on the iframe means the browser will defer loading the game until it's about to scroll into view, so an embed below the fold won't cost your visitors anything on the initial page load.

Compatibility

The game runs in any modern browser with WebGL — that's effectively every desktop and mobile browser updated in the last five years. It needs JavaScript enabled inside the iframe (this is independent of JavaScript on your host page). Touch and mouse inputs both work; fullscreen is available via the allowfullscreen attribute.

If your site sets a strict Content Security Policy that blocks frame-src, you'll need to add helixjump.world to your allowed iframe sources.

Play the full version