https://github.com/poeti8/what-can-you-do-with-a-particle

the intro animation for my youtube video.
https://github.com/poeti8/what-can-you-do-with-a-particle

gpgpu gsap r3f react-three-fiber threejs webgl

Last synced: 3 months ago
JSON representation

the intro animation for my youtube video.

• Host: GitHub
• URL: https://github.com/poeti8/what-can-you-do-with-a-particle
• Owner: poeti8
• License: mit
• Created: 2024-06-30T09:09:25.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T04:28:29.000Z (8 months ago)
• Last Synced: 2024-10-11T20:32:26.675Z (4 months ago)
• Topics: gpgpu, gsap, r3f, react-three-fiber, threejs, webgl
• Language: TypeScript
• Homepage: https://www.youtube.com/watch?v=7aynyPX80BQ
• Size: 1.49 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## what can you do with a particle?

an animation built with **three.js**, **react three fiber**, **webgl** and **gsap** for the [what can you do with a particle?](https://www.youtube.com/watch?v=7aynyPX80BQ) video.



  





  watch video ↗︎



## run locally

you need [node.js](https://nodejs.org) and [pnpm](https://pnpm.io/) package manager. (npm should work fine too).

1. install dependencies via `pnpm install` or `npm install`.

2. run the app via `pnpm dev` or `npm run dev`.

3. visit `http://localhost:5173`

i made this animation for myself only to record the screen with no intention to deploy it on a website. naturally, i did not care about the performace as long as it would run smoothly on my computer. so i'm unsure how it might run or look on your device.

the short animation [particle dreams (1988)](https://www.youtube.com/watch?v=5QEp-oPaQto) by karl sims was a big inspiration to me for create this video. 

## assets

* wave image from paul bourke texture library on [paulbourke.net](https://paulbourke.net/texturelibrary/displayimage.cgi?water/waves.jpg)

* original female head model by artworkcgi on [cgtrader.com](https://www.cgtrader.com/free-3d-models/character/woman/female-head-3d-model-5879537d-cfc2-4173-a929-055341ddeea2)