Loading repository data…
tasnem-tech / repository
Zero-dependency canvas animation library with 6 hand-crafted GIF themes : Retro, Neon, Matrix, Space, Sunset, Ocean
GIF Theme Generator is a lightweight JavaScript animation engine that creates customizable canvas-based animated themes.
It includes six built-in visual styles and allows developers to create their own themes with a simple rendering API.
Perfect for:
| Feature | Description |
|---|---|
| 🎨 Six Built-in Themes | Ready-to-use animated presets |
| ⚡ Real-time Rendering | Smooth HTML5 Canvas animations |
| 🎛 Live Controls | Adjust speed, density and themes instantly |
| 🖼 GIF Export | Export animations as GIFs |
| 🌈 Theme API | Build custom animation themes |
| 🚫 Zero Dependencies | Pure JavaScript implementation |
| 📱 Responsive | Works across desktop and mobile |
| Theme | Preview |
|---|---|
| 📼 Retro Wave | Neon synthwave animation |
| 🌆 Neon City | Cyberpunk skyline |
| 🌅 Sunset | Warm animated gradient |
| 💻 Matrix | Digital rain |
| 🪐 Deep Space | Cosmic particles |
| 🌊 Ocean Deep | Underwater animation |
Add an animated GIF here
User Settings
│
▼
Animation Engine
│
▼
Theme Renderer
│
▼
Canvas Drawing
│
▼
Interactive Preview
│
▼
GIF Export
Install via npm
npm install gif-theme-gen
or
yarn add gif-theme-gen
No build process required.
Simply include the library and start rendering.
import GifTheme from "gif-theme-gen";
const animation = new GifTheme({
canvas: document.querySelector("#canvas"),
theme: "neon",
speed: 5,
density: 7
});
animation.play();
animation.play()
animation.pause()
animation.toggle()
animation.reset()
animation.setTheme("matrix")
animation.setSpeed(8)
animation.setDensity(3)
animation.export()
GifThemeEngine.THEMES.myTheme = {
bg:"#111",
palette:["#00ffff","#ff00ff"],
render(ctx,width,height,theme,frame){
// Draw anything you like
}
}
📦 gif-theme-generator
├── 📄 index.html
├── 📂 src
│
├── 📄 themes.js
├── 📄 main.js
├── 📄 style.css
│
├── 📂 assets
│
├── 📂 screenshots
│
├── README.md
├── package.json
└── LICENSE
| Technology | Purpose |
|---|---|
| JavaScript | Animation Engine |
| HTML5 Canvas | Rendering |
| HTML5 | Demo Application |
| CSS3 | User Interface |
Unlike traditional animation libraries, GIF Theme Generator focuses on lightweight performance and simplicity.
It enables developers to build visually engaging animated backgrounds without requiring frameworks or large dependencies.
Released under the MIT License.
⭐ If you found this project useful, consider giving it a Star!
Selected from shared topics, language and repository description—not editorial ratings.
crashmax-dev /
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
crashmax-dev /
🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
aiwongs /
💿 纯原生 JS 驱动的零依赖媒体播放器。支持本地音视频导入、ID3 封面解析及 Canvas 粒子动效。压榨浏览器 API 性能，定义极简播放美学。双击即用的纯前端播放器。本地文件播放、文件夹递归导入、自动提取封面，无任何框架依赖。A pure vanilla JS multimedia player with zero dependencies. Features local file loading, ID3 cover extraction, and vinyl animations. Simple, fast, and secure.
OlaProeis /
Interactive particle rain animation with geometric shape formations. Features 12 unique shapes, customizable physics, rain effects with trails, and explosive interactions. Built with vanilla JavaScript and HTML5 Canvas. 150+ config options. Click, hover, and keyboard controls. Zero dependencies.
alfredang /
Interactive single-page primer on point-set topology — open sets, continuous maps, homeomorphism, compactness, and connectivity, each with a live Canvas animation. Vanilla HTML/CSS/JS, zero dependencies.
galatadesalegn /
A zero-dependency luxury skincare landing page built with pure HTML, CSS, and JavaScript. Features real-time canvas light effects, a dual dark/light theme engine, custom cursor with trail, particle background, and scroll-triggered animations — all in a single self-contained file.