Aperveil for Framer
A code component per shader or block: paste it in, then set it in Framer's panel.
Add a shader
Every shader comes to Framer as a code component: one file you paste into Framer's code editor, set in its property panel like any other component. Free shaders are ready now; Pro shaders come with Pro access.
- Open the shader's editor on aperveil.com and tune it. Open Install, choose Framer and select Copy for Framer. The file opens on the settings you chose.
- In Framer, open Assets, then Code, select + and New code file. Name it after the shader, such as
PlasmaField. - Framer starts the file with sample code: select all of it, replace it with your copy and save.
- Drag the component from Assets onto the canvas.
As a background: place it inside a frame or section, set its position to Absolute with every side pinned at 0, and its width and height to Fill. Move it to the bottom of the layer list, so your headings and buttons sit above it as Framer layers.
Each shader is its own code file, and several can share a project or a page. Whole sections (a hero, pricing, a form) come as blocks, the same way.
Color Looks, browser support, performance and access are the same on every platform: see the overview.