@kmotion/animation 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kmotion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# @kmotion/animation
+
+Embed any Kmotion template preview in **React, Vue, Svelte, Solid, or vanilla JS**.
+
+```bash
+npm install @kmotion/animation
+```
+
+Default origin is `http://localhost:5173` (local Kmotion gallery). After you deploy the site, call `setOrigin('https://your-domain.com')` once, or pass `origin` on each preview.
+
+## React
+
+```jsx
+import { Preview } from '@kmotion/animation/react';
+
+export function App() {
+  return <Preview id="heritage-grove" />;
+}
+```
+
+## Vue 3
+
+```vue
+<script setup>
+import { Preview } from '@kmotion/animation/vue';
+</script>
+
+<template>
+  <Preview id="heritage-grove" />
+</template>
+```
+
+## Svelte
+
+```svelte
+<script>
+  import { preview } from '@kmotion/animation/svelte';
+</script>
+
+<div use:preview={{ id: 'heritage-grove' }}></div>
+```
+
+## Solid
+
+```jsx
+import { Preview } from '@kmotion/animation/solid';
+
+export function App() {
+  return Preview({ id: 'heritage-grove' });
+}
+```
+
+## Vanilla JS
+
+```js
+import { Preview } from '@kmotion/animation';
+
+Preview(document.querySelector('#app'), { id: 'heritage-grove' });
+```
+
+Or the web component after any import:
+
+```html
+<kmotion-preview template="heritage-grove" height="640px"></kmotion-preview>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `id` | string | required | Template id, e.g. `heritage-grove` |
+| `origin` | string | `http://localhost:5173` | Kmotion site origin |
+| `height` | string | `640px` | Preview height |
+| `title` | string | `Kmotion preview` | iframe title |
+
+```js
+import { setOrigin, TEMPLATES } from '@kmotion/animation';
+
+setOrigin('https://your-kmotion-site.com');
+console.log(TEMPLATES);
+```
+
+Ids: `3d-portfolio`, `prompt`, `neo-museum`, `portfolio-cosmic`, `adam-roberts`, `lumina`, `heritage-grove`.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@kmotion/animation",
+  "version": "0.1.0",
+  "description": "Embed any Kmotion template preview in React, Vue, Svelte, Solid, or vanilla JS.",
+  "type": "module",
+  "license": "MIT",
+  "author": "kmotion",
+  "keywords": [
+    "kmotion",
+    "animation",
+    "preview",
+    "embed",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "sideEffects": [
+    "./src/core.js"
+  ],
+  "exports": {
+    ".": "./src/js.js",
+    "./react": "./src/react.js",
+    "./vue": "./src/vue.js",
+    "./svelte": "./src/svelte.js",
+    "./solid": "./src/solid.js",
+    "./js": "./src/js.js",
+    "./core": "./src/core.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=17",
+    "solid-js": ">=1",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  }
+}

package/src/core.js

