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: 7 days 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 (3 months ago)
• Default Branch: main
• Last Pushed: 2024-12-02T11:11:42.000Z (2 months ago)
• Last Synced: 2024-12-02T12:23:38.006Z (2 months ago)
• Topics: framer-motion, glsl-shader, r3f, react
• Language: JavaScript
• Homepage: https://tympanus.net/Tutorials/R3FImageReveal/
• Size: 8.75 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• 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._

![Thumbnail](./public/img/THUMBNAIL.gif)

[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)