{"animation":{"performanceNotes":["All entrance and exit motion is compositor-friendly transform and opacity.","Portal keeps a clip-path iris and the holo sheen sweeps via transform — no per-frame filter or gradient repaints.","JavaScript only changes data attributes and dispatches state events."],"properties":["transform","opacity","clip-path","backdrop-filter"],"reducedMotion":true,"types":["keyframes","3d-transform","clip-path","backdrop-filter"]},"artifactKind":"static-effect","category":"effect","codeHref":"/components/flip-modal/code","dependencies":{"notes":["Dependency-free HTML, CSS, and tiny state orchestration JavaScript."],"runtime":"none"},"description":"CSS modal motion variants with tiny state triggers","downloadHref":"/components/flip-modal/download","exports":[{"description":"Copy every source file listed in this artifact bundle.","href":"/components/flip-modal/code","id":"source-bundle","label":"Source bundle"},{"description":"Copy the same standalone HTML document used by the preview.","href":"/components/flip-modal/preview","id":"standalone-preview","label":"Standalone preview"},{"description":"Inspect artifact metadata, dependencies, files, and preview fidelity.","href":"/components/flip-modal/manifest","id":"manifest","label":"Manifest JSON"},{"description":"Copy framework/runtime notes, required files, and integration steps.","href":"/components/flip-modal/usage","id":"integration-guide","label":"Integration guide"},{"description":"Download source files, manifest JSON, and a README as a zip.","href":"/components/flip-modal/download","id":"download-zip","label":"Download zip"}],"files":[{"language":"html","path":"effects/flip-modal/flip-modal.html","sha256":"6af5b5cdc76baad1174893df86f2ac3476bc54500e57b25c492b0cd7aae43e05","sizeBytes":1869},{"language":"css","path":"effects/flip-modal/flip-modal.css","sha256":"8fb3a6e4ae18fd9fbdd82dfab31a8b5879bcdd83691d8f11a6ece4068a00d916","sizeBytes":10473},{"language":"js","path":"effects/flip-modal/flip-modal.js","sha256":"e44e67f105f1040841e63096aeb1eb575c7962465ce34002efbc523b8707814e","sizeBytes":1689}],"id":"flip-modal","initialHeight":560,"manifestHref":"/components/flip-modal/manifest","minViewportWidth":320,"mobileHeight":640,"name":"flip-modal","previewHref":"/components/flip-modal/preview","previewMode":"source-matched","presets":[{"id":"desktop","label":"Desktop","width":"100%"},{"id":"tablet","label":"Tablet","width":"62%"},{"id":"mobile","label":"Mobile","width":"34%"}],"schemaVersion":1,"tags":["modal","css-motion","css-keyframes","3d-transform","zero-dependency","source-matched","reduced-motion"],"title":"Flip Modal","triggers":[{"actions":[{"detail":{"effect":"flip","state":"open"},"name":"heidi:flip-modal","type":"dispatchEvent"}],"defaultActive":true,"description":"Play the flip entrance.","group":"Effect","id":"flip","label":"Flip"},{"actions":[{"detail":{"effect":"portal","state":"open"},"name":"heidi:flip-modal","type":"dispatchEvent"}],"description":"Play the portal clip-path entrance.","group":"Effect","id":"portal","label":"Portal"},{"actions":[{"detail":{"effect":"holo","state":"open"},"name":"heidi:flip-modal","type":"dispatchEvent"}],"description":"Play the holographic fold entrance.","group":"Effect","id":"holo","label":"Holo"},{"actions":[{"detail":{"effect":"stack","state":"open"},"name":"heidi:flip-modal","type":"dispatchEvent"}],"description":"Play the stacked depth entrance.","group":"Effect","id":"stack","label":"Stack"},{"actions":[{"detail":{"state":"closed"},"name":"heidi:flip-modal","type":"dispatchEvent"}],"description":"Close the modal.","group":"State","id":"close","label":"Close","persistent":false}],"usageHref":"/components/flip-modal/usage"}