@@ -0,0 +1,123 @@
+const TAG = 'kmotion-preview';
+
+/** Known live template ids on the Kmotion site */
+export const TEMPLATES = [
+  '3d-portfolio',
+  'prompt',
+  'neo-museum',
+  'portfolio-cosmic',
+  'adam-roberts',
+  'lumina',
+  'heritage-grove',
+];
+
+const LOCAL_ORIGIN = 'http://localhost:5173';
+
+function trimSlash(url) {
+  return String(url || '').replace(/\/+$/, '');
+}
+
+export function getOrigin(override) {
+  if (override) return trimSlash(override);
+  if (typeof globalThis !== 'undefined' && globalThis.KMOTION_ORIGIN) {
+    return trimSlash(globalThis.KMOTION_ORIGIN);
+  }
+  return LOCAL_ORIGIN;
+}
+
+/** Set the Kmotion site once (after you deploy, pass the public HTTPS origin). */
+export function setOrigin(url) {
+  if (typeof globalThis === 'undefined') return;
+  globalThis.KMOTION_ORIGIN = trimSlash(url);
+}
+
+export function embedUrl(id, origin) {
+  const templateId = String(id || '').trim();
+  if (!templateId) {
+    throw new Error('kmotion: Preview needs an id, e.g. "heritage-grove"');
+  }
+  return `${getOrigin(origin)}/p/${encodeURIComponent(templateId)}?embed=1`;
+}
+
+function escapeAttr(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;');
+}
+
+class KmotionPreview extends HTMLElement {
+  static get observedAttributes() {
+    return ['template', 'id', 'origin', 'height', 'title'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  getTemplateId() {
+    return this.getAttribute('template') || this.getAttribute('id') || '';
+  }
+
+  render() {
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+
+    const templateId = this.getTemplateId();
+    const origin = this.getAttribute('origin') || '';
+    const height = this.getAttribute('height') || '640px';
+    const title = this.getAttribute('title') || 'Kmotion preview';
+
+    let src = '';
+    let error = '';
+    try {
+      src = embedUrl(templateId, origin);
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'kmotion: invalid preview';
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: ${escapeAttr(height)};
+        }
+        iframe, .kmotion-msg {
+          width: 100%;
+          height: 100%;
+          border: 0;
+          display: block;
+          background: #0c0c0c;
+        }
+        .kmotion-msg {
+          box-sizing: border-box;
+          padding: 24px;
+          color: #a1a1aa;
+          font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
+        }
+      </style>
+      ${
+        error
+          ? `<div class="kmotion-msg">${escapeAttr(error)}</div>`
+          : `<iframe
+              src="${escapeAttr(src)}"
+              title="${escapeAttr(title)}"
+              loading="lazy"
+              allow="autoplay; fullscreen"
+            ></iframe>`
+      }
+    `;
+  }
+}
+
+export function definePreview() {
+  if (typeof customElements === 'undefined') return TAG;
+  if (!customElements.get(TAG)) customElements.define(TAG, KmotionPreview);
+  return TAG;
+}
+
+definePreview();

package/src/js.js

@@ -0,0 +1,33 @@
+import { definePreview, embedUrl } from './core.js';
+
+definePreview();
+
+export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
+
+function applyProps(el, { id, origin, height = '640px', title = 'Kmotion preview' }) {
+  el.setAttribute('template', id);
+  if (origin) el.setAttribute('origin', origin);
+  else el.removeAttribute('origin');
+  el.setAttribute('height', height);
+  el.setAttribute('title', title);
+}
+
+export function Preview(target, props) {
+  if (!target) throw new Error('kmotion: Preview needs a DOM node');
+  definePreview();
+  const el = document.createElement('kmotion-preview');
+  applyProps(el, props || {});
+  target.appendChild(el);
+  return {
+    el,
+    src: embedUrl(props?.id, props?.origin),
+    update(next) {
+      applyProps(el, next || {});
+    },
+    destroy() {
+      el.remove();
+    },
+  };
+}
+
+export default Preview;

package/src/react.js

@@ -0,0 +1,26 @@
+import { createElement } from 'react';
+import { definePreview } from './core.js';
+
+definePreview();
+
+export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
+
+export function Preview({
+  id,
+  origin,
+  height = '640px',
+  title = 'Kmotion preview',
+  className,
+  style,
+}) {
+  return createElement('kmotion-preview', {
+    template: id,
+    origin,
+    height,
+    title,
+    className,
+    style,
+  });
+}
+
+export default Preview;

package/src/solid.js

@@ -0,0 +1,33 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { definePreview } from './core.js';
+
+definePreview();
+
+export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
+
+function applyProps(el, props) {
+  el.setAttribute('template', props.id || '');
+  if (props.origin) el.setAttribute('origin', props.origin);
+  else el.removeAttribute('origin');
+  el.setAttribute('height', props.height || '640px');
+  el.setAttribute('title', props.title || 'Kmotion preview');
+}
+
+/** Solid: const el = Preview({ id: 'heritage-grove' }); */
+export function Preview(props) {
+  definePreview();
+  const el = document.createElement('kmotion-preview');
+  applyProps(el, props || {});
+
+  createEffect(() => {
+    applyProps(el, props || {});
+  });
+
+  onCleanup(() => {
+    el.remove();
+  });
+
+  return el;
+}
+
+export default Preview;

package/src/svelte.js

@@ -0,0 +1,42 @@
+import { definePreview, embedUrl } from './core.js';
+
+definePreview();
+
+export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
+
+function applyProps(el, { id, origin, height = '640px', title = 'Kmotion preview' }) {
+  el.setAttribute('template', id);
+  if (origin) el.setAttribute('origin', origin);
+  else el.removeAttribute('origin');
+  el.setAttribute('height', height);
+  el.setAttribute('title', title);
+}
+
+/** Svelte action: <div use:preview={{ id: 'heritage-grove' }}></div> */
+export function preview(node, props) {
+  definePreview();
+  const el = document.createElement('kmotion-preview');
+  applyProps(el, props || {});
+  node.appendChild(el);
+
+  return {
+    update(next) {
+      applyProps(el, next || {});
+    },
+    destroy() {
+      el.remove();
+    },
+  };
+}
+
+export function Preview(target, props) {
+  if (!target) throw new Error('kmotion: Preview needs a DOM node');
+  const action = preview(target, props);
+  return {
+    $set: action.update,
+    $destroy: action.destroy,
+    src: embedUrl(props?.id, props?.origin),
+  };
+}
+
+export default Preview;

package/src/vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import { definePreview } from './core.js';
+
+definePreview();
+
+export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
+
+export const Preview = defineComponent({
+  name: 'KmotionPreview',
+  props: {
+    id: { type: String, required: true },
+    origin: { type: String, default: '' },
+    height: { type: String, default: '640px' },
+    title: { type: String, default: 'Kmotion preview' },
+  },
+  setup(props) {
+    return () =>
+      h('kmotion-preview', {
+        template: props.id,
+        origin: props.origin || undefined,
+        height: props.height,
+        title: props.title,
+      });
+  },
+});
+
+export default Preview;