npm:alien.js | Skypack

README

Alien.js

Future web pattern

Alien.js is a design pattern for building SPA websites with ES modules and GSAP.

The idea is to keep it simple, with minimal abstraction, and to build websites more like a framework, which is why Rollup is used instead for bundling.

In its design, everything is an ES module, all user interfaces and components follow the same class structure, making it easy to copy-paste from examples and between projects.

Note this design pattern intentionally does not use underscores or private fields, in favour of cleaner code.

Examples

ui

logo
logo (interface)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
magnetic (component, svg)
tilt
ufo

3d

ripple
physics
audio
audio (fast)
spherical cube
penrose triangle
polyhedron (orbit camera, debug)
camera wobble
camera shake

shader

noise
fxaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
matcap
pbr
soft particles
dof (fake with Bokeh blur, debug)
chromatic aberration
film grain
reflection (with fast Gaussian blur)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
hologram
text (MSDF text)
alienkitty (flowmap with RGB shift, MSDF text)

thread

canvas (noise)
physics
audio
audio (fast)
polyhedron (buffer geometry loader thread)
camera shake
pbr (texture loader thread)

Class structure

import gsap from 'gsap';

export class Logo {
    constructor() {
        this.element;
        this.image;

        this.initHTML();

        this.addListeners();
        this.onResize();
    }

    initHTML() {
        this.element = document.createElement('div');
        this.element.classList.add('logo');
        gsap.set(this.element, {
            top: 50,
            left: 50,
            width: 64,
            height: 64,
            cursor: 'pointer',
            opacity: 0
        });

        this.image = document.createElement('img');
        this.image.src = 'assets/images/alienkitty.svg';
        gsap.set(this.image, {
            position: 'relative',
            width: '100%'
        });
        this.element.appendChild(this.image);
    }

    addListeners() {
        window.addEventListener('resize', this.onResize);
        window.addEventListener('orientationchange', this.onResize);
        this.element.addEventListener('mouseenter', this.onHover);
        this.element.addEventListener('mouseleave', this.onHover);
        this.element.addEventListener('click', this.onClick);
    }

    removeListeners() {
        window.removeEventListener('resize', this.onResize);
        window.removeEventListener('orientationchange', this.onResize);
        this.element.removeEventListener('mouseenter', this.onHover);
        this.element.removeEventListener('mouseleave', this.onHover);
        this.element.removeEventListener('click', this.onClick);
    }

    /**
     * Event handlers
     */

    onResize = () => {
        if (window.innerWidth < window.innerHeight) {
            gsap.set(this.element, {
                top: 30,
                left: 30,
                width: 40,
                height: 40
            });
        } else {
            gsap.set(this.element, {
                top: 50,
                left: 50,
                width: 64,
                height: 64
            });
        }
    };

    onHover = ({ type }) => {
        if (type === 'mouseenter') {
            gsap.to(this.element, { opacity: 0.6, duration: 0.3, ease: 'power2.out' });
        } else {
            gsap.to(this.element, { opacity: 1, duration: 0.3, ease: 'power2.out' });
        }
    };

    onClick = () => {
        open('https://alien.js.org/');
    };

    /**
     * Public methods
     */

    animateIn = () => {
        gsap.to(this.element, { opacity: 1, duration: 0.6, ease: 'sine.inOut' });
    };

    destroy = () => {
        this.element.parentNode.removeChild(this.element);

        this.removeListeners();

        this.element = null;
        this.image = null;

        return null;
    };
}

Getting started

Clone this repository template and install its dependencies:

git clone https://github.com/pschroen/alien.js
cd alien.js
npm i

# or
npx degit pschroen/alien.js my-app
cd my-app
npm i

# Serve at localhost:8080
npm run dev

# Build for production
npm run build

With three.js and UIL

Uncomment all the lines in App.js, install three and download the uil ES module:

npm i && npm i three
mkdir src/lib
curl -L https://raw.githubusercontent.com/lo-th/uil/gh-pages/build/uil.module.js --output src/lib/uil.module.js
npm run dev

UIL is loaded dynamically and not part of the main bundle.

localhost:8080/ (without uil)
localhost:8080/?ui (with uil)
localhost:8080/?ui&orbit (with uil and orbit controls)
localhost:8080/?orbit (just orbit controls)

With examples

npm i && npm i three
cd examples
npm i
npm run build
npm start

alien.js

Usage no npm install needed!