︎ ︎ ︎
REFRACT TOOL
Version 0.23





OVERVIEW
LICENSE
SUPPORT
REFRACT is a simple web generative tool built on p5.js that allows users to process images by applying various displacement filters and simple refraction effects based on shaders. With the program, you can import images from your device or pull an example photo from the Unsplash service, then apply and adjust the parameters of a distortion filter to create high-quality video clips or static compositions.

In addition, the program has a number of ready-made presets for quick application of various effects, plus you can export and save your own presets as JSON files for easy reuse.
The tool is available as a free version – fully functional but with watermarks on exported graphics, so you can thoroughly evaluate its capabilities before committing. Without a valid license key, the tools can only be used for evaluation and testing. To remove watermarks and obtain full usage rights, please purchase a license key at Gumroad:
https://antlii.gumroad.com/l/refract-license-key

By using any tool at https://antlii.work, you agree with the Terms of Use and License Agreement. For full details, including usage rights for Personal, Commercial, and Extended Licenses, examples of permitted applications, please view the complete License Agreement here:
https://antlii.work/license
The tool accepts raster images in JPG/PNG/WebP formats as source material, and it also support transparency. You can upload images of any size, as the program will scale it down, the threshold value for the resize can be set in the program settings.

  • Image Size: Image size directly affects performance and depending on the type of video card you have and the browser you are using, you may receive a warning that the image size is too large:
    Warning: The requested width/height exceeds hardware limits. Adjusting dimensions to [width], [height].
    For this reason, in the program settings you can find the image size limitation parameter, which will reduce the image to the defined threshold value upon uploading the image.

  • Browser: I haven't noticed much difference in using the tool in different browsers, but I mostly develop and test the program in Chrome on my Mac M1 laptop. In case you experience poor performance, try switching to a different browser.

  • Video Export: During export to video, the process may stop due to insufficient memory, especially with high resolution or long videos. If this happens, try reducing the resolution or length of the video. For large or high-resolution videos, consider exporting as a PNG sequence and later converting it to a video using the FFmpeg library.

  • Screen size: A minimum resolution of 800x600 is required.


Please let me know if you're running into any issues or discover a bug while using the program.


CHANGE LOG:

0.23 (2025.01.27)
  • Added the ability to export graphics to MP4 instead of WebM video format
  • Added drag-n-drop feature to load images and presets by dropping files onto the canvas
  • UI Refactoring


CREDITS:

I would like to acknowledge the use of several third-party libraries within this project and express my sincere gratitude to their creators for making these resources available:

  • The p5.js Creative Coding Library, a product of the collective efforts of an incredible team;
  • Shader examples for WebGL by Adam Ferriss
  • The Tweakpane interface library, ingeniously developed by Hiroki Kokubun;
  • The P5.capture library made by Tapioca24

And a big thanks to Unsplash platform, and specifically the contributors, for the chance to freely use their images in this project.
2025 ︎︎︎ ANATOLII BABII