Elemental Effects.
Expressive Characters.

Elemental shader effects for web characters. 8 custom GLSL shaders, 339 gestures (179 core + 160 elemental), WebGL + Canvas 2D. MIT.

◈ Electric
Live DemoGitHub
8 shaders·339 gestures·Real-time WebGL·Canvas 2D mode·TypeScript·MIT

From install to fire crown in six lines.

React, Vue, Svelte, vanilla JS.

// npm install @joshtol/emotive-engine three
import { EmotiveMascot3D } from '@joshtol/emotive-engine/3d-fire'
const mascot = new EmotiveMascot3D({ coreGeometry: 'crystal', assetBasePath: '/assets' })
mascot.init(document.getElementById('container'))
mascot.start()
mascot.express('firecrown')

The npm package is JavaScript only. Host the repo's assets/ folder (models and textures) and point assetBasePath at it.

Asset setup and the full API 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
Water20 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 160 elemental gestures →

npm install @joshtol/emotive-engine

React, Vue, Svelte, vanilla JS. MIT.

View on GitHubBrowse Examples