| { |
| "presets": [ |
| { |
| "name": "grain", |
| "doc": "fine film grain, neutral on any colour" |
| }, |
| { |
| "name": "noise", |
| "doc": "coarser static" |
| }, |
| { |
| "name": "rough", |
| "doc": "gritty relief, like a rough cast wall" |
| }, |
| { |
| "name": "sand", |
| "doc": "warm fine sand grains" |
| }, |
| { |
| "name": "paper", |
| "doc": "soft paper fibre with a little unevenness" |
| }, |
| { |
| "name": "cloud", |
| "doc": "big soft cloudy variation" |
| }, |
| { |
| "name": "concrete", |
| "doc": "pitted concrete" |
| }, |
| { |
| "name": "stone", |
| "doc": "carved stone with broad relief" |
| }, |
| { |
| "name": "crumpled", |
| "doc": "crumpled foil or paper, big creases" |
| }, |
| { |
| "name": "glitter", |
| "doc": "sparse bright sparkles" |
| }, |
| { |
| "name": "frost", |
| "doc": "fine icy crystals" |
| }, |
| { |
| "name": "marble", |
| "doc": "veined marble" |
| }, |
| { |
| "name": "wood", |
| "doc": "long wood grain, along x (use angle 90 for vertical)" |
| }, |
| { |
| "name": "oak", |
| "doc": "oak: open grain, tan with brown rings" |
| }, |
| { |
| "name": "walnut", |
| "doc": "walnut: dark chocolate with black-brown rings" |
| }, |
| { |
| "name": "cherry", |
| "doc": "cherry: warm red-brown with fine rings" |
| }, |
| { |
| "name": "maple", |
| "doc": "maple: pale, tight, nearly plain grain" |
| }, |
| { |
| "name": "pine", |
| "doc": "pine: light yellow wood with wide rings and knots" |
| }, |
| { |
| "name": "mahogany", |
| "doc": "mahogany: deep red-brown, straight grain" |
| }, |
| { |
| "name": "ebony", |
| "doc": "ebony: nearly black with faint streaks" |
| }, |
| { |
| "name": "birch", |
| "doc": "birch: creamy pale wood with fine rings" |
| }, |
| { |
| "name": "oak-planks", |
| "doc": "oak laid as planks, with seams" |
| }, |
| { |
| "name": "walnut-planks", |
| "doc": "walnut laid as planks, with seams" |
| }, |
| { |
| "name": "bark", |
| "doc": "rough vertical bark" |
| }, |
| { |
| "name": "leather", |
| "doc": "pebbled leather" |
| }, |
| { |
| "name": "brushed", |
| "doc": "brushed metal, fine lines along x" |
| }, |
| { |
| "name": "canvas", |
| "doc": "artist canvas weave" |
| }, |
| { |
| "name": "linen", |
| "doc": "loose linen weave with slubs" |
| }, |
| { |
| "name": "denim", |
| "doc": "diagonal twill, blue by default" |
| }, |
| { |
| "name": "carbon", |
| "doc": "carbon fibre twill" |
| }, |
| { |
| "name": "scanlines", |
| "doc": "CRT scanlines" |
| }, |
| { |
| "name": "halftone", |
| "doc": "newsprint dots" |
| }, |
| { |
| "name": "dots", |
| "doc": "a plain dot grid" |
| }, |
| { |
| "name": "lines", |
| "doc": "diagonal hairlines" |
| }, |
| { |
| "name": "grid", |
| "doc": "a square grid, like graph paper" |
| }, |
| { |
| "name": "checker", |
| "doc": "checkerboard" |
| }, |
| { |
| "name": "crosshatch", |
| "doc": "crossed hairlines" |
| }, |
| { |
| "name": "stripes", |
| "doc": "bold diagonal stripes" |
| }, |
| { |
| "name": "waves", |
| "doc": "soft repeating waves" |
| }, |
| { |
| "name": "hex", |
| "doc": "honeycomb" |
| }, |
| { |
| "name": "bricks", |
| "doc": "a red brick wall, light mortar" |
| }, |
| { |
| "name": "bricks-old", |
| "doc": "weathered dark brick" |
| }, |
| { |
| "name": "herringbone", |
| "doc": "parquet laid in a zigzag, every board a slightly different shade" |
| }, |
| { |
| "name": "plaid", |
| "doc": "simple plaid: wide bands crossing, thin lines between" |
| }, |
| { |
| "name": "tartan", |
| "doc": "a red tartan with green and navy bands" |
| }, |
| { |
| "name": "gingham", |
| "doc": "small checks, the picnic cloth" |
| }, |
| { |
| "name": "scales", |
| "doc": "overlapping scales" |
| }, |
| { |
| "name": "mermaid", |
| "doc": "teal fish scales" |
| }, |
| { |
| "name": "shingles", |
| "doc": "roof shingles" |
| }, |
| { |
| "name": "chevron", |
| "doc": "zigzag bands" |
| }, |
| { |
| "name": "argyle", |
| "doc": "a diamond lattice, filled" |
| }, |
| { |
| "name": "lowpoly", |
| "doc": "low-poly facets in two tones" |
| }, |
| { |
| "name": "tiles", |
| "doc": "square tiles with grout" |
| }, |
| { |
| "name": "blueprint", |
| "doc": "drafting grid, fine and coarse" |
| }, |
| { |
| "name": "granite", |
| "doc": "speckled granite" |
| }, |
| { |
| "name": "slate", |
| "doc": "layered slate" |
| }, |
| { |
| "name": "sandstone", |
| "doc": "banded sandstone" |
| }, |
| { |
| "name": "terrazzo", |
| "doc": "chips of stone in cement" |
| }, |
| { |
| "name": "confetti", |
| "doc": "bright scraps scattered, flat" |
| }, |
| { |
| "name": "rust", |
| "doc": "rusted metal" |
| }, |
| { |
| "name": "corrugated", |
| "doc": "corrugated metal sheet" |
| }, |
| { |
| "name": "cork", |
| "doc": "cork board" |
| }, |
| { |
| "name": "kraft", |
| "doc": "brown packing paper" |
| }, |
| { |
| "name": "felt", |
| "doc": "soft wool felt" |
| }, |
| { |
| "name": "burlap", |
| "doc": "coarse sacking" |
| }, |
| { |
| "name": "stucco", |
| "doc": "rough plaster" |
| }, |
| { |
| "name": "starfield", |
| "doc": "a night sky of small and large stars" |
| }, |
| { |
| "name": "snow", |
| "doc": "fresh snow with a few sparkles" |
| }, |
| { |
| "name": "grass", |
| "doc": "blades of grass seen from above" |
| }, |
| { |
| "name": "water", |
| "doc": "water with light ripples" |
| }, |
| { |
| "name": "rain", |
| "doc": "slanted rain streaks" |
| }, |
| { |
| "name": "lava", |
| "doc": "glowing cracks in dark rock" |
| }, |
| { |
| "name": "topo", |
| "doc": "contour lines, like a map" |
| } |
| ], |
| "generators": [ |
| "noise", |
| "bump", |
| "lines", |
| "dots", |
| "grid", |
| "checker", |
| "weave", |
| "carbon", |
| "waves", |
| "hex", |
| "rings", |
| "bricks", |
| "herringbone", |
| "plaid", |
| "scales", |
| "chevron", |
| "diamonds", |
| "triangles", |
| "starfield", |
| "terrazzo" |
| ], |
| "textureKeys": [ |
| { |
| "key": "scale", |
| "doc": "feature size in px: how big the grains, cells or lines are", |
| "words": 1 |
| }, |
| { |
| "key": "intensity", |
| "doc": "how strong the layer is, 0 to 1 (more than 1 over-drives it)", |
| "words": 1 |
| }, |
| { |
| "key": "contrast", |
| "doc": "noise contrast: 1 is as generated, higher is harsher", |
| "words": 1 |
| }, |
| { |
| "key": "threshold", |
| "doc": "noise cut-off: only values above it show (glitter uses a high one)", |
| "words": 1 |
| }, |
| { |
| "key": "contour", |
| "doc": "draw thin lines where the noise crosses the threshold, instead of a plain cut: veins, rings, contours", |
| "words": 1 |
| }, |
| { |
| "key": "octaves", |
| "doc": "noise detail layers, 1 is smooth, 5 is rough", |
| "words": 1 |
| }, |
| { |
| "key": "seed", |
| "doc": "a different random pattern with the same look", |
| "words": 1 |
| }, |
| { |
| "key": "stretch", |
| "doc": "stretch noise features along x and y, e.g. stretch 40 1 for wood grain", |
| "words": 2 |
| }, |
| { |
| "key": "depth", |
| "doc": "bump height: how deep the relief looks", |
| "words": 1 |
| }, |
| { |
| "key": "light", |
| "doc": "bump light direction in degrees", |
| "words": 1 |
| }, |
| { |
| "key": "angle", |
| "doc": "direction of lines and patterns, in degrees", |
| "words": 1 |
| }, |
| { |
| "key": "thickness", |
| "doc": "line or grid-line width in px", |
| "words": 1 |
| }, |
| { |
| "key": "radius", |
| "doc": "dot size as a fraction of the cell (plaid: how wide the bands are as a fraction of the repeat)", |
| "words": 1 |
| }, |
| { |
| "key": "softness", |
| "doc": "how soft the edges of dots and lines are", |
| "words": 1 |
| }, |
| { |
| "key": "animate", |
| "doc": "milliseconds per shimmer step (film-grain flicker); 0 is still", |
| "words": 1 |
| }, |
| { |
| "key": "type", |
| "doc": "noise flavour: fractal is clouds, turbulence is veins", |
| "words": 1 |
| }, |
| { |
| "key": "blend", |
| "doc": "how the layer mixes with what is under it", |
| "words": 1 |
| }, |
| { |
| "key": "color", |
| "doc": "the main colour (dark end of noise, ink of lines and dots)", |
| "words": 1 |
| }, |
| { |
| "key": "color2", |
| "doc": "the second colour (light end of noise, background cell of patterns)", |
| "words": 1 |
| }, |
| { |
| "key": "figure", |
| "doc": "rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain", |
| "words": 1 |
| }, |
| { |
| "key": "warp", |
| "doc": "rings generator: how much each ring wobbles along its length", |
| "words": 1 |
| }, |
| { |
| "key": "pores", |
| "doc": "rings generator: fine fibre and pore streaks between the rings", |
| "words": 1 |
| }, |
| { |
| "key": "knots", |
| "doc": "rings generator: how many knots in one tile (the pattern repeats, so keep it small)", |
| "words": 1 |
| }, |
| { |
| "key": "planks", |
| "doc": "rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each", |
| "words": 1 |
| }, |
| { |
| "key": "symmetrical", |
| "doc": "mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex).", |
| "words": 1 |
| }, |
| { |
| "key": "density", |
| "doc": "starfield and terrazzo: how many stars or chips in a tile, 1 is normal", |
| "words": 1 |
| }, |
| { |
| "key": "invert", |
| "doc": "swap the two colours", |
| "words": 0 |
| } |
| ], |
| "glowKeys": [ |
| { |
| "key": "color", |
| "doc": "the light colour (default: the element's text colour)" |
| }, |
| { |
| "key": "radius", |
| "doc": "how far the glow reaches, in px" |
| }, |
| { |
| "key": "intensity", |
| "doc": "brightness, 1 is normal" |
| }, |
| { |
| "key": "pulse", |
| "doc": "milliseconds for one breath in and out; 0 is steady" |
| }, |
| { |
| "key": "depth", |
| "doc": "how deep the pulse goes, 0 to 1" |
| }, |
| { |
| "key": "flicker", |
| "doc": "random flicker, like a flame: 0 is steady, 1 is wild" |
| }, |
| { |
| "key": "seed", |
| "doc": "a different random flicker with the same look" |
| }, |
| { |
| "key": "texture", |
| "doc": "texture(grain scale 2): break the light up with a texture" |
| }, |
| { |
| "key": "essential", |
| "doc": "keep animating even when the visitor prefers reduced motion" |
| }, |
| { |
| "key": "unclipped", |
| "doc": "let the light spill out of a parent that clips (overflow: hidden, auto, scroll). Without it the aura is cut at that edge, like the element itself" |
| }, |
| { |
| "key": "around", |
| "doc": "the shape the light follows: follow (the default: the element's clip-path or rounded corners), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, alpha (an <img> or <canvas>'s visible pixels), or polygon(50% 0, 100% 50%, 50% 100%, 0 50%)" |
| }, |
| { |
| "key": "inner", |
| "doc": "light inside the edge (a rim) instead of outside it" |
| }, |
| { |
| "key": "rays", |
| "doc": "that many beams of light from the middle, slowly turning (see spin)" |
| }, |
| { |
| "key": "spin", |
| "doc": "rays turn this many degrees a second (default 10); on particles, how fast each one tumbles" |
| }, |
| { |
| "key": "ripple", |
| "doc": "rings that spread out from the shape and fade, one every this many milliseconds" |
| }, |
| { |
| "key": "nohalo", |
| "doc": "only the rays and ripples, without the soft halo" |
| }, |
| { |
| "key": "always", |
| "doc": "keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of" |
| }, |
| { |
| "key": "z", |
| "doc": "the z-index of the layer this light is drawn on: `z 5` puts it under a hill with z-index 10. It meets elements in the page's root stacking context" |
| } |
| ], |
| "particleKeys": [ |
| { |
| "key": "color", |
| "doc": "colours over a particle's life: color #ff0 -> #f60 -> transparent" |
| }, |
| { |
| "key": "count", |
| "doc": "how many particles are alive at once" |
| }, |
| { |
| "key": "size", |
| "doc": "diameter in px: size 4, or size 10 4 (start and end of a random range)" |
| }, |
| { |
| "key": "life", |
| "doc": "how long one lives, in ms: life 900, or life 600 1200" |
| }, |
| { |
| "key": "speed", |
| "doc": "px per second: speed 60, or speed 30 90" |
| }, |
| { |
| "key": "dir", |
| "doc": "where they head: up, down, left, right, out, in, or degrees (-90 is up)" |
| }, |
| { |
| "key": "spread", |
| "doc": "how wide the fan of directions is, in degrees" |
| }, |
| { |
| "key": "gravity", |
| "doc": "px/s squared; negative pulls up (flames), positive down (snow)" |
| }, |
| { |
| "key": "drag", |
| "doc": "air resistance: how fast particles slow down" |
| }, |
| { |
| "key": "turbulence", |
| "doc": "random sideways wobble, px/s" |
| }, |
| { |
| "key": "from", |
| "doc": "where they are born: edge or outline (along the element's real outline, see around), bottom, top, left, right, center, corners, thumb (range sliders)" |
| }, |
| { |
| "key": "shape", |
| "doc": "circle, spark, square, ring, star, flame, smoke, line, heart, diamond, triangle, plus, drop, bubble, snowflake, confetti or leaf" |
| }, |
| { |
| "key": "grow", |
| "doc": "size at the end of life as a multiple of the start: 0.2 shrinks, 3 swells" |
| }, |
| { |
| "key": "blend", |
| "doc": "add makes overlapping particles brighter, normal just stacks them" |
| }, |
| { |
| "key": "glowing", |
| "doc": "soft glowing particles that add light" |
| }, |
| { |
| "key": "behind", |
| "doc": "draw only outside the element's box, as if the element hid them" |
| }, |
| { |
| "key": "seed", |
| "doc": "a different random pattern with the same look" |
| }, |
| { |
| "key": "texture", |
| "doc": "texture(grain): grainy particles" |
| }, |
| { |
| "key": "essential", |
| "doc": "keep animating even when the visitor prefers reduced motion" |
| }, |
| { |
| "key": "unclipped", |
| "doc": "let the particles leave a parent that clips (overflow: hidden, auto, scroll). Without it they are cut at that edge" |
| }, |
| { |
| "key": "around", |
| "doc": "the shape `from edge` and `from outline` follow: follow (the default), box, round, pill, diamond, triangle, hexagon, octagon, pentagon, star, star4, star6, cross, heart, drop, bolt, or polygon(...)" |
| }, |
| { |
| "key": "palette", |
| "doc": "each particle takes ONE of the colours (confetti) instead of fading through them" |
| }, |
| { |
| "key": "spin", |
| "doc": "how fast each particle tumbles, in degrees a second (random direction)" |
| }, |
| { |
| "key": "wind", |
| "doc": "a sideways push, px/s squared; negative pushes left" |
| }, |
| { |
| "key": "orbit", |
| "doc": "the particles circle the middle of the element, this many degrees a second" |
| }, |
| { |
| "key": "always", |
| "doc": "keep emitting even when the element cannot be seen (opacity 0, display: none, visibility: hidden, on it or an ancestor): for an invisible anchor that smoke or sparks come out of" |
| }, |
| { |
| "key": "z", |
| "doc": "the z-index of the layer these particles are drawn on: `z 5` puts them under a hill with z-index 10. It meets elements in the page's root stacking context" |
| } |
| ], |
| "sliderClauses": [ |
| { |
| "key": "track", |
| "form": "track [height] [color] [radius <n>|full]" |
| }, |
| { |
| "key": "fill", |
| "form": "fill <color> | fill none" |
| }, |
| { |
| "key": "thumb", |
| "form": "thumb <size> [color]" |
| }, |
| { |
| "key": "shape", |
| "form": "shape circle | square | diamond | pill | bar" |
| }, |
| { |
| "key": "ring", |
| "form": "ring <width> <color>" |
| }, |
| { |
| "key": "glow", |
| "form": "glow <color> <radius>" |
| }, |
| { |
| "key": "ticks", |
| "form": "ticks <count> [color] [length]" |
| }, |
| { |
| "key": "graph", |
| "form": "graph <v1> <v2> ... (each 0 to 100)" |
| }, |
| { |
| "key": "graph-height", |
| "form": "graph-height <px>" |
| }, |
| { |
| "key": "graph-gap", |
| "form": "graph-gap <px>" |
| } |
| ], |
| "glassWords": [ |
| { |
| "key": "blur", |
| "doc": "a number: how many px to blur what is behind the element (default 16)" |
| }, |
| { |
| "key": "saturate", |
| "doc": "saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5)" |
| }, |
| { |
| "key": "bright", |
| "doc": "bright <n>: brightness of what shows through, 1 is unchanged" |
| }, |
| { |
| "key": "tint", |
| "doc": "tint <color> | tint none: the milky layer on top (default: a faint wash of the text colour)" |
| } |
| ], |
| "tiltWords": [ |
| { |
| "key": "max", |
| "doc": "a number: the largest tilt in degrees (default 8)" |
| }, |
| { |
| "key": "lift", |
| "doc": "lift <n>: scale while the pointer is over it, e.g. 1.04" |
| }, |
| { |
| "key": "perspective", |
| "doc": "perspective <px>: how strong the 3D depth looks (default 900)" |
| }, |
| { |
| "key": "speed", |
| "doc": "speed <0.05 to 1>: how quickly it follows (default 0.18)" |
| }, |
| { |
| "key": "invert", |
| "doc": "invert: tilt away from the pointer instead of toward it" |
| }, |
| { |
| "key": "glare", |
| "doc": "glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight" |
| } |
| ] |
| } |
|
|
