https://github.com/danielfvm/shadify

A library for adding a shader wallpaper to the background of your website.
https://github.com/danielfvm/shadify

animations glsl-sandbox javascript library shaders website

Last synced: about 1 year ago
JSON representation

A library for adding a shader wallpaper to the background of your website.

• Host: GitHub
• URL: https://github.com/danielfvm/shadify
• Owner: danielfvm
• License: mit
• Created: 2023-10-06T13:56:15.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-26T17:47:39.000Z (about 2 years ago)
• Last Synced: 2025-04-06T02:41:44.758Z (about 1 year ago)
• Topics: animations, glsl-sandbox, javascript, library, shaders, website
• Language: TypeScript
• Homepage: https://danielfvm.github.io/Shadify/
• Size: 118 KB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Shadify

![Repository size](https://img.shields.io/github/repo-size/danielfvm/Shadify?color=39d45f) 

[![GitHub last commit](https://img.shields.io/github/last-commit/danielfvm/Shadify?color=39d45f)](https://github.com/danielfvm/Shadify/commits/master) 

![License](https://img.shields.io/badge/license-MIT-39d45f) 

[![Stargazers](https://img.shields.io/github/stars/danielfvm/Shadify?color=39d45f&logo=github)](https://github.com/danielfvm/Shadify/stargazers)

A library for adding a shader wallpaper to the background of your website or any of your divs.

You can find a live example [here](https://danielfvm.github.io/Shadify/example/) and you can find the code in the `example/` folder.

![untitled](https://github.com/danielfvm/Shadify/assets/23420640/bee4a957-7d08-4db6-849c-7e7ff3bdd1d8)

## Usage

Include shadify in your project.

```html

```

To add a shader to the background or any other div add `data-shader` with a link to a [glslsandbox.com](https://glslsandbox.com/) shader or to your own shader source file.

```html

...

```

Additionally you can set `data-shader-speed` (1.0 default) and `data-shader-quality` (2.0 default) settings. Here an example with the same shader

but at twice the speed and a quarter the quality. 

```html



....



```


## Features

* Shaders can directly be loaded from [glslsandbox.com](https://glslsandbox.com/)

* Support for setting shader quality and speed

* Supports mouse input

* Attributes can be changed using JavaScript at runtime

* Access the shader uniforms using `myDiv.shadify.getUniform(name)`

## Planned

* Support links from `shadertoy.com`

* Improved README.md

* Documentation

* Reuse same shaders

## Build library

Run following commands to build this library yourself. You will find the output at `dist/`.

```bash

git clone https://github.com/danielfvm/Shadify.git

cd Shadify

npm install

npm run build

```