Elemental Effects.
Expressive Characters.

Elemental shader effects for web characters. 8 custom GLSL shaders, 291 gestures, WebGL + Canvas 2D. MIT.

Electric
Live DemoGitHub
8 shaders·291 gestures·60fps WebGL·Canvas 2D fallback·TypeScript·MIT

From install to fire crown in four lines.

React, Vue, Svelte, vanilla JS.

// npm install @joshtol/emotive-engine
import { EmotiveMascot3D } from '@joshtol/emotive-engine'
const mascot = new EmotiveMascot3D({ element: 'fire' })
mascot.init(document.getElementById('canvas')).then(() =>
mascot.express('firecrown')
View full API docs on GitHub →

8 Elemental Shader Systems

Custom GLSL per element. 16–23 gestures each. Click any to try on CodePen.

Fire elemental effect
Fire19 gestures · CodePen →
Ice elemental effect
Ice16 gestures · CodePen →
Electric elemental effect
Electric22 gestures · CodePen →
Water elemental effect
Water21 gestures · CodePen →
Void elemental effect
Void17 gestures · CodePen →
Light elemental effect
Light23 gestures · CodePen →
Earth elemental effect
Earth22 gestures · CodePen →
Nature elemental effect
Nature21 gestures · CodePen →
CodePen collection →All 291 gestures →

npm install @joshtol/emotive-engine

React, Vue, Svelte, vanilla JS. MIT.

View on GitHubBrowse Examples