Future web framework.
- ES modules without transpiling and dynamic import, or use Rollup with Tree Shaking, only the classes you use are compiled into your project.
- Simple design pattern with inheritance,
InterfaceandComponent. - Event based or use promises.
- GSAP animation core.
- Canvas graphics engine.
- Web audio engine.
- SVG support and line animations.
- Multi-pass post processing effects.
- WebGL with three.js.
- GLSL shaders with glslify (a node.js-style module system for GLSL).
- Shader interface system.
glslify shader
colour beam
dissolve (fade transition)
colorize (fade transition)
chromatic aberration (simple)
chromatic aberration 2 (barrel distortion)
rotate
rotate 2 (pinhole)
mask (levels transition)
noise warp
noise dizzy
directional warp
directional warp 2 (scroll transition)
directional warp 3 (shader interface)
ripple
perlin
glitch displace
melt (feedback buffer)
//
// Class
// │
// ├── Decorators
// └── Constructor
// │
// └── Private scope
// │
// ├── Constants
// ├── Variables
// ├── Functions
// │
// └── Public scope
// │
// ├── Methods
// └── Overrides
//
class About extends Interface {
constructor() {
super('About');
const self = this;
// Private scope
let wrapper;
initHTML();
addListeners();
function initHTML() {
self.size('100%');
wrapper = self.create('.wrapper');
}
// Event listeners
function addListeners() {
self.events.add(Events.RESIZE, resize);
resize();
}
function resize() {
}
// Public scope
this.update = () => {
};
this.animateIn = callback => {
};
this.animateOut = callback => {
};
// Overrides
this.destroy = () => {
// ...
return super.destroy();
};
}
}import { Stage, Interface, Device } from '../alien.js/src/Alien.js';
Config.UI_OFFSET = Device.phone ? 20 : 35;
class Logo extends Interface {
constructor() {
super('Logo');
const self = this;
const size = Device.phone ? 40 : 64;
initHTML();
function initHTML() {
self.size(size);
self.css({
left: Config.UI_OFFSET,
top: Config.UI_OFFSET,
opacity: 0
});
self.bg('assets/images/logo.svg', 'cover');
self.tween({ opacity: 1 }, 1000, 'easeOutQuart');
self.interact(hover, click);
}
function hover(e) {
if (e.action === 'over') self.tween({ opacity: 0.7 }, 100, 'easeOutSine');
else self.tween({ opacity: 1 }, 300, 'easeOutSine');
}
function click() {
open('https://alien.js.org/');
}
}
}
class Main {
constructor() {
Stage.initClass(Logo);
}
}
new Main();import { Events, Stage, Interface, Canvas } from '../alien.js/src/Alien.js';
class CanvasLayer extends Interface {
static instance(...params) {
if (!this.singleton) this.singleton = new CanvasLayer(...params);
return this.singleton;
}
constructor() {
super('CanvasLayer');
const self = this;
initContainer();
initCanvas();
addListeners();
function initContainer() {
self.size('100%').mouseEnabled(false);
Stage.add(self);
}
function initCanvas() {
self.canvas = self.initClass(Canvas, Stage.width, Stage.height, true);
}
function addListeners() {
self.events.add(Events.RESIZE, resize);
resize();
}
function resize() {
self.canvas.size(Stage.width, Stage.height);
}
}
}
class Main {
constructor() {
let canvas;
initCanvas();
function initCanvas() {
canvas = CanvasLayer.instance().canvas;
// ...
}
}
}
new Main();import { Events, Stage, StateDispatcher } from '../alien.js/src/Alien.js';
class Data {
static init() {
const self = this;
this.dispatcher = Stage.initClass(StateDispatcher, true);
addListeners();
function addListeners() {
Stage.events.add(self.dispatcher, Events.UPDATE, stateChange);
}
function stateChange(e) {
if (e.path !== '') self.setSlide(e);
}
this.setSlide = e => {
// ...
};
}
}
class Main {
constructor() {
Data.init();
const state = Data.dispatcher.getState();
if (state.path !== '') {
// ...
}
}
}
new Main();To build a project, make sure you have Node.js installed (at least version 6.9).
mkdir loader
cd loader
git init
git submodule add -b master https://github.com/pschroen/alien.js
cp -r alien.js/examples/loader/* .
cp alien.js/.eslintrc.json alien.js/.gitignore .
npm install
npm start
Then open http://localhost:8080/. The npm start script runs npm run dev, so you can start experimenting with the code right away! :)
git submodule update --remote --merge
cp alien.js/examples/loader/package.json alien.js/examples/loader/rollup.config.js .
cp alien.js/.eslintrc.json alien.js/.gitignore .
rm -rf node_modules package-lock.json
npm install
npm run lint
npm run build
npm start
npm run build
mkdir loader
cd loader
curl -sL https://github.com/pschroen/alien.js/archive/master.tar.gz | tar -zxv --strip=3 "*/examples/npm/*"
curl -sOL https://raw.githubusercontent.com/pschroen/alien.js/master/.eslintrc.json
curl -sOL https://raw.githubusercontent.com/pschroen/alien.js/master/.gitignore
npm install
npm start
Download the minified library and include it in your HTML.
<script type="module">
import { Stage, Interface, Device } from './js/lib/alien.min.js';
// ...
</script>GSAP offers years of optimizations, debouncing and skew compensation. The core animation system has been replaced with GSAP, but you can still use Active Theory's method chain syntax.
letters.forEach((letter, i) => {
letter.tween({ y: -5, opacity: 0 }, 125, 'easeOutCubic', 15 * i, () => {
letter.transform({ y: 5 }).tween({ y: 0, opacity: 1 }, 300, 'easeOutCubic');
});
});Spring animation properties spring (amplitude) and damping (period).
tween(data, { radius: 24, spring: 1.2, damping: 0.4 }, 1000, 'easeOutElastic');The tween and defer functions return a Promise, so you can also use .then() and async/await syntax.
letters.forEach(async (letter, i) => {
await letter.tween({ y: -5, opacity: 0 }, 125, 'easeOutCubic', 15 * i);
await letter.transform({ y: 5 }).tween({ y: 0, opacity: 1 }, 300, 'easeOutCubic');
});await defer();
// ...And with the wait method of Interface and Component.
await this.wait(250);
// ...- Docs
- Tests
- Particle examples
- FX and lighting
- Error handling
- Active Theory's GitHub
- Active Theory's gists
- Active Theory's Mira
- Active Theory
- Dynamic import()
- ECMAScript modules in browsers
- How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup
Released under the MIT license.