Sharp at every size
There is no resolution to outgrow. The same shader fills a phone or an ultrawide display without a second asset, because each frame is drawn for the canvas it lands in.
New Shaders
Animated light, colour and motion. Drawn live, not recorded.
A shader is a small program your GPU runs for every pixel of every frame. It stays sharp at any size and can answer your pointer. Open one, push the controls until it belongs to your project, then take it with you as code or as a frame.
- Shaders to open
- 33
- Families
- 5
- Export targets
- 3 + Figma
- Exports within plan limits
- Included
Why a shader
A background that is computed, not played back.
Light to ship
What you export is source, not footage: a few kilobytes of markup and shader code instead of a video file your visitors have to wait for.
Able to react
Pointer position, scroll, a colour you changed a second ago: a shader can take all of it as input while it runs. A recorded loop cannot.
The collection
Find the surface your page is missing.
Grouped as Particles, Gradients, Lines, Ripples, Waves. Every preview is the real thing, running now. Open any of them to take the controls.
How it works
From the collection to your project, in four steps.
- 01
Open a shader
Every shader opens in its own editor, already running at full speed. No account, no download, nothing to install first.
- 02
Tune it live
Each shader exposes its own controls (flow speed, noise scale, glow, grain, vignette, dot spacing, pixel size) plus colour pickers for its palette. The canvas redraws as you drag.
- 03
Take the code
Export writes the shader at your settings: a self-contained HTML document, a single .svelte component, or React JSX. One file, no HorizonX runtime to install.
- 04
Or take the frame
Copy for Figma puts the frame you are looking at on your clipboard, ready to paste into a Figma file as an image you can keep designing around.
What you take with you
Three export targets, one source.
Svelte and React are generated from the HTML document, so a component can never drift from the preview you approved. Each one mounts the shader when it appears and tears the WebGL context down when it unmounts.
HTML
One document with markup, styles and the shader source inline, ready to open in a browser or paste into a page.
Svelte
A single .svelte component that mounts the shader on load and disposes of it on unmount.
React
The same document wrapped as JSX. No HorizonX runtime to install and nothing calls back to us.
Figma
Copy for Figma puts the frame you are looking at on your clipboard, ready to paste as artwork you can design around.
Try it in your browser. Export with a membership.
You can open and customize any shader in the browser. The export, the Figma copy and the AI prompt come with a membership. Exports have their own allowance, separate from your download limits, and exporting the same shader again within 30 days is free.
What you can build
Atmosphere, without an asset pipeline.
A hero that moves
Give a landing page a background that breathes instead of a static gradient, at any resolution and with no video file to download.
Surfaces with atmosphere
Section dividers, empty states, login panels and loading screens that carry a mood without competing with the copy in front of them.
Interfaces that respond
Several shaders read the pointer or the scroll position, so the surface reacts to the person using it rather than looping past them.
FAQ
Shaders FAQ
What a shader is, what you can take with you, and what it costs.
-
No. Every editor is open to anyone who loads the page: you can change every slider and every colour and watch the shader redraw in real time. A membership is what lets you take it with you: the code export, the Figma copy and the AI prompt.
-
Yes, and it is separate from your download limits. Exports from the Tools, Textures, Shaders and Mockups editors share an allowance of different items per day and per 30 days, which grows with your plan; the numbers are in the plan comparison on /pricing. Exporting the same shader again within 30 days is free, so you can take it in all three formats. That is the editor on the site; shaders your AI coding agent exports for you through MCP count toward its own allowance, explained in the docs under “Downloads, limits & resets”.
-
The HTML target is one self-contained document: markup, styles and the shader source inline, ready to open in a browser or paste into a page. The Svelte and React targets wrap that same document as a single component that mounts the shader on load and disposes of it on unmount. There is no HorizonX runtime to install and nothing calls back to us.
-
No. A shader is a small program the GPU runs for every pixel of every frame through WebGL. That is why it stays sharp at any size, weighs a fraction of a video, and can react to your pointer or scroll. A recorded loop can do none of that.
-
It captures the canvas exactly as it looks at that moment and writes it to your clipboard as an SVG carrying that frame, which Figma accepts as pasted artwork. A shader is drawn per frame rather than built from vectors, so what lands in Figma is the frame you picked, not editable shapes.
-
Each shader checks the prefers-reduced-motion setting and holds a still frame instead of animating, so the composition still reads without the movement. Browsers without working WebGL get a short message in place of the canvas rather than a blank rectangle.
-
Shaders come with a membership: every plan includes the export, the Figma copy and the AI prompt, alongside the rest of the library. All 33 open in the browser with no sign-up, so you can customize one before you decide, and they are authored by HorizonX rather than sold as individual products.
Stop settling for a static gradient.
Pick a shader, push it until it looks like your product, and leave with the file.