Props

Converts Analyser frequency data into CSS custom properties and (optionally) maps those values to selected elements. For each data band, it places a custom property of the format --[name]-freq-[index] on the root. Finally, --[name]-freq-interval represents the duration of one frame (based on the fps value). This is useful for CSS transitions.

class: Props
extends: BandsToProps
tag: <props-blam>
see: props

examples

Props

name	type	default	description
selector	string		A CSS selector representing all the elements to which data values should be mapped. Each element’s `--[name]-[type]` property is mapped to a specific band (`--[name]-freq: --[name]-freq-[index]`), meaning all selected elements can be affected with a single declaration.
first	number	undefined	The first of the data bands to use. If `undefined`, it’s the very first band provided by the Analyser.
last	number	undefined	The last of the data bands to use. If `undefined`, it’s the very last band provided by the Analyser.
shuffle	boolean	false	Whether to shuffle the band/frequency data.
analyser	string		A CSS selector for the Analyser element. Defaults to the first Analyser found in the page.
transport	string		A CSS selector representing the element used to start and stop listening to analyser data. This element must fire `blamplay` and `blamstop` events. At the time of writing, Media, Pads, and Notes do this.
fps	number	25	Frames per second. The frequency with which Analyser data is read.

Examples

OH FUN! There are currently no examples using Props.