REFRACT TOOL
Version 0.24
Version 0.24
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.
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 requires a valid license key or active subscription to be used without export watermarks.
If you're using the tool without a license, it runs in Unlicensed mode - fully functional, but with watermarks on all exports. This mode is intended for evaluation and testing only. Public sharing of unlicensed outputs is only allowed with proper credit (e.g. tag @antl.ii or link to antlii.work).
To unlock full usage rights and remove watermarks, please purchase a license or subscribe:
Buy a license key:
https://antlii.gumroad.com/l/refract-license-key
All-tools subscription (commercial use included):
https://antlii.gumroad.com/l/antlii-tools-access
By using any tool on https://antlii.work, you agree to the License Agreement. The agreement explains usage rights for Personal and Commercial licenses, subscription terms, and examples of what’s allowed.
If you're using the tool without a license, it runs in Unlicensed mode - fully functional, but with watermarks on all exports. This mode is intended for evaluation and testing only. Public sharing of unlicensed outputs is only allowed with proper credit (e.g. tag @antl.ii or link to antlii.work).
To unlock full usage rights and remove watermarks, please purchase a license or subscribe:
Buy a license key:
https://antlii.gumroad.com/l/refract-license-key
All-tools subscription (commercial use included):
https://antlii.gumroad.com/l/antlii-tools-access
By using any tool on https://antlii.work, you agree to the License Agreement. The agreement explains usage rights for Personal and Commercial licenses, subscription terms, and examples of what’s allowed.
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.
Please let me know if you're running into any issues or discover a bug while using the program.
0.24 (Jul 10, 2025)
0.23 (Jan 27, 2025)
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:
And a big thanks to Unsplash platform, and specifically the contributors, for the chance to freely use their images in this project.
- 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 Performance: Rendering speed can vary widely depending on your hardware and browser. If you notice significant slowdowns, try switching to a different browser - Chrome and Firefox tend to offer the best performance.
- 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.
- MP4 Lag: When exporting to MP4 format, a library-related lag can lead to performance drops, causing the program to slow down noticeably after capturing and exporting the animation. Refreshing the page resolves this issue.
- Mobile Support: The tool isn’t optimized for mobile devices. You’ll need at least an 800×600 display to run it reliably.
Please let me know if you're running into any issues or discover a bug while using the program.
Change Log:
0.24 (Jul 10, 2025)
- Parameter Refinements: Adjusted internal variables and parameters, with corresponding updates to the algorithm logic;
- External License Verification: Moved license key checks to a dedicated external script for easier maintenance;
- Global Stylesheet: Replaced the local style.css with a unified global stylesheet to streamline styling;
- Global Popup Notifications: Integrated an external popup script to handle alerts, warnings, and errors in a consistent, user-friendly modal;
- Updated Events: Refactored event handling and drag-and-drop workflows with real-time visual feedback on the canvas;
- Preset Logic Update: Refining the preset import algorithm for greater reliability and error resistance;
- Export Logic Overhaul: Unification of the export pipeline for enhanced clarity and easier future updates;
- Local Storage Changes: Minor changes in saving the tool display settings into local storage;
- UI Tweaks: Made various interface adjustments and visual polish to enhance the overall user experience.
0.23 (Jan 27, 2025)
- 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
- Jonas Wagner’s Simplex Noise algorithm;
- 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.