A JavaScript module that adds responsive, stylized speckles to any element; with no dependencies.

Get Started

Getting Started

Installation

npm install speckle-js

Usage

Import the module.

// Import the module using ES6.
import Speckle from 'speckle-js';

// Import the module using CommonJS.
const Speckle = require('speckle-js');

Use the constructor by passing a valid HTML element as the first argument, and an options object of key: value pairs as the second argument.

new Speckle(element, options);

Options

OptionTypeDefaultDescription
quantityint56

Quantity of speckles.

minSizeint4

The smallest speckle (px). Must be greater than 1 and less than maxSize

maxSizeint56

The largest speckle (px). Must be greater than 1 and greater than minSize

tbOffsetfloat8

Top/Bottom offset (%). Must be greater than or equal to 0. This is the maxiumum distance that speckles can be rendered from the top/bottom of the container element.

lrOffsetfloat8

Left/Right offset (%). Must be greater than or equal to 0. This is the maximum distance that speckles can be rendered from the left/right of the container element.

minOpacityfloat12.5

The most transparent a speckle can be (%). This is a percentage where 100 means 100% opacity, and 0 means 0% opacity. This must be between 0 and 100, and less than maxOpacity

maxOpacityfloat87.5

The most opaque a speckle can be (%). This is a percentage where 100 means 100% opacity, and 0 means 0% opacity. This must be between 0 and 100, and greater than minOpacity

isBokehboolfalse

Whether the speckles should blur as a factor of distance (Bokeh lights effect) or not.

colorstring

The speckle color. If this is a falsy value, a random hex color will be generated using Speckle's getRandomHex() method.

zIndexint0

The CSS z-index of the speckles.

isCroppedboolfalse

Whether to apply overflow: hidden; to the container element or not.

tagNamestringI

What HTML tag name the speckles should be rendered as. This string must be capitalized.

attributesobj

An object of valid HTML attributes as key: value pairs to be added to the speckles.

Examples

Default

Default

Using the module in it's simplest form:

HTML

<div id="default"></div>

JavaScript

new Speckle(document.querySelector('#default'));

Large

Large

HTML

<div id="large"></div>

JavaScript

new Speckle(document.querySelector('#large'), {
	quantity: 25, 
	minSize: 128, 
	maxSize: 256, 
	tbOffset: 20, 
	lrOffset: 20, 
});

Small

Small

HTML

<div id="small"></div>

JavaScript

new Speckle(document.querySelector('#small'), {
	quantity: 96, 
	minSize: 4, 
	maxSize: 16, 
});

Mono

Mono

HTML

<div id="mono"></div>

JavaScript

new Speckle(document.querySelector('#mono'), {
	color: '#000000', 
});

A Lot

A Lot

HTML

<div id="alot"></div>

JavaScript

new Speckle(document.querySelector('#alot'), {
	quantity: 360, 
	tbOffset: 0, 
	lrOffset: 0, 
});

A Little

A Little

HTML

<div id="alittle"></div>

JavaScript

new Speckle(document.querySelector('#alittle'), {
	quantity: 12, 
});

Art Deco

Art Deco

HTML

<div id="deco"></div>

JavaScript

new Speckle(document.querySelector('#deco'), {
	quantity: 6, 
	minSize: 256, 
	maxSize: 768,
	tbOffset: 0, 
	lrOffset: 0, 
});

Crop

Crop

HTML

<div id="crop"></div>

JavaScript

new Speckle(document.querySelector('#crop'), {
	quantity: 6, 
	minSize: 256, 
	maxSize: 768,
	tbOffset: 2, 
	lrOffset: 2, 
	isCropped: true, 
});

Bokeh

Bokeh

HTML

<div id="bokeh"></div>

JavaScript

new Speckle(document.querySelector('#bokeh'), {
	isBokeh: true, 
	color: '#67b0ff', 
	quantity: 24, 
	minSize: 8, 
	maxSize: 112, 
	lrOffset: 20, 
	tbOffset: 20, 
	minOpacity: 25, 
	maxOpacity: 50, 
});

Multi

Multi

Multiple Speckles instances may be applied to a container element, all with their own options. Speckle keeps track of itself programattically through it's class, as well as through data-speckle-* attributes on the container element and the speckles themselves.

Note: Destroying or rerendering one instance will not affect the others.

HTML

<div id="multi"></div>

JavaScript

// First, store the container element.
const multi = document.querySelector('#multi');

// Then, apply the speckle instances as layers.
// Use the zIndex option to organize their elevations.

// Layer 1
new Speckle(multi, {
	tbOffset: 36, 
	lrOffset: 36, 
	zIndex: 2, 
});

// Layer 2
new Speckle(multi, {
	quantity: 4, 
	minSize: 8, 
	maxSize: 256, 
	tbOffset: 24, 
	lrOffset: 24, 
	zIndex: 4, 
});

// Layer 3
new Speckle(multi, {
	isBokeh: true, 
	quantity: 24, 
	minSize: 8, 
	maxSize: 128, 
	tbOffset: 24, 
	lrOffset: 24, 
	minOpacity: 25, 
	maxOpacity: 50, 
	zIndex: 6, 
});

Space

Space

HTML

<div id="space"></div>

JavaScript

const space = document.querySelector('#space');

new Speckle(space, {
	quantity: 36, 
	tbOffset: 0, 
	lrOffset: 0, 
	minSize: 2,
	maxSize: 6,
	minOpacity: 64, 
	maxOpacity: 87.5, 
	isCropped: true, 
	zIndex: 2, 
});

new Speckle(space, {
	quantity: 128, 
	color: '#ffffff', 
	tbOffset: 0, 
	lrOffset: 0, 
	minSize: 2,
	maxSize: 6,
	minOpacity: 87.5, 
	maxOpacity: 100, 
	isCropped: true, 
	zIndex: 0, 
});

Cheese

Cheese

HTML

<div id="cheese"></div>

JavaScript

new Speckle(document.querySelector('#cheese'), {
	color: '#ffffff', 
	quantity: 32,
	minSize: 16,
	maxSize: 64,
	minOpacity: 100, 
	maxOpacity: 100, 
	tbOffset: 4, 
	lrOffset: 4, 
});