{"_id":"@any-tdf/vue-confetti","_rev":"3-f7a8bff7674ee6f53270755b0172e928","name":"@any-tdf/vue-confetti","dist-tags":{"latest":"0.0.1","alpha":"0.0.0-alpha.3"},"versions":{"0.0.0-alpha.1":{"name":"@any-tdf/vue-confetti","version":"0.0.0-alpha.1","keywords":["confetti","css animation","ssr","svelte-confetti","vue","vue3"],"license":"MIT","_id":"@any-tdf/vue-confetti@0.0.0-alpha.1","maintainers":[{"name":"dufu1991","email":"dufu1991@163.com"}],"homepage":"https://github.com/any-tdf/any-tdf/tree/main/packages/vue-confetti#readme","bugs":{"url":"https://github.com/any-tdf/any-tdf/issues"},"dist":{"shasum":"42c5141da6ba2d273cf8f0d5e8dc9bd0a1ee5c2c","tarball":"https://registry.npmjs.org/@any-tdf/vue-confetti/-/vue-confetti-0.0.0-alpha.1.tgz","fileCount":7,"integrity":"sha512-c/V2WZ3iOazz42SXiLnC6spkhbFTAD+D8hpULDTnCpfb5loNTscOP/WAJRDgG8WFug5LmfhavKgakbILQ3QfKg==","signatures":[{"sig":"MEUCIAGHmPewgUxKcHuAmVMI6MR7BIztWwtO0Zh7e7GLVwucAiEAkLkGvXhZkSJQ9eHE3m6S1b42N3rnZNp6VylUf+HxsFQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@any-tdf%2fvue-confetti@0.0.0-alpha.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":23944},"main":"./dist/index.js","type":"module","_from":"file:/tmp/any-tdf-publish-cE74ZV/any-tdf-vue-confetti-0.0.0-alpha.1-publish.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"test":"bun test","build":"tsc -p tsconfig.json","check":"vue-tsc -b","package":"bun run build && publint && bun pm pack --dry-run --quiet","release:check":"bun run check && bun run test && bun run package","typecheck:native":"vue-tsc -b"},"_npmUser":{"name":"dufu1991","email":"dufu1991@163.com"},"_resolved":"/tmp/any-tdf-publish-cE74ZV/any-tdf-vue-confetti-0.0.0-alpha.1-publish.tgz","_integrity":"sha512-c/V2WZ3iOazz42SXiLnC6spkhbFTAD+D8hpULDTnCpfb5loNTscOP/WAJRDgG8WFug5LmfhavKgakbILQ3QfKg==","repository":{"url":"git+https://github.com/any-tdf/any-tdf.git","type":"git","directory":"packages/vue-confetti"},"_npmVersion":"12.0.2","description":"Vue port of svelte-confetti's pure HTML and CSS confetti effect.","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","publishConfig":{"tag":"alpha","access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.39","publint":"^0.3.21","vue-tsc":"^3.3.8","@types/bun":"^1.3.14","typescript":"npm:typescript-native-bridge@6.0.3-bridge.7.tsgo.7.0.2","@types/node":"^26.1.1","@vue/server-renderer":"3.5.39"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-confetti_0.0.0-alpha.1_1785817333587_0.5719945549410475","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-alpha.3":{"name":"@any-tdf/vue-confetti","version":"0.0.0-alpha.3","keywords":["confetti","css animation","ssr","svelte-confetti","vue","vue3"],"license":"MIT","_id":"@any-tdf/vue-confetti@0.0.0-alpha.3","maintainers":[{"name":"dufu1991","email":"dufu1991@163.com"}],"homepage":"https://github.com/any-tdf/any-tdf/tree/main/packages/vue-confetti#readme","bugs":{"url":"https://github.com/any-tdf/any-tdf/issues"},"dist":{"shasum":"baba0334c2284191d852744cf51be244875f87f1","tarball":"https://registry.npmjs.org/@any-tdf/vue-confetti/-/vue-confetti-0.0.0-alpha.3.tgz","fileCount":7,"integrity":"sha512-7twwkPHCkAqLg88NL6wc1eobb3jivdIaEGFTgngroz9WAZSGHFY0zg0qpbpohGuLrvDE3No0BROkgziUsAjn5Q==","signatures":[{"sig":"MEYCIQC6zwDXXejV6wxuJk9uzJCUhu7kQMvHSeC45M00N5amAwIhAJkOuuw68Mdy0Jo6RnfBynqlXzuvrFOJpxn49YMklB1U","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@any-tdf%2fvue-confetti@0.0.0-alpha.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":20603},"main":"./dist/index.js","type":"module","_from":"file:/tmp/any-tdf-publish-IdaFYz/any-tdf-vue-confetti-0.0.0-alpha.3-publish.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"test":"bun test","build":"rm -rf dist && tsc -p tsconfig.json && bun run ../../scripts/minify-package-js.mjs dist","check":"vue-tsc -b","package":"bun run build && publint && bun pm pack --dry-run --quiet","release:check":"bun run check && bun run test && bun run package","typecheck:native":"vue-tsc -b"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:b3975523-8607-49b0-9d37-e644ad78c41d"}},"_resolved":"/tmp/any-tdf-publish-IdaFYz/any-tdf-vue-confetti-0.0.0-alpha.3-publish.tgz","_integrity":"sha512-7twwkPHCkAqLg88NL6wc1eobb3jivdIaEGFTgngroz9WAZSGHFY0zg0qpbpohGuLrvDE3No0BROkgziUsAjn5Q==","repository":{"url":"git+https://github.com/any-tdf/any-tdf.git","type":"git","directory":"packages/vue-confetti"},"_npmVersion":"12.0.2","description":"Vue port of svelte-confetti's pure HTML and CSS confetti effect.","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","publishConfig":{"tag":"alpha","access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"3.5.39","publint":"^0.3.23","vue-tsc":"^3.3.8","@types/bun":"^1.3.14","typescript":"npm:typescript-native-bridge@6.0.3-bridge.7.tsgo.7.0.2","@types/node":"^26.1.2","@vue/server-renderer":"3.5.39"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-confetti_0.0.0-alpha.3_1785852353329_0.16114786693325267","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"_id":"@any-tdf/vue-confetti@0.0.1","bugs":{"url":"https://github.com/any-tdf/any-tdf/issues"},"dist":{"shasum":"bdc0cbeddf5de781b062ec9f3d5bd97121ab3fc4","tarball":"https://registry.npmjs.org/@any-tdf/vue-confetti/-/vue-confetti-0.0.1.tgz","fileCount":7,"integrity":"sha512-gok46sn1qzXzMMJyOtJtEy//6L/0zNcvqvhUu2BIx/Wgn3NIQg+ev/N+8E1GASAfR9uOdndDpJfA70Y3j9iEOg==","signatures":[{"sig":"MEYCIQC8r8L4RRnprUK9ya7rvpy7E1Ge0tUNszZX/YBsXNfx1gIhAKNzNFVW7b3GPCurWOxse7RMDzTll+If3p8SVkzPNKWY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD1vIZk/9TxJInAX4OGtxfA1WPNNM83yXWh/YiAlb/nQQIgdlMN0WJwpQmDt2diiEns+OaLwRhi2POhDxXIhTvMZeg="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@any-tdf%2fvue-confetti@0.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":20559},"main":"./dist/index.js","name":"@any-tdf/vue-confetti","type":"module","_from":"file:/tmp/any-tdf-publish-7CIeVL/any-tdf-vue-confetti-0.0.1-publish.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"license":"MIT","scripts":{"test":"bun test","build":"rm -rf dist && tsc -p tsconfig.json && bun run ../../scripts/minify-package-js.mjs dist","check":"vue-tsc -b","package":"bun run build && publint && bun pm pack --dry-run --quiet","release:check":"bun run check && bun run test && bun run package","typecheck:native":"vue-tsc -b"},"version":"0.0.1","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"b3975523-8607-49b0-9d37-e644ad78c41d"}},"homepage":"https://github.com/any-tdf/any-tdf/tree/main/packages/vue-confetti#readme","keywords":["confetti","css animation","ssr","svelte-confetti","vue","vue3"],"_resolved":"/tmp/any-tdf-publish-7CIeVL/any-tdf-vue-confetti-0.0.1-publish.tgz","_integrity":"sha512-gok46sn1qzXzMMJyOtJtEy//6L/0zNcvqvhUu2BIx/Wgn3NIQg+ev/N+8E1GASAfR9uOdndDpJfA70Y3j9iEOg==","repository":{"url":"git+https://github.com/any-tdf/any-tdf.git","type":"git","directory":"packages/vue-confetti"},"_npmVersion":"12.0.2","description":"Vue port of svelte-confetti's pure HTML and CSS confetti effect.","directories":{},"maintainers":[{"name":"dufu1991","email":"dufu1991@163.com"}],"sideEffects":false,"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.39","publint":"^0.3.23","vue-tsc":"^3.3.8","@types/bun":"^1.3.14","typescript":"npm:typescript-native-bridge@6.0.3-bridge.7.tsgo.7.0.2","@types/node":"^26.1.2","@vue/server-renderer":"3.5.39"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-confetti_0.0.1_1790865397735_0.45265456089444034"}}},"time":{"created":"2026-08-04T04:22:13.396Z","modified":"2026-10-01T14:36:39.529Z","0.0.0-alpha.1":"2026-08-04T04:22:13.721Z","0.0.0-alpha.3":"2026-08-04T14:05:53.468Z","0.0.1":"2026-10-01T14:36:37.882Z"},"bugs":{"url":"https://github.com/any-tdf/any-tdf/issues"},"license":"MIT","homepage":"https://github.com/any-tdf/any-tdf/tree/main/packages/vue-confetti#readme","keywords":["confetti","css animation","ssr","svelte-confetti","vue","vue3"],"repository":{"url":"git+https://github.com/any-tdf/any-tdf.git","type":"git","directory":"packages/vue-confetti"},"description":"Vue port of svelte-confetti's pure HTML and CSS confetti effect.","maintainers":[{"name":"dufu1991","email":"dufu1991@163.com"}],"readme":"# @any-tdf/vue-confetti\n\nVue port of `svelte-confetti@2.3.2`.\n\nThe component renders pure HTML and CSS animation markup. It does not use canvas, timers for animation frames, or runtime physics. The goal is API and visual behavior parity with `svelte-confetti`, with `className`, Vue `class`, and Vue `style` passthrough for integration.\n\n## Install\n\n```sh\nbun add @any-tdf/vue-confetti vue\n```\n\nVue is required. The component is SSR-friendly and has no canvas or runtime physics dependency.\n\n```vue\n<script setup lang=\"ts\">\nimport { Confetti } from '@any-tdf/vue-confetti';\n</script>\n\n<template>\n\t<Confetti rounded :amount=\"100\" />\n</template>\n```\n\n## Documentation\n\nThe standalone Vue documentation app lives beside the package source in `packages/vue-confetti/docs`.\n\n```sh\nbun install\nbun run --filter @any-tdf/vue-confetti-site dev\nbun run --filter @any-tdf/vue-confetti-site build\n```\n\nThe site mirrors the demo structure and API coverage from `svelte-confetti@2.3.2`, with Chinese and English content.\n\n## Props\n\n| Prop                      | Default       | Description                                                                            |\n| ------------------------- | ------------- | -------------------------------------------------------------------------------------- |\n| `size`                    | `10`          | Maximum size in pixels for each confetti piece.                                        |\n| `x`                       | `[-0.5, 0.5]` | Horizontal range multiplier. `[-1, 1]` means up to `200px` left and right.             |\n| `y`                       | `[0.25, 1]`   | Vertical range multiplier. Negative values move downward, positive values move upward. |\n| `duration`                | `2000`        | Animation duration for each piece in milliseconds.                                     |\n| `infinite`                | `false`       | Loops the animation indefinitely. Overrides `iterationCount`.                          |\n| `delay`                   | `[0, 50]`     | Random delay range for each piece in milliseconds.                                     |\n| `colorRange`              | `[0, 360]`    | HSL hue range used when `colorArray` is empty.                                         |\n| `colorArray`              | `[]`          | CSS color values to pick from randomly. Supports gradients and image backgrounds.      |\n| `amount`                  | `50`          | Number of confetti pieces. Large values can affect performance.                        |\n| `iterationCount`          | `1`           | CSS `animation-iteration-count`; accepts numbers, `infinite`, `initial`, or `inherit`. |\n| `fallDistance`            | `\"100px\"`     | CSS distance each piece falls after the burst.                                         |\n| `rounded`                 | `false`       | Renders circular pieces.                                                               |\n| `cone`                    | `false`       | Shapes the burst as a cone.                                                            |\n| `noGravity`               | `false`       | Uses a constant-speed explosion without the falling stage.                             |\n| `xSpread`                 | `0.15`        | Horizontal spread from `0` to `1`. Lower values keep peak and end X positions closer.  |\n| `destroyOnComplete`       | `true`        | Removes the markup after finite animations complete on the client.                     |\n| `disableForReducedMotion` | `false`       | Disables animation when `prefers-reduced-motion` is active.                            |\n| `className`               | `\"\"`          | Extra class name for the holder element.                                               |\n| `style`                   | `undefined`   | Extra inline styles for the holder element.                                            |\n\n## Notes\n\n- The CSS trajectory, timing variables, gravity behavior, cone behavior, reduced-motion behavior, and default values are based on `svelte-confetti@2.3.2`.\n- The component is SSR-friendly. Server rendering outputs the same holder and piece markup; client-side cleanup only runs after mount.\n- Random piece values are generated from prop values, not array prop identities, so parent re-renders with equivalent inline ranges do not restart the burst.\n\n## Links\n\n- [Source](https://github.com/any-tdf/any-tdf/tree/main/packages/vue-confetti)\n- [Issues](https://github.com/any-tdf/any-tdf/issues)\n- [VTDF](https://vtdf.dev)\n\n## License\n\n`@any-tdf/vue-confetti` is released under the [MIT License](https://github.com/any-tdf/any-tdf/blob/main/LICENSE).\n","readmeFilename":"README.md"}