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 }} />
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 alloverflow
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: