fand / react-vfx

WebGL effects for React elements
https://amagi.dev/react-vfx
467 stars 16 forks source link

feat: accept overflow size in `overflow` property #58

Closed fand closed 3 weeks ago

fand commented 3 weeks ago

This PR allows users to specify the overflow size of each element.

Previously, overflow just let REACT-VFX to render the element in fullscreen. This was useful to write shaders that animates / distorts the image radically, e.g. glitch preset. However, it causes some issues like elements being rendered in incorrect areas when shaders weren't written carefully. Also, it might lead to performance issue since all overflow elements must be rendered even if the element is out of the screen.

After this PR, we can now specify the size of overflow (i.e. how many pixels REACT-VFX will render outside the original element area). For example, when we specify <VFXImage overflow={100}>, REACT-VFX will add 100px paddings to all directions. We can also specify overflow size for specific directions like this:

// We can pass an array to specify overflow size just like CSS's padding / margin.
// For examle, this element will overflow 100px to the right, 200px to the bottom, and 300px to the left.
<VFXImg overflow={[0, 100, 200, 300]} />

// We can also pass an object, which is more readable.
// For example, this element will overflow 200px to the left.
<VFXImg overflow={{ left: 200 }} />
vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-vfx-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 11, 2024 5:55pm