Two methods depending on how much control you need. No npm required. Just add to HTML. Supports lazy loading, transparent backgrounds, and mouse interactivity.
Vanilla_Integration enables embedding interactive 3D scenes directly into web pages using plain JavaScript and HTML without requiring npm installs. It supports two main methods: a runtime API for programmatic control over scene objects and animations, and a simple full-page background setup for decorative or interactive backgrounds. The skill handles lazy loading, transparent backgrounds, and mouse interactivity, enhancing user experience while balancing performance considerations.
This skill is ideal for front-end developers and performance marketers working on immersive brand experiences that require lightweight, customizable 3D visuals. Growth leads managing campaigns on content-heavy landing pages can use it to add dynamic backgrounds without adding heavy dependencies. Agencies building interactive product showcases benefit from the runtime API to trigger animations or respond to user events programmatically.
First, practitioners decide between embedding a full-page 3D background via a custom HTML tag or using the runtime API for granular object control. Next, they integrate the scene URL into the HTML or JavaScript, ensuring lazy loading by preloading the scene asset to reduce perceived load time. Then, marketers adjust interactivity by toggling pointer events, allowing mouse input when necessary or disabling it for purely decorative scenes. Finally, event listeners can be attached through the runtime API to respond to clicks, hovers, or custom triggers, enabling dynamic user engagement.
How do I prevent the 3D scene from blocking page content interaction? Set pointer-events to none on the scene container if it’s decorative only, or use pointer-events all to enable mouse interactivity. Can I avoid npm installs to keep my build simple? Yes, you can import the runtime API directly via CDN without any npm dependency. How do I handle low-end devices to maintain performance? The skill includes a built-in check to disable the 3D background on devices with limited CPU cores or small screens, falling back to a static background.
Attach the Vanilla_Integration skill to your Metaflow agent task to embed 3D scenes into client web pages with minimal setup. Specify the scene URL and interaction preferences; Metaflow will handle injecting the necessary HTML and JavaScript snippets. Expect smooth lazy loading with optional interactivity controls to optimize both user experience and page performance. This skill fits naturally into workflows requiring dynamic visual content without complex dependencies.
For broader context, see our roundup of marketing skills claude, and read connect Claude Desktop to Google Ads with MCP for related setup guidance.