Chromatic Abberation in Framer (using blotter.js.org)

Just playing around importing various JS libs into framer to make it easier to prototype such effects without knowing most of the JS details.

In this example, i've imported blotter.js.org into framer and can render all the supported text effects with just 2-3 lines of code in framer.

The ChannelSplitMaterial takes the Red, Green, and Blue values of the pixels that construct your text, and splits them so that they spread in different directions away from their original position.

You must have seen similar effects to this in the real world in places such as old CRT monitors, damaged VHS tapes, or in the visible color distortion fringing at the edges of a projector's light against a wall.

LINK - https://framer.cloud/uOcKl/