{"id":40224072,"url":"https://github.com/software-mansion-labs/typegpu-confetti","last_synced_at":"2026-03-06T08:01:32.507Z","repository":{"id":279598633,"uuid":"939315002","full_name":"software-mansion-labs/typegpu-confetti","owner":"software-mansion-labs","description":"Confetti animations package for React and React Native, computed and rendered exclusively on the GPU","archived":false,"fork":false,"pushed_at":"2025-11-30T04:19:05.000Z","size":1675,"stargazers_count":155,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-12-02T07:19:22.741Z","etag":null,"topics":["confetti","react-native","webgpu"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/typegpu-confetti","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/software-mansion-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-26T10:49:21.000Z","updated_at":"2025-11-30T19:22:17.000Z","dependencies_parsed_at":"2025-04-10T16:21:50.054Z","dependency_job_id":"457a89d0-92a3-447b-b5f2-8dfaa6314d4f","html_url":"https://github.com/software-mansion-labs/typegpu-confetti","commit_stats":null,"previous_names":["mhawryluk/typegpu-confetti","software-mansion-labs/typegpu-confetti"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/software-mansion-labs/typegpu-confetti","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Ftypegpu-confetti","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Ftypegpu-confetti/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Ftypegpu-confetti/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Ftypegpu-confetti/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/software-mansion-labs","download_url":"https://codeload.github.com/software-mansion-labs/typegpu-confetti/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Ftypegpu-confetti/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28587225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T20:45:59.482Z","status":"ssl_error","status_checked_at":"2026-01-19T20:45:41.500Z","response_time":67,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["confetti","react-native","webgpu"],"created_at":"2026-01-19T22:11:22.544Z","updated_at":"2026-03-06T08:01:32.346Z","avatar_url":"https://github.com/software-mansion-labs.png","language":"TypeScript","funding_links":[],"categories":["Editor extensions"],"sub_categories":[],"readme":"\u003c!-- automd:file src=\"./packages/typegpu-confetti/README.md\" --\u003e\n\n# typegpu-confetti\n\n`typegpu-confetti` is a package for highly-customizable confetti animations in React Native, computed and rendered exclusively on the GPU. Written using [react-native-wgpu](https://github.com/wcandillon/react-native-webgpu/) and [TypeGPU](https://github.com/software-mansion/TypeGPU).\n\n\u003cvideo width=\"512\" autoplay muted loop playsinline src=\"https://github.com/user-attachments/assets/02c6fae6-3ffb-47ba-a204-4aacaa96f9b7\"\u003e\u003c/video\u003e\n\n\n## Installation\n\nIn order to use the package in React Native, you need to install the [react-native-wgpu](https://github.com/wcandillon/react-native-webgpu/) package:\n```sh\nnpm install react-native-wgpu\n```\n\nPlease refer to the react-native-wgpu documentation for further information about its installation. Note that the package is not supported by Expo Go, so running `expo prebuild` is required.\n\nThen to install the `typegpu-confetti` package, run:\n```sh\nnpm install typegpu-confetti\n```\n\nFurthermore, if you want to be able to pass JavaScript functions marked with the \"use gpu\" directive to the Confetti component, you need to include the [unplugin-typegpu](https://www.npmjs.com/package/unplugin-typegpu) babel plugin in your project.\n\n```sh\nnpm install unplugin-typegpu\n```\n\nFor further information about the plugin and the overall tgpu functions functionality, please refer to the [TypeGPU documentation](https://docs.swmansion.com/TypeGPU/getting-started/).\n\n## Usage\n\n### 1. Recommended\n\n#### `useConfetti` hook\n\n```tsx\nimport { useConfetti } from 'typegpu-confetti/react-native';\n\nfunction SomeInnerComponent() {\n  const confettiRef = useConfetti();\n\n  return (\n    \u003cView\u003e\n      \u003cButton\n        title=\"run confetti\"\n        onPress={() =\u003e confettiRef?.current?.addParticles(50)}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nThe hook returns a reference to a `Confetti` component, exposing the following functions allowing to control the animation:\n\n```ts\ntype ConfettiRef = {\n  pause: () =\u003e void;\n  resume: () =\u003e void;\n  restart: () =\u003e void;\n  addParticles: (amount: number) =\u003e void;\n};\n```\n\nTo use the hook, the component needs to be descendent from the *ConfettiProvider* component, which accepts the same props as *Confetti* (see the Props section). It's recommended to wrap a top-level component with the provider, to make sure the confetti covers the whole screen (if that's the desired effect) and make the hook accessible anywhere inside the app.\n\n```tsx\nimport { ConfettiProvider } from 'typegpu-confetti/react-native';\n\nfunction SomeHighLevelContainerComponent() {\n  return (\n    \u003cConfettiProvider\u003e\n      \u003cApp/\u003e\n    \u003c/ConfettiProvider\u003e\n  );\n}\n```\n\n### 2. Alternative\n\n#### `Confetti` component\n\n```tsx\nimport { Confetti } from 'typegpu-confetti/react-native';\n\nfunction SomeComponent() {\n  return (\n    \u003cView\u003e\n      \u003cConfetti initParticleAmount={200} /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nThe Confetti component is positioned absolutely and will completely cover its container (the closest parent element with position \"relative\", which is the default value for position in React Native).\n\n\n#### Imperative handle\n\n```tsx\nimport type { ConfettiRef } from 'typegpu-confetti';\nimport { Confetti } from 'typegpu-confetti/react-native';\n\nfunction SomeComponent() {\n  const ref = useRef\u003cConfettiRef\u003e(null);\n\n  return (\n    \u003cView\u003e\n      \u003cConfetti initParticleAmount={200} maxParticleAmount={1000} ref={ref} /\u003e\n      \u003cButton\n        title=\"add particles\"\n        onPress={() =\u003e ref.current?.addParticles(200)}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## Props\n\n```ts\ntype ConfettiPropTypes = {\n  colorPalette?: [number, number, number, number][];\n  size?: number;\n  maxDurationTime?: number | null;\n  initParticleAmount?: number;\n  maxParticleAmount?: number;\n  gravity?: GravityFn;\n  initParticle?: InitParticleFn;\n  style?: StyleProp\u003cViewStyle\u003e;\n};\n\ntype GravityFn = (args: {\n  pos: d.v2f;\n}) =\u003e d.v2f;\n\ntype InitParticleFn = (args: {\n  index: number;\n}) =\u003e void;\n```\n\n* **colorPalette**: JavaScript array of *[r, g, b, a]* colors, from which particles will have their colors randomly assigned.\n\n* **size**: multiplier allowing customizing the sizes of particles, while keeping their random variation. *size \u003c 1*: particles smaller than default, *size \u003e 1*: bigger\n\n* **maxDurationTime**: time in seconds around which the animation should end.\n\n  One second before this time the particles gradually lose their opacity until completely transparent.\n\n  It is *maxDurationTime*, instead of just *durationTime*, because if all of the particles leave the screen, then the animation technically ends earlier, though frames are still being rendered to the canvas until the end of *maxDurationTime*.\n\n  Running *addParticles* function on the ref will reset the time counter to zero each call.\n\n* **initParticleAmount**: the number of particles that will be drawn whenever the component mounts.\n\n  To not run the animation automatically on mount, but after manually invoking the *addParticles* function on some event, set this prop to 0.\n\n* **maxParticleAmount**: the maximum number of particles that can be part of the simulation at any time.\n\n  If this number is smaller than *initParticleAmount*, then it's ignored and *initParticleAmount* is used instead.\n\n  When invoking *addParticles* would result in passing this limit, then the oldest simulated particles are replaced with the new ones. They are replaced instantly, without the fading-out animation.\n\n* **gravity**: function accepting one *vec2f* vector (particle position) and returning one *vec2f* vector (acceleration for the particle).\n\n  It will be run on the GPU, so it needs to be marked with a \"use gpu\" directive, in order to make the `unplugin-typegpu` transpile it at build time.\n\n* **initParticle**: function accepting one *i32* argument (particle index), which is to be used for initializing particle age, position, velocity, random number generator seed.\n\n  To access the necessary data inside the function, you should use the *particles* and *maxDurationTime* tgpu accessors.\n\n  *particles* value is a *TgpuArray* with *maxParticleAmount* elements of type *ParticleData*, *maxDurationTime* value is of type *number*.\n\n  ```ts\n  const ParticleData = d.struct({\n    position: d.vec2f,\n    velocity: d.vec2f,\n    seed: d.f32,\n    timeLeft: d.f32,\n  });\n  ```\n\n  The function will be run on the GPU, so it needs to be marked with a \"use gpu\" directive, in order to make the `unplugin-typegpu` transpile it at build time.\n\n* **style**: allows overriding the default styling set on the inner Canvas element\n\n\u003e[!NOTE]\n\u003e Changing any of the props will restart the animation.\n\n## typegpu-confetti is created by Software Mansion\n\n[![swm](https://logo.swmansion.com/logo?color=white\u0026variant=desktop\u0026width=150\u0026tag=typegpu-github 'Software Mansion')](https://swmansion.com)\n\nSince 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – [Hire us](https://swmansion.com/contact/projects?utm_source=typegpu\u0026utm_medium=readme).\n\n\u003c!-- /automd --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftware-mansion-labs%2Ftypegpu-confetti","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftware-mansion-labs%2Ftypegpu-confetti","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftware-mansion-labs%2Ftypegpu-confetti/lists"}