{"_id":"@deriv-com/quill-motion-web","_rev":"7-a5d728c185f0077ff089cd27dee21a1a","name":"@deriv-com/quill-motion-web","dist-tags":{"latest":"1.0.5"},"versions":{"0.0.0":{"name":"@deriv-com/quill-motion-web","version":"0.0.0","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@0.0.0","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"5ea1f4a24dd5ad515bd18b8a9a1d47fb3482a2f4","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-0.0.0.tgz","fileCount":3,"integrity":"sha512-Un+j4wbtOcsY+Oi6hvmUg3yWLkPzWzlB1+dDDfhT30IW4/qokBdqPhkU9FjEc6ShJarVJaMElg16OFgJXb2CMQ==","signatures":[{"sig":"MEYCIQD5fiUm80XzLwoGleH1vDi68nTXcZL0snTxFBqyr+1CDgIhAK7uBq6u2G7ETCj5bvWUxkdkPEM3KW7gCQgs2s0DZcSW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6308},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"2898949a33352dc3fd66a7bfaf33c2a00bc7cea5","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"11.18.0","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"26.6.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_0.0.0_1786093837454_0.9701019156580366","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@deriv-com/quill-motion-web","version":"1.0.0","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@1.0.0","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"8c269fccc068bf28d8c3822ccaaeb2468f6fa61c","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.0.tgz","fileCount":19,"integrity":"sha512-9vv4PbDdN/gDmlfR6ZdzunCFFGoDCnyj3KdzSl5a3Jpnk7PDAIULluP57+z5cEFi29Bpk5oDu5xGIpaRdGskOw==","signatures":[{"sig":"MEUCIDQVoD9qxAqsjXT591IpQtaz8fybHnsGhiMrjkSu7wyuAiEAu5lbQupO2fzsfZReVKNIPlWc76/RQLS/6qYb//q8t7s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26300},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"532c511eee76581934db73c10891bf18d44ab47f","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_1.0.0_1786095178705_0.6040022408903596","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@deriv-com/quill-motion-web","version":"1.0.1","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@1.0.1","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"1fbf6fc282e0fe21f57c742c7a7ca8ce8876fe84","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.1.tgz","fileCount":19,"integrity":"sha512-Dp0d8d4pHkOwdzyRB5V/razcssj8mNtXVMfx2IruaQc+Cy0d7dG+4qQNPOjSE0sMvSoot7mURnb5edOjYkiJ0g==","signatures":[{"sig":"MEUCIQDnW8+pB0RvxpqC+BJpxQLVKMRqptuZf3qAkTW7VkB62gIgLgY0tpFR/oHTk77csuxWX8qOm1THRSNAlcd1hPin/NE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27458},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"164a058e1d750b592d6266a43f3d95ebb2fa8b7a","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_1.0.1_1786353856949_0.9107392885286509","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@deriv-com/quill-motion-web","version":"1.0.2","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@1.0.2","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"3d97e013c6ab030727fc7cf9400d64eb3410b57a","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.2.tgz","fileCount":19,"integrity":"sha512-v4bWlFXJtlSKPp1HyElaCinsxnBe36/v5WgZsjh1rbm8e6powtfxt+0ic30LX/FFvb5vs0UqOTsUhqiXk7l7hQ==","signatures":[{"sig":"MEUCIQCr0NAIFKcsuTtkxScNBPCCA7WHPpbFJFjufp7NSXdX9wIgZztc3WpxOcb+CPn+dt/6CtV4lOyTNZIddDe0+1kt1tc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34556},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"58117285e16a63b6f8491ff98883a56885e19171","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_1.0.2_1786604750082_0.5593232352791249","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@deriv-com/quill-motion-web","version":"1.0.3","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@1.0.3","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"02e13548590f8a3fd6a324ba60f2832046f8095b","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.3.tgz","fileCount":19,"integrity":"sha512-1F3FUlgdcHNe6MkpajiZOjJVUOgyCfVR4jUfg8nkxxpCc+69Z5w82VH/z8pBmqWYh2vW1OuHsGCrKvIvECiHcw==","signatures":[{"sig":"MEUCICbkIx6j/brFU3C9YQZnEiIHDHFV4JWByjdHhITlOozTAiEAyjCImXveI7g7vfzehTzr2lIOrDhjBsJ+vzHatk56f2A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34556},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"dd3a0384ae1cf0315974b8e0320ccd522b3261da","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_1.0.3_1786617081259_0.20015319362193917","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@deriv-com/quill-motion-web","version":"1.0.4","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"author":{"name":"Deriv.com Limited"},"license":"MIT","_id":"@deriv-com/quill-motion-web@1.0.4","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"e0e06484198c2527f64ea0dc8ad84df2e505c504","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.4.tgz","fileCount":19,"integrity":"sha512-cDlHZQsxjaKYer+E3hytfqqJ2K+BUOf3OXNtoKjCRCPe7uzOAR8zsnnjdg7mTKadxS9z2ACB6013oilvq7tRBQ==","signatures":[{"sig":"MEUCIBh3UlY+pKp7hL2Gcf4m4VLyHBuLlgA2AygHqa48sgTsAiEA+rNoJnyWTnmfjzAS9dvDvFjevrjebc35Em7J6mNzMuc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34559},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"ef2399863dc2368cb2c84e20f89fd867c50698cc","scripts":{"test":"vitest run","build":"tsup"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^3.2.6","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/quill-motion-web_1.0.4_1787107572033_0.27699821622238185","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"_id":"@deriv-com/quill-motion-web@1.0.5","bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"dist":{"shasum":"cb927579c6b5d8baa5764bca5125ed9da5af86d3","tarball":"https://registry.npmjs.org/@deriv-com/quill-motion-web/-/quill-motion-web-1.0.5.tgz","fileCount":19,"integrity":"sha512-gEcThc+ryOVBMnFMBpQQzS/fPXEiNeUPNVLAK6owWa5vtzOgltpyR6WfHLoTiU9JfoQeDdnx+RLW03q2efsYtA==","signatures":[{"sig":"MEUCIQCT4sXVKa+qovRmx84XbW0OaqaovY5/hKXufGcioXsZIgIgKN3bD4XcEMUvYDN6HOwyEcNuc4GmLZgcFFZu4g9U9Cg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA+7rzhXAbJe2QwxkX3CGSubegOU23yBKmOknxjqIICVAiEAsG8nMI2f0yKi7KAg13/xgQABMJMP56ewyCqVWj35q48="}],"unpackedSize":36229},"main":"./dist/index.cjs","name":"@deriv-com/quill-motion-web","type":"module","types":"./dist/index.d.ts","author":{"name":"Deriv.com Limited"},"module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/groups/*.d.ts","import":"./dist/groups/*.js","require":"./dist/groups/*.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"18440d52ca13a546cd87057be7916ab32437af0e","license":"MIT","scripts":{"test":"vitest run","build":"tsup"},"version":"1.0.5","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9613f7df-0bdb-4bd0-ab71-e7eabd6bfafe"}},"homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"_npmVersion":"12.0.2","description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","directories":{},"maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"sideEffects":false,"_nodeVersion":"22.23.2","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^25.0.0","react":"^18.3.0","vitest":"^4.1.11","react-dom":"^18.3.0","typescript":"^5.5.0","@types/react":"^18.3.0","@testing-library/react":"^16.0.0"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/quill-motion-web_1.0.5_1790061352787_0.4606977139424351"}}},"time":{"created":"2026-08-07T09:10:37.284Z","modified":"2026-09-22T07:15:53.094Z","0.0.0":"2026-08-07T09:10:37.600Z","1.0.0":"2026-08-07T09:32:58.843Z","1.0.1":"2026-08-10T09:24:17.078Z","1.0.2":"2026-08-13T07:05:50.223Z","1.0.3":"2026-08-13T10:31:21.431Z","1.0.4":"2026-08-19T02:46:12.173Z","1.0.5":"2026-09-22T07:15:52.895Z"},"bugs":{"url":"https://github.com/deriv-com/product-design-quill-icons/issues"},"author":{"name":"Deriv.com Limited"},"license":"MIT","homepage":"https://github.com/deriv-com/product-design-quill-icons/tree/main/packages/motion-web#readme","keywords":["deriv","quill","motion","video","animation","react","design-system","frontify"],"repository":{"url":"git+https://github.com/deriv-com/product-design-quill-icons.git","type":"git","directory":"packages/motion-web"},"description":"Video/motion asset URLs for Deriv's Quill design system, synced from Frontify.","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"readme":"# @deriv-com/quill-motion-web\n\nVideo and motion assets for Deriv's Quill design system, synced from **Frontify**.\n\nThis package ships **URLs, not video files**. The assets themselves live on\nFrontify's CDN (`media.ffycdn.net`, CloudFront-backed, cached for a year), so\ninstalling this package costs kilobytes no matter how many animations exist.\n\n```bash\npnpm add @deriv-com/quill-motion-web\n```\n\n## Just give me the URL\n\n```ts\nimport { onboardingWelcome } from '@deriv-com/quill-motion-web'\n\n<video src={onboardingWelcome} autoPlay muted loop playsInline />\n```\n\nEvery export is a plain string constant, so unused ones tree-shake away\ncompletely. This entry point does **not** require React — it works in Vue,\nSvelte, plain HTML, or an `og:video` meta tag.\n\n## When the name is dynamic\n\n```ts\nimport { motionAssets, type MotionName } from '@deriv-com/quill-motion-web'\n\nfunction play(name: MotionName) {\n  const asset = motionAssets[name]\n  return <video src={asset.url} width={asset.width} height={asset.height} />\n}\n```\n\n`MotionName` is a union of every available asset, so a typo fails at build time\nrather than 404-ing in production. Each record carries\n`{ url, posterUrl?, width?, height?, durationMs?, mimeType }`. Passing `width`\nand `height` through is worth doing — without them the browser cannot reserve\nspace before the video's metadata downloads, and the page shifts.\n\n## The React component\n\n```tsx\nimport { QuillMotion } from '@deriv-com/quill-motion-web/react'\n\n<QuillMotion name=\"onboarding-welcome\" alt=\"Welcome animation\" />\n```\n\nRenders a `<video>` with the defaults that are easy to get wrong:\n\n| Default | Why |\n|---|---|\n| `muted`, `playsInline` | **Mandatory.** Without either, autoplay is blocked on iOS Safari and Chrome and the animation silently never starts on mobile. |\n| `preload=\"metadata\"` | Fetches dimensions without pulling the whole file. |\n| `autoPlay`, `loop` | The common case for UI motion. |\n| `width`, `height` | Set from the asset's intrinsic size to prevent layout shift. |\n\nEvery prop is overridable and any extra `<video>` attribute passes through:\n\n```tsx\n<QuillMotion name=\"onboarding-welcome\" alt=\"Welcome\" loop={false} className=\"rounded-lg\" />\n```\n\n### `alt` is required\n\nNot an oversight. It is the only thing that makes the reduced-motion fallback\nand screen readers work, and it cannot be derived from the asset.\n\n### Reduced motion is handled for you\n\nWhen the user's OS sets `prefers-reduced-motion: reduce`, `QuillMotion` renders\nthe poster still as an `<img>` instead of an autoplaying loop. Autoplaying video\nis exactly what that setting exists to suppress — for users with vestibular\ndisorders it can cause real nausea. If an asset has no poster, the component\nrenders an empty box at the correct size rather than falling back to video.\n\nRequires **React 18+** (`useSyncExternalStore`), so the preference is correct on\nthe server's first paint rather than after a frame of autoplaying video.\n\n## Group subpaths\n\nAssets are grouped by their Frontify folder:\n\n```ts\nimport { welcome } from '@deriv-com/quill-motion-web/onboarding'\n```\n\n## How this package is updated\n\nGenerated by the Frontify sync — see\n[`docs/superpowers/specs/2026-08-07-frontify-motion-pipeline-design.md`](../../docs/superpowers/specs/2026-08-07-frontify-motion-pipeline-design.md).\nDo not hand-edit `src/groups/`, `src/assets.ts`, or `src/index.ts`; a sync\noverwrites them.\n\nRemoved and renamed assets are **deprecated, never deleted** — the old export\nsurvives as a `@deprecated` alias, so a rename in Frontify cannot break your\nbuild.\n","readmeFilename":"README.md"}