Bit Black Hole

By default this component will commence when it is scrolled in to view. You can override this by specifying the data-rwx-manual-control on the rwx-bit-black-hole element. You can then manually control it by specifiying rwxBitBlackHoles.commence('ID') where 'ID' is the ID of the element to commence.

Description

Display web content in a different, interactive and fun way with the Roseworx Bit Black Hole component. Really grasp your users focus with this mesmerizing effect.

Usage

import rwxBitBlackHoles from 'roseworx/js/bitfx/rwxBitBlackHoles';

Copy the html code and personalise it to your use case.

Roseworx BitFont

This component uses Roseworx BitFont - a dynamic and animateable font that uses particles to make up different characters.

Be wary of using too many bitfx components on one page due to the processing power needed to render the graphics.

Current supported bitfx characters include; 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '!', '?', ','

Currently supported orientations are 'horizontal', 'vertical', 'slanted', 'wrap'. When using the 'wrap' orientation you can use the special character '*' which will identify as a carriage return and place anything after on a new line.

Currently supported shapes are 'circle', 'square'.

Configure BitFont

data-rwx-bit-black-hole-value='{CHARACTER}' Sets the letter/word/sentence made up of the supported characters above.

data-rwx-bit-black-hole-orientation='{ORIENTATION}' Sets the orientation of the specified value, must be one of the supported orientations above. If 'wrap' is specified, '*' denotes a carriage return.

data-rwx-bit-black-hole-shape='{SHAPE}' Sets the shape of the letter particles, must be one of the supported shapes above.

data-rwx-bit-black-hole-color='{COLOR}' Sets the color of the letter particles. Default is #FFFFFF

data-rwx-bit-black-hole-background-color='{ORIENTATION}' Sets the background color. Default is #000000

Configuration Options

Optionally add any of these data attributes to the rwx-bit-black-hole element to configure it a certain way.

data-rwx-bit-black-hole-secondary-color='{COLOR}' Sets the color of the particles surrounding the word. MUST BE A VALID HEX VALUE.

data-rwx-bit-black-hole-disable-trail Disables the trailing effect of the surrounding particles.