1
The System PromptPrime the AIBefore you ask for a specific effect, you must teach the AI the strict rules of the Addifect Engine. AI models know how to write standard GLSL, but they do not know Addifect’s specific parameter bindings, crash-prevention rules, or JSON requirements.
1. Open a fresh chat with your preferred AI.2. Copy the entire text of the Addifect Engine Shader Developer Guide using the button below.3. Paste it into the chat and send it. The AI will acknowledge the rules and is now ready to code.
Addifect Shader Master GuideRaw Text Prompt • ~700 Words
Copy to ClipboardCopied!
2
Best PracticesWrite a High-Fidelity PromptTo get a great shader, you need to be specific about the visual behavior, the mathematical style, and the interaction.
Upload Reference Images:If you have a screenshot of a SaaS website, a dribbble mockup, or a texture you like, upload it! AI vision models are excellent at translating images into mathematical coordinates.Describe the Physics, Not Just the Vibe:Instead of saying "make a cool background," say "Create an organic fluid mesh gradient using 3 orbiting color nodes and inverse distance weighting."Specify the Category:Tell the AI if this is an art shader (generates colors/backgrounds) or a displacement shader (warps the image underneath it).
3
Custom UIDefine Your Effect Layer ControlsThe Addifect Engine automatically builds the UI in the Addifect effect editor based on the JSON parameters the AI writes. Tell the AI exactly what sliders, toggles, and color pickers you want available for this specific effect layer.
"Please include 3 color pickers for the gradient (Deep Space, Nebula Pink, Neon Blue), a slider for 'Flow Speed' (0 to 3), and a slider for 'Noise Detail' (0 to 1). Ensure all default colors are in hex format."
4
DeploymentThe Generation & ImportThe AI will output a single JSON code block.
1. Copy the JSON code.2. Go to your Addifect Vault.3. ClickImportand paste the JSON.
✓ Your shader, along with all the custom effect layer controls, will immediately render in the engine.5
RefinementIteration & TroubleshootingAI models occasionally make mistakes or hallucinate unsupported WebGL functions. Because the Addifect compiler is extremely strict to protect your website's performance, it will catch these errors.
If you get a Syntax Error:Do not try to fix it yourself. Copy the exact error message from the Addifect console (e.g., ERROR: 0:248: 'gl_hash' : reserved built-in name) and paste it back to the AI. The AI will instantly recognize the rule it broke and provide a corrected JSON file.If it looks wrong:Tell the AI exactly what is visually off. (e.g., "The glow is pinching at the corners of the card," or "The light is dripping downward, but I want it to track the mouse instead.")If the frame rate drops:Tell the AI: "This is too heavy and dropping my FPS. Please optimize it by removing nested FBM loops and using cheaper sine/cosine waves."
A Quick Checklist for Perfect Generations:
Did I paste the Master Guide in a fresh chat?
Did I upload a reference image?
Did I specify the exact effect layer controls I want in the editor?
Is the output a single JSON block?