# Integration Patterns
## Vanilla HTML Drop-In
```html
```
## Embedding in an iframe
The parent page controls the animation inside the iframe:
```js
// In the iframe page — expose controls on window
window.monomotion = {
play: (name) => registry.control(name, "play"),
pause: (name) => registry.control(name, "pause"),
seek: (name, t) => registry.control(name, "seek", t),
progress: (name, p) => registry.control(name, "progress", p),
};
```
```js
// In the parent page
const iframe = document.querySelector("iframe");
iframe.contentWindow.monomotion.play("intro");
iframe.contentWindow.monomotion.seek("intro", 1.5);
```
## Web Component
```js
class MonoAnimation extends HTMLElement {
connectedCallback() {
const name = this.getAttribute("name");
const src = this.getAttribute("src");
this.innerHTML = ``;
// Load animation definition dynamically
import(src).then(({ build }) => {
this._tl = build(this.querySelector(".animation-host"));
});
}
play() { this._tl?.play(); }
pause() { this._tl?.pause(); }
seek(t) { this._tl?.seek(t); }
}
customElements.define("mono-animation", MonoAnimation);
```
```html
```
## React Integration (if needed)
```jsx
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
function AnimatedBox() {
const boxRef = useRef(null);
const tlRef = useRef(null);
useEffect(() => {
tlRef.current = gsap.timeline({ paused: true });
tlRef.current.to(boxRef.current, { x: 200, duration: 0.8, ease: "power2.out" });
return () => tlRef.current.kill();
}, []);
return (
);
}
```
## Dashboard Control Panel
```html
0.00s
```