{"_id":"@4ndr3.dk/mophree-engine","_rev":"8-2504088007f03953e6a39984cc9bae94","name":"@4ndr3.dk/mophree-engine","dist-tags":{"latest":"0.2.6"},"versions":{"0.1.0":{"name":"@4ndr3.dk/mophree-engine","version":"0.1.0","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.1.0","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"f2333fa30bc3ab2ff86f3d84b8397d4fb3e01ecc","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.1.0.tgz","fileCount":11,"integrity":"sha512-rFAPTmh6hBMMfW4cgAoO1rOFkjIYNH746zVosLtuwMQvE0MqSB87i9a8qY6HTf62PN8LloT6Im1Tpv3iDvGGmA==","signatures":[{"sig":"MEYCIQCXc1loU7V6ri3oHhURvl4JceMuJWG8Wo1wHGGQ1xBd2wIhAKv89wKWwLRw+6IESUa91kyPwfLt+8hl6AUlcjZ6cUJ7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78867},"type":"module","exports":{".":"./index.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"three":">=0.180.0 <0.181.0"},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.1.0_1781605366797_0.7783803343358673","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.0","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.0","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"4b6e0ec4ceecad0720aedb8d082adeae63414609","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.0.tgz","fileCount":12,"integrity":"sha512-pGbrsOiTTGrDT4SPEBCbZukPe3UoEoavKOcqu8ZDGCSaZcFjCnDmTykYZlpvx2NgF+XDvNlVyRld0WxHrFy2Pw==","signatures":[{"sig":"MEYCIQDxf50Zf/C9m/LZXoQP1xI6v7bRqNNN4DiCBu1AyE6vhwIhAOo7697tuCA6UUUibZiYIEFEBi7O2KBJ5q9mW/dORHSI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90149},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.0_1781610805693_0.6217933764143773","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.1","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.1","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"5357054a6d2c292a089ef4a3619d204d679c6689","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.1.tgz","fileCount":12,"integrity":"sha512-nnR0JVpKUgpfbyX4bjsZ6MjR7+x0eGvQL0JT9Nd1HU0yI8admXsfy5jeXTB3vUkzczjgmHnXZ10qVQPy26gDjw==","signatures":[{"sig":"MEQCICrwBMFXsPdzQTxO9BBseTpVosV8huDKuhX5MpiwQtVlAiBgd2IvBu/UC2ottL6Io41kDT0fRULUjaRYnNpn0qn4Cg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90857},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.1_1781614263670_0.4422009912912117","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.2","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.2","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"824980595362d35455cf4a58c01e8605120f7425","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.2.tgz","fileCount":12,"integrity":"sha512-WJyifQgV3zAz19IxMVGxzsw8jJuIhH4YAN1Ss46rKGO7c+h0SxM3vDZLeSMqEoTWGn1r6fcx5kFAyMTtMzOgcQ==","signatures":[{"sig":"MEUCIFIyl9WXEkKvz7FPkEu4gID+5VQTXft/g4a8yVq+3n3jAiEAiM9uredVuV5LJo8fKxmmWydFZnp/3cdpBm8jJ6kC3Rk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90859},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.2_1781632643885_0.9508349806621008","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.3","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.3","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"6ef4bcd65bdf3a1c51d8edb7c039575c2f2d574d","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.3.tgz","fileCount":12,"integrity":"sha512-SmVy0cKPXtjL3Kxw+uLIhgi9fOUNvwKwOREwDzl3ToYHNua/w1ec8rlC2G4V17+6ZukTkYXjZGG4MIwBFpFZcQ==","signatures":[{"sig":"MEYCIQDW+IhCRM17/u19j3pZ41iJQrpcgUaLZXPQScEofWeLSAIhAOV8kMOhkaJIsHvb4KDfrJTeNPB2QppY3ECNb0uhMB+8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91603},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.3_1781633073065_0.5722367038355927","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.4","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.4","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"9e67e054dec21d1ec4d4b6b3e7e028ffb6256486","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.4.tgz","fileCount":12,"integrity":"sha512-AzhyFDvTHE9uPYiJnng+dRZDcy+W3ReCQOM0eIQUEW0TSy8LBqd7nmgOBCK4paiJBmt8kBphwGxzzOhX9vblsw==","signatures":[{"sig":"MEUCIQC9UuMBp3jWPgLL41Xsw9GKD+eZ3moiY+R1GG1V8reiXwIgG9/RmmKCPcObouyngRbcffMlT4lcGJ04/U6oTDZEHdk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92216},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.4_1781705837162_0.6358113313087004","host":"s3://npm-registry-packages-npm-production"}},"0.2.5":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.5","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.5","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"dist":{"shasum":"d872f294b9e866458d23cee5b0f14c056ef37c2d","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.5.tgz","fileCount":12,"integrity":"sha512-oxxwKsbHYYTahFwngpjbZ6uSa8cN2ylPnWDrJD3CZZZpD/qEVs1Gz/axQ3Ls71yfKQ2lXaKh5A9FXws1PWZzlg==","signatures":[{"sig":"MEUCIH7hQ3dgmDoCe1Rl1ec153mdMYWzXpa6i9nV081v+NLxAiEAkCGY3iqs5MwdtHe7q+xwiz1k1eBwwldNtmnLShbFb1I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92461},"type":"module","exports":{".":"./index.js","./react":"./react.js"},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"_npmVersion":"11.9.0","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","three":">=0.180.0 <0.181.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mophree-engine_0.2.5_1781706455242_0.01288086570474789","host":"s3://npm-registry-packages-npm-production"}},"0.2.6":{"name":"@4ndr3.dk/mophree-engine","version":"0.2.6","description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"type":"module","exports":{".":"./index.js","./react":"./react.js"},"peerDependencies":{"three":">=0.180.0 <0.181.0","react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"publishConfig":{"access":"public"},"author":{"name":"Andrii Dovbak"},"license":"MIT","_id":"@4ndr3.dk/mophree-engine@0.2.6","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-IFHIojzAaZ8r0KVMZErtlqH/4iTRyyx+4yk2JdvJJI9nodrzyliSLfIxFvSBVTAb+ss1liQgZ5apolPq0ayIXA==","shasum":"ca57fec835371725bc6fa07304600cff33c3395c","tarball":"https://registry.npmjs.org/@4ndr3.dk/mophree-engine/-/mophree-engine-0.2.6.tgz","fileCount":12,"unpackedSize":92426,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA0z/ckXuCCkaHSQuLXbceOLMYixYrQNthrWxVu4pEu1AiB9pLNq83PIyvQBJttyBofhGOdV6SXBbZgkWS6g819fqg=="}]},"_npmUser":{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"},"directories":{},"maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mophree-engine_0.2.6_1781716811721_0.19773372739011896"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-16T10:22:46.576Z","modified":"2026-06-17T17:20:12.010Z","0.1.0":"2026-06-16T10:22:46.941Z","0.2.0":"2026-06-16T11:53:25.896Z","0.2.1":"2026-06-16T12:51:03.798Z","0.2.2":"2026-06-16T17:57:24.029Z","0.2.3":"2026-06-16T18:04:33.202Z","0.2.4":"2026-06-17T14:17:17.293Z","0.2.5":"2026-06-17T14:27:35.422Z","0.2.6":"2026-06-17T17:20:11.899Z"},"author":{"name":"Andrii Dovbak"},"license":"MIT","keywords":["three","threejs","3d","device-mockup","figma-make","config-makeathon"],"description":"Framework-free three.js engine — procedural, photoreal iPhone/iPad device models with a camera rig, keyframe/easing timeline, and video export. Developed during the Config Makeathon 2026 as the 3D engine behind the mophree Figma Make project.","maintainers":[{"name":"4ndr3.dk","email":"andreydovbak@gmail.com"}],"readme":"# mophree-engine\n\nFramework-free **three.js** engine — procedural, photoreal iPhone / iPad device\nmodels with a camera rig, a keyframe + cubic-bezier easing timeline, and\nreal-time video export (WebM / MP4, with alpha).\n\nThis package was developed during the **Config Makeathon 2026** as the 3D engine\nbehind the **mophree** Figma Make project. The editor UI is built in Figma Make;\nthis package is the rendering/animation core it imports — the way you'd pull in\nany library. Every module imports only `three`, with no app framework, no build\nstep, and no binary 3D assets (the device geometry is generated in code from\nApple's published dimensional drawings).\n\n## Install\n\n```sh\nnpm install @4ndr3.dk/mophree-engine three\n```\n\n`three` is a **peer dependency** on purpose: the host app and this package must\nresolve to a **single** `three` instance. `scene.js` patches the global\n`THREE.ShaderChunk` (to add distance-based PCSS contact shadows) and relies on\nshared three internals — two copies would silently break shadows and\n`instanceof` checks. Pinned to the `0.180.x` line the engine was built against.\n\n## Usage\n\n```js\nimport { createStage, createRig, createIphone17, TL } from '@4ndr3.dk/mophree-engine';\n\nconst stage = createStage(document.getElementById('viewport')); // appends a <canvas>\nconst rig = createRig(stage.camera, stage.renderer.domElement);\n\nconst device = createIphone17();\nstage.scene.add(device.group);\nrig.setDefaults(device.camDefaults, true);\n\nstage.setSize(1280, 720); // letterbox to taste\n\n// choreograph a camera move\nconst tl = TL.createTimeline({ duration: 6, preset: 'orbit' });\nTL.regeneratePreset(tl, device.camDefaults);\n\nlet t = 0, last = performance.now();\nfunction frame(now) {\n  requestAnimationFrame(frame);\n  t = (t + (now - last) / 1000) % tl.duration; last = now;\n  const pose = TL.evaluate(tl, t);\n  if (pose) rig.setPose(pose, true);\n  rig.update(1 / 60);\n  stage.render();\n}\nrequestAnimationFrame(frame);\n```\n\n## React adapter (`/react`)\n\nIn React (e.g. a Figma Make project), import the headless `useMophree` hook from\nthe `/react` subpath instead of wiring the engine by hand. It owns the\nstage/rig/devices/timeline and the render loop and returns\n`{ hostRef, state, actions }` — attach `hostRef` to a div, build your UI against\n`actions`/`state`:\n\n```tsx\nimport { useMophree, SCENES, ASPECTS } from '@4ndr3.dk/mophree-engine/react';\n\nexport default function Editor() {\n  const { hostRef, state, actions } = useMophree();\n  return (\n    <>\n      <button onClick={() => actions.toggle()}>{state.playing ? 'Pause' : 'Play'}</button>\n      <div ref={hostRef} style={{ width: '100%', height: 480 }} />\n    </>\n  );\n}\n```\n\n`react` is an **optional** peer dependency — needed only if you import `/react`.\nThe core entry (`.`) stays framework-free (three.js only).\n\n## API\n\n- **`createStage(el)`** → `{ renderer, scene, camera, setSize(w,h), render(), setScene(name), setAmbient(hex), getScene() }`. Scenes: `color | black | white | transparent`. Importing this applies the PCSS shader patch once.\n- **`createRig(camera, domElement)`** → `{ setPose, setDefaults, update, getTarget, getCurrent, getTargetY, isDragging, onUserChange, dispose }` — orbit camera (`yaw/pitch/dist`) with damping + drag/wheel input.\n- **`createIphone17()` / `createIpad()`** → device contract `{ id, label, group, baseY, bob, screen:{mesh,w,h,defaultMat}, camDefaults:{dist,targetY,pitch}, finishes:[{name,hex}], setFinish(hex) }`.\n- **`TL`** (namespace, pure data) — `createTimeline, addKeyframe, moveKeyframe, removeKeyframe, getKeyframe, evaluate, setKeyframeEasing, setKeyframeBezier, setDuration, adoptVideoDuration, regeneratePreset, defaultTabs, bezierEase, EASINGS, PRESETS, …`.\n- **`Media`** (namespace) — `loadVideoBlob, applyToScreen, createWallpaperMaterial, coverFit, makeTestClip, …` (video → `VideoTexture`, with the Infinity-duration fix and cover-fit).\n- **`exportVideo({ canvas, duration, format, prepare, tick, restore, onProgress })`, `FORMATS`, `supportedFormats()`, `resolveMime()`, `downloadBlob()`** — real-time `captureStream` + `MediaRecorder` capture; WebM preserves alpha.\n- **`DEFAULT_AMBIENT`** — the default ambient tint hex.\n\n## Attribution\n\n- Built on [three.js](https://threejs.org) (MIT).\n- Device geometry is reconstructed from Apple's published **dimensional drawings**\n  used as geometric reference only — no Apple assets are included or distributed.\n\n## License\n\nMIT — see [LICENSE](./LICENSE).\n","readmeFilename":"README.md"}