ShaderGif is a small, focused playground for creating looping visuals with code—mainly GLSL fragment shaders, JavaScript, and p5.js sketches. This page explains the core technologies used on the site, why the feed shows GIF/video previews, and a few practical tips to help you publish lightweight, shareable loops.
What is a GLSL shader?
GLSL (OpenGL Shading Language) is a C-like language used to run tiny programs directly on your GPU. On ShaderGif, most “shader” posts are fragment shaders: code that determines the colour of each pixel on the screen.
If you’re new to shaders, it helps to think of them as math-driven image generators: you combine vectors, timing, and functions like sin, cos, and noise to produce patterns, motion, and lighting effects—often in just a few dozen lines.
What you’ll typically see in a ShaderGif GLSL sketch
- Inputs like time and resolution (so animation and resizing work consistently)
- A UV coordinate system (mapping pixels to 0–1 space or centred space)
- Procedural shapes (circles, lines, SDFs), gradients, palettes, and noise
- A final colour output (what actually gets drawn each frame)
If you want some guidance on which software to download to start crafting your gifs, see this helpful guide on choosing your first code editor.
What is JavaScript?
JavaScript is the programming language that powers interactivity on the web. On ShaderGif, JavaScript is used for sketches that run in the browser (usually via the <canvas> element), and for glue code around previews, playback, and editor behaviour.
If you can write basic JavaScript, you can already create animations: draw shapes each frame, update positions, and export a loop.
What is p5.js?
p5.js is a JavaScript library designed to make creative coding approachable. It provides friendly drawing APIs, simple animation loops, and lots of examples—ideal for quick experiments and visual studies.
On ShaderGif, p5.js sketches are a great option when you want to build visuals from drawing commands (shapes, text, particles) rather than pixel shaders.
Why does the feed show GIFs/videos instead of running the code?
ShaderGif prioritises shareable previews. A rendered GIF/video can be embedded, linked, and viewed instantly without requiring the visitor’s device to compile shaders or run heavier code every time.
Practical reasons this approach helps
- Long-term viewing: people can enjoy the result even if the original runtime environment changes.
- Predictable playback: what you saw when you published is what others see.
- Lower compute on repeat views: visitors aren’t re-running expensive graphics each time they scroll.
- Easy sharing: previews travel well across platforms, chats, and feeds.
In many cases, a short looping video preview can also be much smaller than an equivalent high-quality GIF, while looking nearly identical during playback—especially for gradients and complex motion.
Local storage backup in the editor
The editor is designed to be forgiving while you iterate. As you type, your browser can retain a working copy so accidental refreshes don’t necessarily wipe your draft.
Good habits for avoiding lost work
- Keep a “draft” saved when you’re experimenting heavily.
- If you open a different sketch or load a new example, assume it may replace what’s currently in the editor.
- When you’ve reached a good stopping point, export or save a named version so you can return later without guessing which state is preserved.
A short history of ShaderGif
ShaderGif began as a personal experiment: a simple way to turn small graphics programs into looping previews that could be shared online. Over time, the idea expanded into a lightweight site with an editor, examples, and a public feed—built around the same goal: make code-based visuals easy to publish and easy to view.
If you’re here from an old link, archive, or shared post, this rebuild aims to keep the original purpose intact: a practical home for small shader and canvas experiments, presented in a format that remains viewable over time.
Considerations when making small, good-looking GIFs
File size matters for smooth browsing and easy sharing. The biggest wins usually come from simplifying motion and reducing how much the image changes between frames.
Tips that typically shrink files without ruining the loop
- Use fewer frames when you can: many loops still feel smooth at modest frame counts.
- Avoid ultra-smooth gradients: subtle gradient shifts can explode the palette and inflate file size.
- Limit noisy flicker: heavy per-frame randomness makes compression harder.
- Embrace clean contrasts: simple colour palettes often compress extremely well.
- Keep resolution reasonable: a smaller canvas can look great on a feed and export quickly.
If your animation needs a lot of frames or contains complex gradients, exporting a short video loop for preview can be a better “weight vs quality” trade-off than forcing everything into a GIF.
Internal link suggestions (anchor text + suggested target topic)
- GLSL shader examples → Gallery/category page for GLSL example sketches
- JavaScript canvas examples → Collection of JavaScript-based GIF sketches
- p5.js starter sketches → Beginner-friendly p5.js examples and templates
- How exports work (GIF vs video) → Guide explaining export formats, size, and quality trade-offs
- Editor tips and shortcuts → Documentation page for editor workflow, drafts, and backups
Last updated: 27 December 2025