@kmotion/animation 0.1.0 → 0.1.1

package/README.md

@@ -1,12 +1,14 @@
 # @kmotion/animation
 
-Embed any Kmotion template preview in **React, Vue, Svelte, Solid, or vanilla JS**.
+Embed the **full live animation** (same page as “Open full page” on Kmotion) in **React, Vue, Svelte, Solid, or vanilla JS**. This is not the small gallery card preview.
 
 ```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.
+`<Preview id="neo-museum" />` loads `/p/neo-museum` — the complete template you built from the prompt. Scroll inside the preview to move through the site.
+
+Default origin is `http://localhost:5173`. After you deploy, call `setOrigin('https://your-domain.com')` once, or pass `origin` on each preview.
 
 ## React
 
@@ -61,7 +63,7 @@ Preview(document.querySelector('#app'), { id: 'heritage-grove' });
 Or the web component after any import:
 
 ```html
-<kmotion-preview template="heritage-grove" height="640px"></kmotion-preview>
+<kmotion-preview template="heritage-grove" height="100vh"></kmotion-preview>
 ```
 
 ## Props
@@ -70,7 +72,7 @@ Or the web component after any import:
 | --- | --- | --- | --- |
 | `id` | string | required | Template id, e.g. `heritage-grove` |
 | `origin` | string | `http://localhost:5173` | Kmotion site origin |
-| `height` | string | `640px` | Preview height |
+| `height` | string | `100vh` | Preview height |
 | `title` | string | `Kmotion preview` | iframe title |
 
 ```js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kmotion/animation",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Embed any Kmotion template preview in React, Vue, Svelte, Solid, or vanilla JS.",
   "type": "module",
   "license": "MIT",

package/src/core.js

@@ -36,7 +36,8 @@ export function embedUrl(id, origin) {
   if (!templateId) {
     throw new Error('kmotion: Preview needs an id, e.g. "heritage-grove"');
   }
-  return `${getOrigin(origin)}/p/${encodeURIComponent(templateId)}?embed=1`;
+  // Full live page — same as “Open full page”, not the gallery card (?embed=1).
+  return `${getOrigin(origin)}/p/${encodeURIComponent(templateId)}`;
 }
 
 function escapeAttr(value) {
@@ -68,7 +69,7 @@ class KmotionPreview extends HTMLElement {
 
     const templateId = this.getTemplateId();
     const origin = this.getAttribute('origin') || '';
-    const height = this.getAttribute('height') || '640px';
+    const height = this.getAttribute('height') || '100vh';
     const title = this.getAttribute('title') || 'Kmotion preview';
 
     let src = '';

package/src/js.js

@@ -4,7 +4,7 @@ definePreview();
 
 export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
 
-function applyProps(el, { id, origin, height = '640px', title = 'Kmotion preview' }) {
+function applyProps(el, { id, origin, height = '100vh', title = 'Kmotion preview' }) {
   el.setAttribute('template', id);
   if (origin) el.setAttribute('origin', origin);
   else el.removeAttribute('origin');

package/src/react.js

@@ -8,7 +8,7 @@ export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core
 export function Preview({
   id,
   origin,
-  height = '640px',
+  height = '100vh',
   title = 'Kmotion preview',
   className,
   style,

package/src/solid.js

@@ -9,7 +9,7 @@ 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('height', props.height || '100vh');
   el.setAttribute('title', props.title || 'Kmotion preview');
 }
 

package/src/svelte.js

@@ -4,7 +4,7 @@ definePreview();
 
 export { TEMPLATES, embedUrl, setOrigin, getOrigin, definePreview } from './core.js';
 
-function applyProps(el, { id, origin, height = '640px', title = 'Kmotion preview' }) {
+function applyProps(el, { id, origin, height = '100vh', title = 'Kmotion preview' }) {
   el.setAttribute('template', id);
   if (origin) el.setAttribute('origin', origin);
   else el.removeAttribute('origin');

package/src/vue.js

@@ -10,7 +10,7 @@ export const Preview = defineComponent({
   props: {
     id: { type: String, required: true },
     origin: { type: String, default: '' },
-    height: { type: String, default: '640px' },
+    height: { type: String, default: '100vh' },
     title: { type: String, default: 'Kmotion preview' },
   },
   setup(props) {