https://github.com/colindmg/r3f-image-reveal-effect
Image reveal effect made with R3F & GLSL ✦ tutorial available on Codrops
https://github.com/colindmg/r3f-image-reveal-effect
framer-motion glsl-shader r3f react
Last synced: about 1 year ago
JSON representation
Image reveal effect made with R3F & GLSL ✦ tutorial available on Codrops
- Host: GitHub
- URL: https://github.com/colindmg/r3f-image-reveal-effect
- Owner: colindmg
- License: mit
- Created: 2024-11-20T20:54:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-02T11:11:42.000Z (over 1 year ago)
- Last Synced: 2025-04-11T18:22:38.074Z (about 1 year ago)
- Topics: framer-motion, glsl-shader, r3f, react
- Language: JavaScript
- Homepage: https://tympanus.net/Tutorials/R3FImageReveal/
- Size: 8.75 MB
- Stars: 28
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shader based Reveal Effect with React Three Fiber
_A simple yet pretty cool image reveal effect made with React-Three-Fiber/Drei and animated with FramerMotion._
[Article on Codrops](https://tympanus.net/codrops/?p=83030)
[Demo](https://tympanus.net/Tutorials/R3FImageReveal/)
## Installation
```bash
npm install
```
## Build and Run
```bash
npm run dev
```
or
```bash
npm run build
```
## Credits
- Image generated with [Midjourney](https://www.midjourney.com/)
## Misc
Follow Colin: [X](http://www.x.com/colindmg), [Linkedin](https://www.linkedin.com/in/colindmg/), [GitHub](https://github.com/colindmg)
Follow Codrops: [Bluesky](https://bsky.app/profile/codrops.bsky.social), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/), [X](http://www.x.com/codrops)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Colin](http://www.x.com/colindmg) & [Codrops](http://www.codrops.com)