MotionShelfStart a project

Delivery guide

Install once. Keep control.

Every approved story ships as a versioned hosted embed and a standalone ZIP. The delivery is pinned to a release, so a later edit cannot silently change the page you launched.

Last updated July 28, 2026
01

Choose the delivery

Hosted embed

Fastest install. MotionShelf hosts the approved runtime and provides a complete sticky-scroll snippet for your platform.

Standalone ZIP

Self-host the pinned HTML, scene contract, procedural assets, and licensed runtime dependencies on your own origin.

Use the hosted embed for the founding project unless your security policy requires self-hosting. The ZIP is included so the delivered page is portable.

02

Plain HTML

Paste the complete export snippet immediately before the closing body tag or inside the page section where the story should appear. The supplied snippet creates the sticky viewport and sends bounded scroll progress to the release iframe.

<!-- Public demo; your delivery uses its own immutable release ID -->
<iframe
  title="Interactive product story"
  src="https://motionshelf.jadru.com/embed/release/release_demo_aer_headphones_v2"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
  referrerpolicy="origin"
  style="display:block;width:100%;height:100dvh;border:0">
</iframe>

Copy the generated snippet from your delivery, not this minimal demonstration. The generated version includes parent-page scroll synchronization.

03

Next.js, Webflow, Framer

Next.js
Add the delivered client component to your project, import it on the target page, and keep the release URL unchanged. No Three.js dependency is required in the parent app.
Webflow
Place an Embed element in a full-width section and paste the plain HTML export. Publish the site; designer preview does not always execute custom scripts.
Framer
Use the delivered code component for synchronized scroll, or an Embed component for the standalone experience. Set width to Fill and avoid a fixed pixel height.
04

Security and layout

  • Allow https://motionshelf.jadru.com in your Content Security Policy frame-src directive for hosted delivery.
  • Do not remove the iframe sandbox or broaden it with same-origin privileges.
  • Keep the story section at the delivered scroll height and the iframe at 100dvh.
  • Do not lazy-load the iframe if the story begins above the fold.
  • Keep a poster and CTA directly after the story for no-script and constrained-device fallback.
05

Launch checklist

  1. Open the final page—not only a CMS preview—on desktop and mobile.
  2. Scroll from before the section through its end and confirm all three story acts.
  3. Check the product CTA, keyboard focus, reduced-motion behavior, and fallback.
  4. Record the release ID and keep the previous embed snippet for immediate rollback.
  5. Send the final URL to MotionShelf support if the parent site clips, overlays, or blocks the iframe.