ShaderGif is a free and open source home for art made with code

ShaderGif is a free and open source home for art made with code

Languages and platforms

Currently, ShaderGifs allows you to make gifs using :

More languages are coming!

The editor

The editor is a simple web coding tool divided in 2 columns.

Left: a visual preview + tools to generate gifs.
Right: a text editor where you type code (Javascript or GLSL, depending on selected language).

Features

Supported browsers

Editor supports Chrome and Firefox. (Other browsers might experience problems)

See the possibilities!

Scroll through the feed to get an idea of the possibilities :

Pricing

Everything that can be done in your browser is free.

In the future, we might introduce paid plans for :


Since ShaderGif is open source, you can always download the code and run it on your own hardware.

Why register?

Registering allows you to publish gifs on the feed and save drafts for later.



How to use the editor?

The editor contains a preview at the left and the code at the right.
Pro tip: The various panels at the left can be collapsed by clicking on the title bar.
To create gifs, there is a "+ Create gif" button. Be patient, since this process takes some time.

I frequently start from the "circle.glsl" example and build up from there:

How to get all frames as png?

How to upload a gif?

  1. First you need to register.
  2. Then, in the shader editor, click the "Create gif" button.
  3. The encoding will take a few seconds.
  4. Once it's ready, the gif will appear at the bottom of the left division of the screen.
  5. If you wish, you can add a title and post it. (It will be shown in the feed)
    • The uploading will take a few seconds, it's normal.
    • The server is rendering a video preview of the gif for the feed.

Stats

There are 111 registered users and a total of 401 shared gifs .

For more details :

View stats page

Contributing and sending feedback

To create github issues github.com/antoineMoPa/shadergif/issues

To contribute code and documentation: github.com/antoineMoPa/shadergif

Start Coding

For the GLSL modes: If you have never used shaders before, you will get more pointers in the documentation (doc.shadergif.com)
For the Javascript/P5.js mode, just read the comments, they should guide your journey!


Don't have an account yet?

With an account, you can post public gifs and save drafts.


Sign up!