Needle Engine × Webflow

Bring real, interactive 3D to your Webflow pages. 🚀 Build your scene in Unity or Blender, export it with Needle Engine, and drop it onto a Webflow page — then let the page and the 3D scene play off each other. This repo is the demo behind the guide: a Webflow button that plays an animation inside the scene, plus a scrollytelling page.

📖 Full step-by-step guide → engine.needle.tools/docs/…/webflow

▶️ Live demo: https://needle-engine-demo.webflow.io/  ·  Scrollytelling: https://needle-engine-demo.webflow.io/scrollytelling

---

Two ways to embed — both first-class

• 🪟 iFrame — the fastest drop-in. Paste one line, point it at your deployed URL, done. The page and scene talk via quick messages. Great for hero scenes and simple triggers.
• 🎬 <needle-app> — runs the scene inside your page, so Webflow elements drive it directly (no messaging) and scrollytelling follows the page scroll. Great for deep interaction and storytelling.

Start with the iFrame for speed; reach for <needle-app> when you want the page and the 3D to feel like one experience. You can't pick wrong.

A quick taste — embed the scene inline and call right into it from your page, all from one URL:

<script type="module" src="https://your-project.needle.run/needle-app.js"></script>
<needle-app src="https://your-project.needle.run/assets/MyScene.glb"></needle-app>

The full walkthrough — iframe + postMessage, <needle-app>, importing engine hooks, and scrollytelling, all with screenshots — lives in the integration guide.

What's in this repo

• webproject/ — the Needle Engine project: the scene and main.ts, which receives messages from Webflow and plays the matching animation.
• The Webflow side (Head code, embed element, <needle-app>) is covered in the guide.

The demo uses a sample GLB hosted on Needle Cloud. For your own project, drop the main.ts logic into your Needle Engine scene (or make a component that handles the incoming message events) and deploy.