Open Source · MIT License

Animate the
aesthetic.

A zero-dependency canvas animation library with 6 hand-crafted themes. Drop it in, customize with sliders, export as GIF.

Try it live npm install gif-theme-gen
6 themes
0 dependencies
4kb gzipped
// live demo

Play with it

preview.canvas
● REC 0000
Theme
Speed 5
Density 5
// themes

Six moods. Infinite possibilities.

Retro Wave

Scanlines, synthwave particles, and that unmistakable 80s glow.

GifTheme.use('retro')

Neon City

Perspective grid, electric beams, cyberpunk geometry.

GifTheme.use('neon')

Sunset

Golden horizon, gradient sky, drifting orbs at dusk.

GifTheme.use('sunset')

Matrix

Classic falling character rain. Green. Minimal. Iconic.

GifTheme.use('matrix')

Deep Space

Drifting stars, soft nebula clouds, the void in motion.

GifTheme.use('space')

Ocean Deep

Rising bubbles, layered waves, deep water atmosphere.

GifTheme.use('ocean')
// usage

Get started in 30 seconds

01

Install

npm install gif-theme-gen
# or
yarn add gif-theme-gen
02

Import & Initialize

import GifTheme from 'gif-theme-gen';

const gen = new GifTheme({
  canvas: document.getElementById('c'),
  theme: 'neon',
  speed: 5,
  density: 7
});
03

Control & Export

gen.play();
gen.pause();
gen.setTheme('matrix');

// Export as GIF (uses gif.js)
gen.export({ fps: 24, duration: 3000 })
   .then(blob => saveAs(blob, 'my.gif'));