{ "provenance": { "generator": "scripts/emit-agent-spec.mjs", "artifact": "agent-spec", "appCommit": "d294e83ba492d25631d1082d96e95c8ac9ea8cb8", "schemaVersion": 10, "engineVersion": "1.0.0", "sourcesHash": "sha256:448c03150707152de42be71fc2a88361b1182ad2185cc360cec784a9ad7c531f", "contentHash": "sha256:7d5da6fe38fb29cedde3309ceaa1457217af19cd6a9510c2d76ef0ae70d88207", "note": "appCommit is null in the committed artifact by construction — see the header of scripts/emit-agent-spec.mjs. sourcesHash identifies the inputs and is reproducible." }, "title": "Motion Studio — agent parameter spec", "schemaVersion": 10, "engineVersion": "1.0.0", "note": "Flat, render-ready view of the same data scene-schema.json enforces. Generated from the app's own registry.js — do not edit by hand.", "easeOptions": [ { "value": "none", "label": "Linear" }, { "value": "power2.inOut", "label": "Smooth" }, { "value": "power4.inOut", "label": "Sharp" }, { "value": "expo.out", "label": "Snap" }, { "value": "back.out", "label": "Overshoot" }, { "value": "elastic.out", "label": "Bounce" }, { "value": "custom", "label": "Custom" } ], "aspectRatios": [ "1:1", "9:16", "16:9" ], "defaultInteraction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } }, "templates": [ { "id": "orbit", "name": "Orbit", "defaultPresetId": "orbit-bounce", "rendererKind": null, "ownsDragGesture": false, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 30, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "4:3", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "count", "label": "Count", "section": "Cards", "control": "slider", "min": 3, "max": 30, "step": 1, "default": 7, "locked": false, "hidden": false, "effect": "cards on the orbit" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 120, "max": 1200, "step": 1, "default": 230, "locked": false, "hidden": false, "effect": "card width px" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "corner rounding px" }, { "key": "orbitRadius", "label": "Orbit Radius", "section": "Layout", "control": "slider", "min": 100, "max": 700, "step": 1, "default": 485, "locked": false, "hidden": false, "effect": "radius of the ring" }, { "key": "planeX", "label": "Orbit Plane X", "section": "Layout", "control": "slider", "min": -90, "max": 90, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "tilt orbit plane about X (90 = flat/top-down ring)" }, { "key": "planeZ", "label": "Orbit Plane Z", "section": "Layout", "control": "slider", "min": -90, "max": 90, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "tilt orbit plane about Z (90 = vertical ferris wheel)" }, { "key": "orient", "label": "Orient", "section": "Layout", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "blend cards from upright billboard (0) to facing orbit center (100)" }, { "key": "perspective", "label": "Perspective", "section": "Layout", "control": "slider", "min": 400, "max": 1600, "step": 10, "default": 1000, "locked": false, "hidden": false, "effect": "camera distance px (lower = more dramatic) — panel shows this as a 0–100 strength; scene JSON always stores px" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "spin direction. `forward` = the cards on the **front** of the ring travel left→right" }, { "key": "motion", "label": "Motion", "section": "Motion", "control": "toggle", "options": [ "continuous", "step" ], "default": "continuous", "locked": false, "hidden": false, "effect": "smooth vs stepped" }, { "key": "ease", "label": "Ease", "section": "Motion", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "step easing (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "easeCustom", "label": null, "section": "Motion", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "hold", "label": "Hold", "section": "Motion", "control": "slider", "min": 0, "max": 80, "step": 1, "default": 50, "locked": false, "hidden": false, "effect": "inter-step pause (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "cycles", "label": "Cycles", "section": "Motion", "control": "slider", "min": 1, "max": 6, "step": 1, "default": 1, "locked": false, "hidden": false, "effect": "loops per duration" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 2, "max": 60, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "seconds/loop" }, { "key": "jitterAmount", "label": "Jitter Amount", "section": "Dynamics", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "random positional wobble strength" }, { "key": "jitterSpeed", "label": "Jitter Speed", "section": "Dynamics", "control": "slider", "min": 0.5, "max": 8, "step": 0.5, "default": 2, "locked": false, "hidden": false, "effect": "wobble frequency" }, { "key": "rotationDrift", "label": "Rotation Drift", "section": "Dynamics", "control": "slider", "min": 0, "max": 15, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "slow random rotation wobble (deg)" }, { "key": "tiltX", "label": "Tilt X", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltY", "label": "Tilt Y", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltZ", "label": "Tilt Z", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "fade", "label": "Fade", "section": "Style", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 35, "locked": false, "hidden": false, "effect": "opacity falloff for back cards" }, { "key": "scale", "label": "Scale", "section": "Style", "control": "slider", "min": 10, "max": 100, "step": 1, "default": 55, "locked": false, "hidden": false, "effect": "back-card size as % of front" }, { "key": "rotationX", "label": "Rotation X", "section": "Framing", "control": "slider", "min": -45, "max": 45, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static group pose rotation" }, { "key": "rotationY", "label": "Rotation Y", "section": "Framing", "control": "slider", "min": -45, "max": 45, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static group pose rotation" }, { "key": "rotationZ", "label": "Rotation Z", "section": "Framing", "control": "slider", "min": -45, "max": 45, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static group pose rotation" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" } ], "lockedFields": [], "presets": [ { "id": "orbit-drift", "name": "drift", "isDefault": false, "description": "slow large cards gently drifting", "overrides": { "count": 8, "cardSize": 290, "cardRatio": "4:3", "cornerRadius": 16, "orbitRadius": 485, "planeX": 0, "planeZ": 0, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 30, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "fade": 20, "scale": 70, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "count": 8, "cardSize": 290, "cornerRadius": 16, "orbitRadius": 485, "planeX": 0, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 30, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 20, "scale": 70, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-bounce", "name": "bounce", "isDefault": true, "description": "stepped springy entrance (back.out)", "overrides": { "count": 8, "cardSize": 230, "cardRatio": "3:4", "cornerRadius": 2, "orbitRadius": 288, "planeX": 0, "planeZ": 0, "direction": "forward", "motion": "step", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "fade": 100, "scale": 70, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 8, "cardSize": 230, "cornerRadius": 2, "orbitRadius": 288, "planeX": 0, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "step", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 70, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-breathe-right", "name": "breathe-right", "isDefault": false, "description": "jitter \"breathing\" on a tilted plane", "overrides": { "count": 16, "cardSize": 230, "cardRatio": "3:4", "cornerRadius": 6, "orbitRadius": 380, "planeX": 0, "planeZ": -45, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 30, "jitterAmount": 16, "jitterSpeed": 0.5, "rotationDrift": 10, "fade": 100, "scale": 10, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 16, "cardSize": 230, "cornerRadius": 6, "orbitRadius": 380, "planeX": 0, "planeZ": -45, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 30, "jitterAmount": 16, "jitterSpeed": 0.5, "rotationDrift": 10, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 10, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-side", "name": "side", "isDefault": false, "description": "orbit pushed off to the right edge", "overrides": { "count": 10, "cardSize": 260, "cardRatio": "3:4", "cornerRadius": 16, "orbitRadius": 442, "planeX": 0, "planeZ": 0, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 26, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 75, "scale": 30, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 182, "offsetX": 500, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 10, "cardSize": 260, "cornerRadius": 16, "orbitRadius": 442, "planeX": 0, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 26, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 75, "scale": 30, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 182, "offsetX": 500, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-circle", "name": "circle", "isDefault": false, "description": "flat top-down ring (planeX 90)", "overrides": { "count": 8, "cardSize": 360, "cardRatio": "1:1", "cornerRadius": 6, "orbitRadius": 417, "planeX": 90, "planeZ": 0, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 77, "scale": 55, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 100, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "1:1", "count": 8, "cardSize": 360, "cornerRadius": 6, "orbitRadius": 417, "planeX": 90, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 77, "scale": 55, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 100, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-ferris", "name": "ferris", "isDefault": false, "description": "vertical ferris wheel (planeZ 90)", "overrides": { "count": 12, "cardSize": 226, "cardRatio": "3:4", "cornerRadius": 6, "orbitRadius": 252, "planeX": 0, "planeZ": 90, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "fade": 100, "scale": 27, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 12, "cardSize": 226, "cornerRadius": 6, "orbitRadius": 252, "planeX": 0, "planeZ": 90, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "back.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 27, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 130, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-tilt", "name": "tilt", "isDefault": false, "description": "tilted plane with dynamic lean", "overrides": { "count": 12, "cardSize": 231, "cardRatio": "1:1", "cornerRadius": 6, "orbitRadius": 417, "planeX": 0, "planeZ": 0, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 100, "scale": 100, "perspective": 1000, "tiltX": 0, "tiltY": 100, "tiltZ": 100, "rotationX": 22, "rotationY": 0, "rotationZ": 0, "zoom": 100, "offsetX": 0, "offsetY": 86 }, "config": { "cardRatio": "1:1", "count": 12, "cardSize": 231, "cornerRadius": 6, "orbitRadius": 417, "planeX": 0, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 100, "tiltZ": 100, "fade": 100, "scale": 100, "rotationX": 22, "rotationY": 0, "rotationZ": 0, "zoom": 100, "offsetX": 0, "offsetY": 86, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-corner", "name": "corner", "isDefault": false, "description": "huge cards, top-down ring pushed into a corner", "overrides": { "count": 8, "cardSize": 740, "cardRatio": "1:1", "cornerRadius": 4, "orbitRadius": 551, "planeX": 90, "planeZ": 0, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 100, "scale": 55, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 119, "offsetX": -500, "offsetY": 500 }, "config": { "cardRatio": "1:1", "count": 8, "cardSize": 740, "cornerRadius": 4, "orbitRadius": 551, "planeX": 90, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 55, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 119, "offsetX": -500, "offsetY": 500, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-ring", "name": "ring", "isDefault": false, "description": "reverse-spinning tilted ring with drift", "overrides": { "count": 11, "cardSize": 554, "cardRatio": "1:1", "cornerRadius": 8, "orbitRadius": 424, "planeX": 31, "planeZ": 0, "direction": "reverse", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 15, "fade": 100, "scale": 10, "perspective": 1600, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 21, "rotationY": 0, "rotationZ": 0, "zoom": 92, "offsetX": 0, "offsetY": 146 }, "config": { "cardRatio": "1:1", "count": 11, "cardSize": 554, "cornerRadius": 8, "orbitRadius": 424, "planeX": 31, "planeZ": 0, "orient": 0, "perspective": 1600, "direction": "reverse", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 15, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 10, "rotationX": 21, "rotationY": 0, "rotationZ": 0, "zoom": 92, "offsetX": 0, "offsetY": 146, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-concentric", "name": "concentric", "isDefault": false, "description": "cards facing center on a flat ring (orient 100)", "overrides": { "count": 15, "cardSize": 314, "cardRatio": "1:1", "cornerRadius": 10, "orbitRadius": 605, "planeX": 90, "planeZ": 0, "orient": 100, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 77, "scale": 55, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 71, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "1:1", "count": 15, "cardSize": 314, "cornerRadius": 10, "orbitRadius": 605, "planeX": 90, "planeZ": 0, "orient": 100, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 72, "cycles": 1, "duration": 16, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 77, "scale": 55, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 71, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "orbit-spin", "name": "spin", "isDefault": false, "description": "upright cards spinning quickly", "overrides": { "count": 10, "cardSize": 178, "cardRatio": "3:4", "cornerRadius": 6, "orbitRadius": 445, "planeX": 0, "planeZ": 0, "orient": 0, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 10, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "fade": 100, "scale": 100, "perspective": 1000, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 85, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 10, "cardSize": 178, "cornerRadius": 6, "orbitRadius": 445, "planeX": 0, "planeZ": 0, "orient": 0, "perspective": 1000, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 80, "cycles": 1, "duration": 10, "jitterAmount": 0, "jitterSpeed": 0.5, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 100, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "zoom": 85, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "carousel", "name": "Carousel", "defaultPresetId": "carousel-flip", "rendererKind": "carousel", "ownsDragGesture": false, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 28, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "4:3", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "count", "label": "Count", "section": "Cards", "control": "slider", "min": 1, "max": 30, "step": 1, "default": 6, "locked": false, "hidden": false, "effect": "cards in the marquee" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 120, "max": 1200, "step": 1, "default": 230, "locked": false, "hidden": false, "effect": "card width px" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "corner rounding px" }, { "key": "gap", "label": "Gap", "section": "Cards", "control": "slider", "min": -300, "max": 400, "step": 1, "default": 40, "locked": false, "hidden": false, "effect": "spacing px along travel (negative = overlap/shingle)" }, { "key": "angle", "label": "Angle", "section": "Layout", "control": "slider", "min": 0, "max": 360, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "travel direction (0 = rightward, clockwise from +x)" }, { "key": "depth", "label": "Depth", "section": "Layout", "control": "slider", "min": -100, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "linear z-recession across the deck (0 = flat)" }, { "key": "stacking", "label": "Stacking", "section": "Layout", "control": "toggle", "options": [ "forward", "backward" ], "default": "forward", "locked": false, "hidden": false, "effect": "which card sits on top under overlap" }, { "key": "perspective", "label": "Perspective", "section": "Layout", "control": "slider", "min": 1000, "max": 10000, "step": 10, "default": 10000, "locked": false, "hidden": false, "effect": "camera distance (10000 = flat, 1000 = strong vanishing) — panel shows this as a 0–100 strength; scene JSON always stores px" }, { "key": "rotationX", "label": "Rotation X", "section": "Layout", "control": "slider", "min": -180, "max": 180, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static per-card pose rotation" }, { "key": "rotationY", "label": "Rotation Y", "section": "Layout", "control": "slider", "min": -180, "max": 180, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static per-card pose rotation" }, { "key": "rotationZ", "label": "Rotation Z", "section": "Layout", "control": "slider", "min": -180, "max": 180, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "static per-card pose rotation" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "travel direction along the `angle` axis. At `angle: 0` (horizontal) `forward` = left→right" }, { "key": "motion", "label": "Motion", "section": "Motion", "control": "toggle", "options": [ "continuous", "step" ], "default": "continuous", "locked": false, "hidden": false, "effect": "smooth vs stepped" }, { "key": "ease", "label": "Ease", "section": "Motion", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "step easing (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "easeCustom", "label": null, "section": "Motion", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "hold", "label": "Hold", "section": "Motion", "control": "slider", "min": 0, "max": 80, "step": 1, "default": 50, "locked": false, "hidden": false, "effect": "inter-step pause (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "cycles", "label": "Cycles", "section": "Motion", "control": "slider", "min": 1, "max": 6, "step": 1, "default": 1, "locked": false, "hidden": false, "effect": "loops per duration" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 2, "max": 60, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "seconds/loop" }, { "key": "lift", "label": "Lift", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "center-most card rises screen-up (100 = one card-height)" }, { "key": "tiltX", "label": "Tilt X", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltY", "label": "Tilt Y", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltZ", "label": "Tilt Z", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "fade", "label": "Fade", "section": "Style", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "center-anchored opacity gradient" }, { "key": "sizeGradient", "label": "Size Gradient", "section": "Style", "control": "slider", "min": -100, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "size ramp across the track (smallest 0.3x)" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" } ], "lockedFields": [], "presets": [ { "id": "carousel-domino", "name": "domino", "isDefault": false, "description": "shingled cards toppling (rotateY, reverse)", "overrides": { "cardRatio": "3:4", "count": 15, "cardSize": 442, "cornerRadius": 6, "gap": -255, "angle": 198, "depth": 0, "stacking": "forward", "perspective": 10000, "rotationX": 0, "rotationY": 41, "rotationZ": 0, "direction": "reverse", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 25, "lift": 0, "tiltX": 0, "tiltY": 76, "tiltZ": 100, "fade": 0, "sizeGradient": 0, "zoom": 100, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 15, "cardSize": 442, "cornerRadius": 6, "gap": -255, "angle": 198, "depth": 0, "stacking": "forward", "perspective": 10000, "rotationX": 0, "rotationY": 41, "rotationZ": 0, "direction": "reverse", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 25, "lift": 0, "tiltX": 0, "tiltY": 76, "tiltZ": 100, "fade": 0, "sizeGradient": 0, "zoom": 100, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "carousel-flip", "name": "flip", "isDefault": true, "description": "stepped card flip (rotateY) with center lift", "overrides": { "cardRatio": "4:3", "count": 11, "cardSize": 161, "cornerRadius": 12, "gap": -99, "angle": 146, "depth": 0, "stacking": "forward", "perspective": 3138, "rotationX": 0, "rotationY": -43, "rotationZ": 0, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 18, "lift": 82, "tiltX": 100, "tiltY": 0, "tiltZ": 0, "fade": 0, "sizeGradient": 0, "zoom": 300, "offsetX": 0, "offsetY": 125 }, "config": { "cardRatio": "4:3", "count": 11, "cardSize": 161, "cornerRadius": 12, "gap": -99, "angle": 146, "depth": 0, "stacking": "forward", "perspective": 3138, "rotationX": 0, "rotationY": -43, "rotationZ": 0, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 50, "cycles": 1, "duration": 18, "lift": 82, "tiltX": 100, "tiltY": 0, "tiltZ": 0, "fade": 0, "sizeGradient": 0, "zoom": 300, "offsetX": 0, "offsetY": 125, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "carousel-swipe", "name": "swipe", "isDefault": false, "description": "big cards sliding full-bleed (custom ease)", "overrides": { "cardRatio": "3:4", "count": 6, "cardSize": 580, "cornerRadius": 6, "gap": 19, "angle": 0, "depth": 0, "stacking": "forward", "perspective": 10000, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "direction": "forward", "motion": "step", "ease": "custom", "easeCustom": [ 0.77, 0, 0, 0.9902514494889937 ], "hold": 50, "cycles": 1, "duration": 12, "lift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 100, "fade": 0, "sizeGradient": 0, "zoom": 100, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "count": 6, "cardSize": 580, "cornerRadius": 6, "gap": 19, "angle": 0, "depth": 0, "stacking": "forward", "perspective": 10000, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "direction": "forward", "motion": "step", "ease": "custom", "easeCustom": [ 0.77, 0, 0, 0.9902514494889937 ], "hold": 50, "cycles": 1, "duration": 12, "lift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 100, "fade": 0, "sizeGradient": 0, "zoom": 100, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "stack", "name": "Stack", "defaultPresetId": "stack-down", "rendererKind": null, "ownsDragGesture": false, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 27, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "4:3", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "count", "label": "Count", "section": "Cards", "control": "slider", "min": 3, "max": 10, "step": 1, "default": 5, "locked": false, "hidden": false, "effect": "cards in the deck" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 120, "max": 1200, "step": 1, "default": 230, "locked": false, "hidden": false, "effect": "card width px" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "corner rounding px" }, { "key": "stackOffsetX", "label": "Stack Offset X", "section": "Layout", "control": "slider", "min": -80, "max": 80, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "per-card horizontal offset in the deck" }, { "key": "stackOffsetY", "label": "Stack Offset Y", "section": "Layout", "control": "slider", "min": -80, "max": 80, "step": 1, "default": -30, "locked": false, "hidden": false, "effect": "per-card vertical offset in the deck" }, { "key": "stackDepth", "label": "Stack Depth", "section": "Layout", "control": "slider", "min": 0, "max": 200, "step": 1, "default": 60, "locked": false, "hidden": false, "effect": "z-spacing between stacked cards" }, { "key": "exitDirection", "label": "Exit Direction", "section": "Layout", "control": "select", "options": [ "right", "left", "up", "down" ], "default": "down", "locked": false, "hidden": false, "effect": "direction the top card exits" }, { "key": "exitDistance", "label": "Exit Distance", "section": "Layout", "control": "slider", "min": 100, "max": 800, "step": 1, "default": 400, "locked": false, "hidden": false, "effect": "how far the exiting card travels px" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "deal order — **not** a screen direction. Where a card leaves the frame is `exitDirection`, not this field" }, { "key": "motion", "label": "Motion", "section": "Motion", "control": "toggle", "options": [ "continuous", "step" ], "default": "step", "locked": false, "hidden": false, "effect": "smooth vs stepped" }, { "key": "ease", "label": "Ease", "section": "Motion", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "step easing (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "easeCustom", "label": null, "section": "Motion", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "hold", "label": "Hold", "section": "Motion", "control": "slider", "min": 0, "max": 80, "step": 1, "default": 40, "locked": false, "hidden": false, "effect": "inter-step pause (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "cycles", "label": "Cycles", "section": "Motion", "control": "slider", "min": 1, "max": 6, "step": 1, "default": 1, "locked": false, "hidden": false, "effect": "loops per duration" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 2, "max": 60, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "seconds/loop" }, { "key": "jitterAmount", "label": null, "section": "Dynamics", "control": "hidden", "default": 0, "locked": false, "hidden": true, "effect": "must be present; hidden" }, { "key": "jitterSpeed", "label": null, "section": "Dynamics", "control": "hidden", "default": 2, "locked": false, "hidden": true, "effect": "must be present; hidden" }, { "key": "rotationDrift", "label": "Rotation Drift", "section": "Dynamics", "control": "slider", "min": 0, "max": 15, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "slow random rotation wobble (deg)" }, { "key": "tiltX", "label": "Tilt X", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltY", "label": "Tilt Y", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "tiltZ", "label": "Tilt Z", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "dynamic lean reacting to motion" }, { "key": "fade", "label": "Fade", "section": "Style", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 35, "locked": false, "hidden": false, "effect": "opacity falloff down the stack" }, { "key": "scale", "label": "Scale", "section": "Style", "control": "slider", "min": 10, "max": 100, "step": 1, "default": 70, "locked": false, "hidden": false, "effect": "back-card size as % of front" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" } ], "lockedFields": [ { "key": "rotationX", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "rotationY", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "rotationZ", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "perspective", "value": 1000, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 1000" } ], "presets": [ { "id": "stack-down", "name": "down", "isDefault": true, "description": "deck dealt downward", "overrides": { "count": 6, "cardSize": 360, "cardRatio": "4:3", "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": -36, "stackDepth": 60, "exitDirection": "down", "exitDistance": 400, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 8, "rotationDrift": 0, "fade": 53, "scale": 70, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "zoom": 200, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "count": 6, "cardSize": 360, "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": -36, "stackDepth": 60, "exitDirection": "down", "exitDistance": 400, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 8, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 53, "scale": 70, "zoom": 200, "offsetX": 0, "offsetY": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "stack-up", "name": "up", "isDefault": false, "description": "deck dealt upward", "overrides": { "count": 6, "cardSize": 360, "cardRatio": "4:3", "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": 30, "stackDepth": 60, "exitDirection": "up", "exitDistance": 400, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 8, "rotationDrift": 0, "fade": 53, "scale": 70, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "zoom": 200, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "count": 6, "cardSize": 360, "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": 30, "stackDepth": 60, "exitDirection": "up", "exitDistance": 400, "direction": "forward", "motion": "step", "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 8, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 53, "scale": 70, "zoom": 200, "offsetX": 0, "offsetY": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "stack-fling", "name": "fling", "isDefault": false, "description": "card flung to the right (elastic, continuous)", "overrides": { "count": 10, "cardSize": 421, "cardRatio": "4:3", "cornerRadius": 6, "stackOffsetX": -80, "stackOffsetY": 80, "stackDepth": 169, "exitDirection": "right", "exitDistance": 100, "direction": "forward", "motion": "continuous", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 10, "rotationDrift": 0, "fade": 100, "scale": 38, "tiltX": 0, "tiltY": 100, "tiltZ": 0, "zoom": 167, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "count": 10, "cardSize": 421, "cornerRadius": 6, "stackOffsetX": -80, "stackOffsetY": 80, "stackDepth": 169, "exitDirection": "right", "exitDistance": 100, "direction": "forward", "motion": "continuous", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 10, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 100, "tiltZ": 0, "fade": 100, "scale": 38, "zoom": 167, "offsetX": 0, "offsetY": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "stack-bounce", "name": "bounce", "isDefault": false, "description": "card dealt down with an elastic bounce + drift", "overrides": { "count": 6, "cardSize": 442, "cardRatio": "4:3", "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": -26, "stackDepth": 66, "exitDirection": "down", "exitDistance": 100, "direction": "forward", "motion": "step", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 14, "rotationDrift": 15, "fade": 100, "scale": 70, "tiltX": 100, "tiltY": 0, "tiltZ": 0, "zoom": 214, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "count": 6, "cardSize": 442, "cornerRadius": 6, "stackOffsetX": 0, "stackOffsetY": -26, "stackDepth": 66, "exitDirection": "down", "exitDistance": 100, "direction": "forward", "motion": "step", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 14, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 15, "tiltX": 100, "tiltY": 0, "tiltZ": 0, "fade": 100, "scale": 70, "zoom": 214, "offsetX": 0, "offsetY": 0, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "stack-reverse", "name": "reverse", "isDefault": false, "description": "deck run in reverse (continuous)", "overrides": { "count": 9, "cardSize": 421, "cardRatio": "4:3", "cornerRadius": 6, "stackOffsetX": 80, "stackOffsetY": -73, "stackDepth": 169, "exitDirection": "down", "exitDistance": 100, "direction": "reverse", "motion": "continuous", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 14, "rotationDrift": 0, "fade": 75, "scale": 70, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "zoom": 192, "offsetX": 0, "offsetY": 4 }, "config": { "cardRatio": "4:3", "count": 9, "cardSize": 421, "cornerRadius": 6, "stackOffsetX": 80, "stackOffsetY": -73, "stackDepth": 169, "exitDirection": "down", "exitDistance": 100, "direction": "reverse", "motion": "continuous", "ease": "elastic.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "hold": 40, "cycles": 1, "duration": 14, "jitterAmount": 0, "jitterSpeed": 2, "rotationDrift": 0, "tiltX": 0, "tiltY": 0, "tiltZ": 0, "fade": 75, "scale": 70, "zoom": 192, "offsetX": 0, "offsetY": 4, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "band", "name": "band", "defaultPresetId": "band-pinch", "rendererKind": "band", "ownsDragGesture": false, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 18, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "3:4", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 30, "max": 500, "step": 1, "default": 56, "locked": false, "hidden": false, "effect": "strip card width px" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "corner rounding — percent of the shorter side of the VISIBLE outline (card box ∩ arc band), not of the card element" }, { "key": "lens", "label": "Lens", "section": "Cards", "control": "slider", "min": -100, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "distortion of the card CONTENT (positive = fisheye, negative = inverse fisheye, `0` = off, no WebGL layer at all). Decoupled from `heightGradient` (Pinch), which shapes the FRAME; on browsers without WebGL2 it is treated as 0" }, { "key": "curve", "label": "Curve", "section": "Layout", "control": "slider", "min": -100, "max": 100, "step": 1, "default": 55, "locked": false, "hidden": false, "effect": "arc curvature of the band" }, { "key": "heightGradient", "label": "Pinch", "section": "Layout", "control": "slider", "min": -650, "max": 650, "step": 1, "default": 60, "locked": false, "hidden": false, "effect": "how much card height grows toward center" }, { "key": "axisRotation", "label": "Rotation", "section": "Layout", "control": "slider", "min": -180, "max": 180, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "rigid rotation of the whole strip’s axis in degrees — card positions and orientations follow the axis", "alwaysShow": true }, { "key": "cardTilt", "label": "Tilt", "section": "Layout", "control": "slider", "min": -30, "max": 30, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "per-card tilt degrees — every card rotates the same angle in place, relative to the strip" }, { "key": "gap", "label": "Gap", "section": "Layout", "control": "slider", "min": -30, "max": 40, "step": 1, "default": -10, "locked": false, "hidden": false, "effect": "spacing px (negative = overlap)" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "scroll direction. `forward` = cards travel left→right" }, { "key": "motion", "label": "Motion", "section": "Motion", "control": "toggle", "options": [ "continuous", "step" ], "default": "continuous", "locked": false, "hidden": false, "effect": "smooth vs stepped" }, { "key": "ease", "label": "Ease", "section": "Motion", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "step easing (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "easeCustom", "label": null, "section": "Motion", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "cycles", "label": "Cycles", "section": "Motion", "control": "slider", "min": 1, "max": 6, "step": 1, "default": 1, "locked": false, "hidden": false, "effect": "loops per duration" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 2, "max": 60, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "seconds/loop" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" } ], "lockedFields": [], "presets": [ { "id": "band-pinch", "name": "pinch", "isDefault": true, "description": "flat strip pinched tall at center (curve 0, tall gradient)", "overrides": { "cardRatio": "3:4", "cardSize": 384, "curve": 0, "heightGradient": 442, "gap": 25, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 28, "zoom": 116, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "3:4", "cardSize": 384, "cornerRadius": 0, "lens": 0, "curve": 0, "heightGradient": 442, "axisRotation": 0, "cardTilt": 0, "gap": 25, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 28, "zoom": 116, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "band-horizon", "name": "horizon", "isDefault": false, "description": "full arc horizon band (curve 100)", "overrides": { "cardRatio": "4:3", "cardSize": 378, "curve": 100, "heightGradient": 200, "gap": 12, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 16, "zoom": 87, "offsetX": 0, "offsetY": 387 }, "config": { "cardRatio": "4:3", "cardSize": 378, "cornerRadius": 0, "lens": 0, "curve": 100, "heightGradient": 200, "axisRotation": 0, "cardTilt": 0, "gap": 12, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 16, "zoom": 87, "offsetX": 0, "offsetY": 387, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "band-stream", "name": "stream", "isDefault": false, "description": "dense stream of small cards", "overrides": { "cardRatio": "4:3", "cardSize": 256, "curve": 0, "heightGradient": 442, "gap": 8, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 28, "zoom": 116, "offsetX": 0, "offsetY": 0 }, "config": { "cardRatio": "4:3", "cardSize": 256, "cornerRadius": 0, "lens": 0, "curve": 0, "heightGradient": 442, "axisRotation": 0, "cardTilt": 0, "gap": 8, "direction": "forward", "motion": "continuous", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 28, "zoom": 116, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "coverflow", "name": "coverflow", "defaultPresetId": "coverflow-coverflow", "rendererKind": "coverflow", "ownsDragGesture": false, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 18, "fields": [ { "key": "count", "label": "Count", "section": "Cards", "control": "slider", "min": 3, "max": 30, "step": 1, "default": 7, "locked": false, "hidden": false, "effect": "cards in the cyclic carousel" }, { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "3:4", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 60, "max": 200, "step": 1, "default": 140, "locked": false, "hidden": false, "effect": "card width px" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "corner rounding px" }, { "key": "gap", "label": "Gap", "section": "Layout", "control": "slider", "min": -80, "max": 40, "step": 1, "default": -30, "locked": false, "hidden": false, "effect": "spacing px (negative = the classic overlap stack)" }, { "key": "sideRotation", "label": "Side Rotation", "section": "Layout", "control": "slider", "min": -85, "max": 85, "step": 1, "default": -58, "locked": false, "hidden": false, "effect": "side-card rotation (negative = inward/classic, positive = outward)" }, { "key": "depthFalloff", "label": "Depth Falloff", "section": "Layout", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 35, "locked": false, "hidden": false, "effect": "how fast side cards recede and shrink" }, { "key": "focusEmphasis", "label": "Focus Emphasis", "section": "Dynamics", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 50, "locked": false, "hidden": false, "effect": "center card pop-forward (translateZ)" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "travel direction (`forward` = cards travel right→left; `reverse` = left→right)" }, { "key": "motion", "label": "Motion", "section": "Motion", "control": "toggle", "options": [ "continuous", "step" ], "default": "step", "locked": false, "hidden": false, "effect": "smooth vs stepped (cover-flow reads step-wise)" }, { "key": "ease", "label": "Ease", "section": "Motion", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "step easing (step only)", "showIf": { "key": "motion", "equals": "step" } }, { "key": "easeCustom", "label": null, "section": "Motion", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "cycles", "label": "Cycles", "section": "Motion", "control": "slider", "min": 1, "max": 6, "step": 1, "default": 1, "locked": false, "hidden": false, "effect": "loops per duration" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 2, "max": 60, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "seconds/loop" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px" }, { "key": "perspective", "label": "Perspective", "section": "Framing", "control": "slider", "min": 2000, "max": 10000, "step": 10, "default": 2000, "locked": false, "hidden": false, "effect": "camera distance (floor 2000) — panel shows this as a 0–100 strength; scene JSON always stores px" } ], "lockedFields": [], "presets": [ { "id": "coverflow-coverflow", "name": "coverflow", "isDefault": true, "description": "classic inward-tilting cover flow (sideRotation -49)", "overrides": { "count": 15, "cardRatio": "1:1", "cardSize": 150, "cornerRadius": 0, "gap": -56, "sideRotation": -49, "depthFalloff": 14, "focusEmphasis": 8, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 26, "zoom": 267, "offsetX": 0, "offsetY": 0, "perspective": 2000 }, "config": { "count": 15, "cardRatio": "1:1", "cardSize": 150, "cornerRadius": 0, "gap": -56, "sideRotation": -49, "depthFalloff": 14, "focusEmphasis": 8, "direction": "forward", "motion": "step", "ease": "expo.out", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 26, "zoom": 267, "offsetX": 0, "offsetY": 0, "perspective": 2000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "coverflow-louver", "name": "louver", "isDefault": false, "description": "outward-tilting louvered blinds (sideRotation +44, gap -80)", "overrides": { "count": 19, "cardRatio": "1:1", "cardSize": 164, "cornerRadius": 4, "gap": -80, "sideRotation": 44, "depthFalloff": 14, "focusEmphasis": 0, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 34, "zoom": 236, "offsetX": 0, "offsetY": 0, "perspective": 2000 }, "config": { "count": 19, "cardRatio": "1:1", "cardSize": 164, "cornerRadius": 4, "gap": -80, "sideRotation": 44, "depthFalloff": 14, "focusEmphasis": 0, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 34, "zoom": 236, "offsetX": 0, "offsetY": 0, "perspective": 2000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "coverflow-single", "name": "single", "isDefault": false, "description": "single focused card, steep side rotation (3:4)", "overrides": { "count": 15, "cardRatio": "3:4", "cardSize": 200, "cornerRadius": 6, "gap": -56, "sideRotation": -85, "depthFalloff": 62, "focusEmphasis": 8, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 19, "zoom": 300, "offsetX": 0, "offsetY": 0, "perspective": 2000 }, "config": { "count": 15, "cardRatio": "3:4", "cardSize": 200, "cornerRadius": 6, "gap": -56, "sideRotation": -85, "depthFalloff": 62, "focusEmphasis": 8, "direction": "forward", "motion": "step", "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "cycles": 1, "duration": 19, "zoom": 300, "offsetX": 0, "offsetY": 0, "perspective": 2000, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "grid", "name": "grid", "defaultPresetId": "grid-spotlight", "rendererKind": "grid", "ownsDragGesture": true, "hasDerivedDuration": true, "hasDynamicBounds": true, "fieldCount": 21, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "1:1", "locked": false, "hidden": false, "effect": "card aspect" }, { "key": "columns", "label": "Columns", "section": "Cards", "control": "slider", "min": 5, "max": 20, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "cards across", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "rows", "label": "Rows", "section": "Cards", "control": "slider", "min": 5, "max": 20, "step": 1, "default": 8, "locked": false, "hidden": false, "effect": "cards down", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 60, "max": 400, "step": 1, "default": 160, "locked": false, "hidden": false, "effect": "card width px. **Ignored in `parallax`** — infinity bakes a fixed card width (slider hidden), so the scatter period and zoom floor stay constant regardless of this value", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "corner rounding px" }, { "key": "gap", "label": "Gap", "section": "Cards", "control": "slider", "min": -40, "max": 120, "step": 1, "default": 24, "locked": false, "hidden": false, "effect": "edge-to-edge spacing px (negative overlaps)", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "waypoints", "label": "Route", "section": "Camera", "control": "waypointBoard", "default": [ 9, 21, 42, 54 ], "locked": false, "hidden": false, "effect": "camera tour order; index = `row × columns + column`. **One cell holds at most one waypoint** — a repeated index is dropped (first occurrence kept), and an index outside the current grid is dropped too", "showIf": { "key": "cameraMode", "equals": "route" }, "alwaysShow": true }, { "key": "travelDuration", "label": "Duration", "section": "Camera", "control": "slider", "min": 0.2, "max": 20, "step": 0.1, "default": 1.6, "locked": false, "hidden": false, "effect": "seconds per leg (NOT the loop length)", "showIf": { "key": "cameraMode", "equals": "route" } }, { "key": "dwell", "label": "Dwell", "section": "Camera", "control": "slider", "min": 0, "max": 10, "step": 0.1, "default": 0.8, "locked": false, "hidden": false, "effect": "seconds paused at each waypoint", "showIf": { "key": "cameraMode", "equals": "route" } }, { "key": "ease", "label": "Ease", "section": "Camera", "control": "ease", "options": [ "none", "power2.inOut", "power4.inOut", "expo.out", "back.out", "elastic.out", "custom" ], "default": "power2.inOut", "locked": false, "hidden": false, "effect": "easing of each leg", "showIf": { "key": "cameraMode", "equals": "route" } }, { "key": "easeCustom", "label": null, "section": "Camera", "control": "hidden", "default": [ 0.42, 0, 0.58, 1 ], "locked": false, "hidden": true, "effect": "custom bezier (hidden)" }, { "key": "highlightScale", "label": "Highlight Scale", "section": "Camera", "control": "slider", "min": 1, "max": 1.3, "step": 0.01, "default": 1.08, "locked": false, "hidden": false, "effect": "scale of the card under the camera (`1` = off)", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "dimOthers", "label": "Dim Others", "section": "Camera", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "how far non-central cards fade (`0` = off)", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "cameraMode", "label": null, "section": "Camera", "control": "hidden", "default": "route", "locked": false, "hidden": true, "effect": "camera behaviour: `route` = auto-cruise the `waypoints`; `pan` = static camera the viewer drags in 2-D (no auto-cruise); `parallax` = cards scattered across 3 depth layers, viewer drags through the field (no auto-cruise, no central emphasis). Hidden field — set by the preset, not shown in the panel. Old scenes without it load as `route`" }, { "key": "depth", "label": "Depth", "section": "Depth", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 60, "locked": false, "hidden": false, "effect": "how strongly far layers slow down and blur relative to near layers, in `parallax` mode (`0` = layers move/render almost alike; `100` = strong separation). Panel-hidden outside `parallax` (`showIf cameraMode:\"parallax\"`), but still present in the config", "showIf": { "key": "cameraMode", "equals": "parallax" }, "alwaysShow": true }, { "key": "density", "label": "Density", "section": "Depth", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 50, "locked": false, "hidden": false, "effect": "how MANY cards are on screen in `parallax` mode — density drives the card COUNT (`0` = few/sparse floating, `100` = many/dense wall), NOT plane scale. The scatter plane is a fixed size; the count is decoupled from `columns`/`rows` (which are inert + panel-hidden in `parallax`). Growing density adds tail cards deterministically (existing cards stay put — same `scatterSeed` sequence). Cards are placed to avoid >50% pairwise overlap AND to keep two cards of the SAME image from landing adjacent (both best-effort, seeded — deterministic in app and embed). Panel-hidden outside `parallax`", "showIf": { "key": "cameraMode", "equals": "parallax" }, "alwaysShow": true }, { "key": "sway", "label": "Sway", "section": "Depth", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 30, "locked": false, "hidden": false, "effect": "hover micro-follow strength in `parallax` mode. MOVEMENT-based: while the cursor MOVES over the canvas the field micro-shifts OPPOSITE the cursor (\"peek out the window\"); when the cursor stops or leaves, the offset eases back to 0. Reproduced in the exported embed too (`0` = off). Panel-hidden outside `parallax`", "showIf": { "key": "cameraMode", "equals": "parallax" }, "alwaysShow": true }, { "key": "scatterSeed", "label": null, "section": "Depth", "control": "hidden", "default": 1, "locked": false, "hidden": true, "effect": "seeds the deterministic scatter PRNG for `parallax` mode's card layout — same seed always produces the same scatter (app and embed both derive it from the same source, byte-identical). Locked field, not shown in the panel; set by the preset (or a future \"reshuffle\" action)" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 20, "max": 600, "step": 1, "default": 400, "locked": false, "hidden": false, "effect": "camera height (viewport zoom %). Higher = closer. See the dynamic floor note below" }, { "key": "offsetX", "label": "Offset X", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px (also dynamically clamped — see below)", "hideIf": { "key": "cameraMode", "equals": "parallax" } }, { "key": "offsetY", "label": "Offset Y", "section": "Framing", "control": "slider", "min": -500, "max": 500, "step": 1, "default": 0, "locked": false, "hidden": false, "effect": "viewport shift px (also dynamically clamped — see below)", "hideIf": { "key": "cameraMode", "equals": "parallax" } } ], "lockedFields": [], "presets": [ { "id": "grid-spotlight", "name": "spotlight", "isDefault": true, "description": "dense 12x12 read from a close shot, others dimmed hard.\ngrid's opening look, and a route-mode LOOK (auto-cruises its waypoints).\n(Earlier `tour` and `drift` were retired: the Stage 2 pin-board editor\nhands route authorship back to the user, so pre-picked-route presets no\nlonger earn their place — what survives is the one that's really a LOOK.)\nspotlight ships \"drag\": false in its interaction block; it is the only\ngrid preset that does. (cameraMode is omitted → defaults to \"route\".)\nBoth other grid presets ship \"drag\": true — freehand (\"pan\") and\ninfinity (\"parallax\"), each drag-driven; see their own blocks below.\n\nThe two fields are an AND gate, and they answer different questions.\n\"cameraMode\" decides WHICH KIND of drag the preset has: \"route\" uses the\nsame 1-D time drag every other template uses (scrubbing the waypoint\ncruise), while \"pan\" and \"parallax\" replace it with grid's own 2-D camera\ndrag. \"interaction.drag\" decides WHETHER the viewer can drag at all.\nDragging happens only when both agree — a \"pan\" scene with \"drag\": false\nis a camera nobody can move, and a \"route\" scene with \"drag\": true lets\nthe viewer scrub the cruise by hand. spotlight sets it false on purpose:\na 1-D time cursor has no coherent reading against a 2-D waypoint route\n(drag a card left and it moves right, and the mapping flips with each\nleg's direction), so this LOOK plays itself.\n\nWhen you emit a grid scene, set \"drag\" to match the camera you want —\nfalse for a route-mode look that plays itself, true for a pan or parallax\nscene the viewer drives (keep the rest of the interaction block at its\ndefaults).", "overrides": { "columns": 12, "rows": 12, "cardRatio": "1:1", "cardSize": 120, "cornerRadius": 4, "gap": 16, "waypoints": [ 26, 33, 90, 111, 61 ], "travelDuration": 1.2, "dwell": 1.2, "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.22, "dimOthers": 55, "zoom": 480, "offsetX": 0, "offsetY": 0, "interaction": { "drag": false, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } }, "config": { "cardRatio": "1:1", "columns": 12, "rows": 12, "cardSize": 120, "cornerRadius": 4, "gap": 16, "waypoints": [ 26, 33, 90, 111, 61 ], "travelDuration": 1.2, "dwell": 1.2, "ease": "power4.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.22, "dimOthers": 55, "cameraMode": "route", "depth": 60, "density": 50, "sway": 30, "scatterSeed": 1, "zoom": 480, "offsetX": 0, "offsetY": 0, "interaction": { "drag": false, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "grid-freehand", "name": "freehand", "isDefault": false, "description": "a draggable field. cameraMode \"pan\": no auto-cruise, the camera\nrests at the plane centre and the viewer drags it in 2-D (mouse+touch,\nwith release inertia), in both the app and the exported embed. Odd 9x9\nso a single card sits dead-centre at rest; gentle emphasis. All auto-motion\ncontrols are HIDDEN (timeline, play, Route board, ease, Duration/Dwell) and\nmp4 export is disabled for this look (no loop length); json/embed export\nunaffected. waypoints/travel/dwell/ease are carried in the scene JSON but\ninert in freehand. Ships \"drag\": true. The 2-D pan itself is the\n\"cameraMode\":\"pan\" layer, and \"interaction.drag\" is the switch that arms\nit — both are needed, so setting \"drag\": false here would leave a camera\nthe viewer cannot move (see spotlight's block for the AND gate). freehand's\ninteraction block is identical to infinity's.", "overrides": { "columns": 9, "rows": 9, "cardRatio": "1:1", "cardSize": 140, "cornerRadius": 4, "gap": 20, "waypoints": [ 30, 40, 50 ], "travelDuration": 1.6, "dwell": 0.8, "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.1, "dimOthers": 20, "zoom": 400, "offsetX": 0, "offsetY": 0, "cameraMode": "pan", "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } }, "config": { "cardRatio": "1:1", "columns": 9, "rows": 9, "cardSize": 140, "cornerRadius": 4, "gap": 20, "waypoints": [ 30, 40, 50 ], "travelDuration": 1.6, "dwell": 0.8, "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.1, "dimOthers": 20, "cameraMode": "pan", "depth": 60, "density": 50, "sway": 30, "scatterSeed": 1, "zoom": 400, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } }, { "id": "grid-infinity", "name": "infinity", "isDefault": false, "description": "cameraMode \"parallax\": cards scattered across 3 depth layers\n(near/mid/far) instead of a lattice, viewer drags through the field in\n2-D (mouse+touch, release inertia — same drag driver as freehand). 10x10\n= 100 cards, dense enough to read as a scattered field without exceeding\nthe perf note's ≤144-card guidance. depth:65/density:50/sway:30 are\nhand-tuned starting values; scatterSeed:7 is a fixed opening seed for the\ndeterministic PRNG (same seed → same scatter, always). All auto-motion\ncontrols are HIDDEN (no loop/duration, same reason as freehand) AND\narrival emphasis is hidden too (highlightScale/dimOthers inert — no\n\"camera visits a card\" concept here); mp4 export is disabled for this\nlook (no fixed duration), same as freehand — json/embed export\nunaffected. waypoints/travelDuration/dwell/ease/highlightScale/dimOthers\nare carried in the scene JSON but inert in infinity (kept at neutral/\nfreehand-like values so switching presets is lossless).\nLike freehand — and UNLIKE spotlight — infinity ships \"drag\": true: its\nwhole interaction model IS the drag (scatter+depth has no coherent\n\"route\" to auto-cruise), so it takes the same \"drag\": true every non-grid\ntemplate uses. Its interaction block is byte-identical to freehand's;\n\"drag\" is the single field spotlight's differs in (scroll false and the\ncursor sub-block all off in all three).\n`sway` (hover micro-follow) is reproduced in the exported embed too —\napp and embed match. `cardSize` (130) is IGNORED in parallax: infinity\nbakes a fixed card width (slider hidden), so the scatter period and the\nzoom floor stay constant no matter what cardSize a scene carries. Two\ncards of the SAME image are placed apart (best-effort, seeded) so photo\nduplicates don't land adjacent. On mobile the exported embed OWNS\ntouch-drag inside the canvas (no page scroll / rubber-band / back-gesture);\ntouches OUTSIDE the canvas scroll the host page normally.", "overrides": { "columns": 10, "rows": 10, "cardRatio": "1:1", "cardSize": 130, "cornerRadius": 8, "gap": 20, "waypoints": [ 11, 44, 88 ], "travelDuration": 1.6, "dwell": 0.8, "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.08, "dimOthers": 0, "zoom": 240, "offsetX": 0, "offsetY": 0, "cameraMode": "parallax", "depth": 65, "density": 50, "sway": 30, "scatterSeed": 7, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } }, "config": { "cardRatio": "1:1", "columns": 10, "rows": 10, "cardSize": 130, "cornerRadius": 8, "gap": 20, "waypoints": [ 11, 44, 88 ], "travelDuration": 1.6, "dwell": 0.8, "ease": "power2.inOut", "easeCustom": [ 0.42, 0, 0.58, 1 ], "highlightScale": 1.08, "dimOthers": 0, "cameraMode": "parallax", "depth": 65, "density": 50, "sway": 30, "scatterSeed": 7, "zoom": 240, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] }, { "id": "sphere", "name": "sphere", "defaultPresetId": "sphere-globe", "rendererKind": "sphere", "ownsDragGesture": true, "hasDerivedDuration": false, "hasDynamicBounds": false, "fieldCount": 13, "fields": [ { "key": "cardRatio", "label": "Card Ratio", "section": "Cards", "control": "select", "options": [ "1:1", "4:3", "3:4", "16:9", "9:16" ], "default": "3:4", "locked": false, "hidden": false, "effect": "aspect ratio of each card" }, { "key": "count", "label": "Count", "section": "Cards", "control": "slider", "min": 12, "max": 400, "step": 1, "default": 120, "locked": false, "hidden": false, "effect": "cap is visual / low-end-machine headroom, not perf — 500 cards still hit ~59fps in testing" }, { "key": "cardSize", "label": "Card Size", "section": "Cards", "control": "slider", "min": 24, "max": 400, "step": 1, "default": 96, "locked": false, "hidden": false, "effect": "card width; height from `cardRatio`" }, { "key": "cornerRadius", "label": "Corner Radius", "section": "Cards", "control": "slider", "min": 0, "max": 50, "step": 1, "default": 4, "locked": false, "hidden": false, "effect": "percent of the shorter side" }, { "key": "radius", "label": "Radius", "section": "Layout", "control": "slider", "min": 150, "max": 900, "step": 1, "default": 442, "locked": false, "hidden": false, "effect": "sphere radius. Default from a packing estimate; it is a plain slider, not derived" }, { "key": "tilt", "label": "Tilt", "section": "Layout", "control": "slider", "min": -60, "max": 60, "step": 1, "default": 18, "locked": false, "hidden": false, "effect": "axis tilt in degrees. Only readable in MOTION (a still frame can't show it)" }, { "key": "duration", "label": "Duration", "section": "Motion", "control": "slider", "min": 4, "max": 120, "step": 1, "default": 32, "locked": false, "hidden": false, "effect": "seconds for **one full turn**" }, { "key": "direction", "label": "Direction", "section": "Motion", "control": "toggle", "options": [ "forward", "reverse" ], "default": "forward", "locked": false, "hidden": false, "effect": "`forward` = front face travels right→left (opposite of `orbit`); `reverse` = left→right" }, { "key": "farScale", "label": "Far Scale", "section": "Style", "control": "slider", "min": 10, "max": 100, "step": 1, "default": 55, "locked": false, "hidden": false, "effect": "far-side card scale, percent" }, { "key": "farOpacity", "label": "Far Opacity", "section": "Style", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 35, "locked": false, "hidden": false, "effect": "far-side card opacity, percent" }, { "key": "highlightScale", "label": "Highlight Scale", "section": "Emphasis", "control": "slider", "min": 1, "max": 3, "step": 0.01, "default": 1.6, "locked": false, "hidden": false, "effect": "hovered card multiplier (same meaning as grid's)" }, { "key": "dimOthers", "label": "Dim Others", "section": "Emphasis", "control": "slider", "min": 0, "max": 100, "step": 1, "default": 40, "locked": false, "hidden": false, "effect": "percent the non-hovered cards dim by" }, { "key": "zoom", "label": "Zoom", "section": "Framing", "control": "slider", "min": 50, "max": 300, "step": 1, "default": 100, "locked": false, "hidden": false, "effect": "viewport zoom %" } ], "lockedFields": [ { "key": "rotationX", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "rotationY", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "rotationZ", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "perspective", "value": 1000, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 1000" }, { "key": "offsetX", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" }, { "key": "offsetY", "value": 0, "locked": true, "hidden": true, "section": null, "control": "locked", "label": null, "effect": "must be present; locked at 0" } ], "presets": [ { "id": "sphere-globe", "name": "globe", "isDefault": true, "description": "the opening look.", "overrides": { "cardRatio": "3:4", "count": 120, "cardSize": 96, "cornerRadius": 4, "radius": 442, "tilt": 18, "duration": 32, "direction": "forward", "farScale": 55, "farOpacity": 35, "highlightScale": 1.6, "dimOthers": 40, "zoom": 100, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } }, "config": { "cardRatio": "3:4", "count": 120, "cardSize": 96, "cornerRadius": 4, "radius": 442, "tilt": 18, "duration": 32, "direction": "forward", "farScale": 55, "farOpacity": 35, "highlightScale": 1.6, "dimOthers": 40, "zoom": 100, "rotationX": 0, "rotationY": 0, "rotationZ": 0, "perspective": 1000, "offsetX": 0, "offsetY": 0, "interaction": { "drag": true, "scroll": false, "onRelease": "resume", "cursor": { "gravity": { "enabled": false, "strength": 50, "radius": 350 }, "hover": { "enabled": false, "strength": 50, "radius": 350 }, "face": { "enabled": false, "strength": 50, "radius": 350 } } } } } ] } ] }