Glitter

USE CASE

Glitter is based on components. To be fully functionnal, it needs to have severals events setup.

import { engine } from 'glitter'

// when client's window is accessible
engine.ready = true

window.addEventListener('pointermove', engine.pointermove)
window.addEventListener('scroll', engine.scroll)

Component's methods and a few utils, are based on internal mechanism defined thanks to those lines.

NB: utils are originally made to be used as standalones. The only utils that are connected to shimmer's mechanisms are for performance benefits.

FILES STRUCTURE

• component Defines shimmer Component and setup internal structure that supports Components Lifecycles and methods
• utils Defines shimmer utils. Utils are standalone helper functions.
• emitter Singleton implementation of emitter used internally to deal with events (for lifecycle, hooks, etc etc)

API

Engine

import { engine } from 'shimmer'

// when window is accessible
engine.ready = true

A singleton that runs the application. Functions needs to be called to allow every features. set property ready when object client's window is accessible.

Methods

• pointermove (event: Event)
  • event: user event Required. Needs to be called on pointermove events
• scroll (event: Event)
  • event: user event Required. Needs to be called on scroll events

Component

import { Component } from 'glitter'

const component = new Component()

Abstarct class.

Lifecycle

• onResize ()
  • when window is resized OR body height or width changes (cause of content added for instance)
• onScroll ()
  • when scroll on window
• onUpdate ({ delta, elpased })
  • delta: time elapsed since the last frame
  • elpased: time elapsed since the beginning of the experience

Methods

• destroy () To be called before removing the elements or when element is not used anymiore

Utils

Clock

import { clock } from 'shimmer'

clock.on({delta, elapsed} => {
  // code
})

A timer function that goes thourgh all the application. Used internally by all components.

Chronometer

import { Chronometer } from 'shimmer'

const chrono = new Chronometer()

chrono.on(({elapsed}) => {
  // console.log('plop', elapsed)
})

setTimeout(() => {
  chrono.start()
}, 3000)

A timer class depending on Clock Used internally by all components.

Timeout

import { Timeout } from 'shimmer'

const countdown = Timeout(3000, () => {
  // code
})
countdown.off()

A timeout function similar to setTimeout.

ToCanvas

import { ToCanvas } from 'shimmer'

const toCanvas = new ToCanvas({ image, video, width, height, muted = false, loop = true, fit })
toCanvas.promise.then(() => {
  code
  // if video
  toCanvas.start()
})

toCanvas.canvas

• image: String. URL of the source if image
• video: String. URL of the source if video. If image is also defined, it will be used as poster before video is able to play.
• width: Int. Width of the generated canvas. If not defined, use source as value
• height: Int. Height of the generated canvas. If not defined, use source as value
• muted: Boolean. If source is video, set it to muted to allow autoplay
• loop: Boolean. If source is video, set it to loop
• fit: String. Allowed values are 'cover' or 'contained'. Default value is 'cover'

Generate a canvas with an image or a video sized as cover

Write code

Build project npm run build

Run example npm run start