r3f-image-reveal-effect

KO | EN

gitlite — search

#javascript #python #typescript #llm #go #rust #deep-learning #linux #docker #java #windows #kubernetes #ios #openai

r3f-image-reveal-effect

(★ 52)

Image reveal effect made with R3F & GLSL ✦ tutorial available on Codrops

File Explorer

Download Latest Version (.zip)

- - textureupscaled.webp
  - THUMBNAIL.gif
- favicon.ico
- - CodropsOverlay.jsx
  - RevealImage.jsx
- App.jsx
- index.css
- main.jsx
.gitignore
eslint.config.js
index.html
LICENSE
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js
vite.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/colindmg/r3f-image-reveal-effect/main/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)

r3f-image-reveal-effect

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

r3f-image-reveal-effect

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README