data-* attributes

All attributes

data-body frozen · attribute contract tokens

Space-separated force ids — required to make an element a body. Forces compose.

data-strength number · default 0.5

Force magnitude S.

data-range px · default 280

Influence radius d_max.

data-spin number · default 1

Sign/strength of rotation — swirl, charge, magnetism, lens.

data-angle deg · default 0

Heading — stream, jet, gate, shear, align.

data-color hex

Accent override on engage, and the carried color for pigment.

data-when condition · default ''

Gate the force on a condition: active, fast, slow, hot, cool, scrolling.

data-feedback flag

Opt into two-way density write-back (the --d custom property).

data-shaped flag

Shaped source — forces reference the nearest point on the element box, so matter shells the shape instead of bunching at its centre.

data-affects species

Matter tagging — a comma-separated species set this body acts on (e.g. "1" or "1,2"). Matter whose species is outside the set is skipped entirely (no force, no density sample). Omit to act on all matter (the default). Lets pollen / seeds / spores share one field, each pulled only by its own bodies.

data-species number

The species tag a spawn source stamps on the matter it emits, so a downstream data-affects body can act on it selectively. Particles default to species 0.

data-absorb px · default 64

Capture radius for the sink force.

data-max number · default 60

Load at which a sink supernovas (releases).

data-life frames · default 90 (spawn)

Source budget: how long each particle a spawn source emits lives. An unbudgeted source gets the safe default 300 (and a dev warning).

data-cap number

Source budget: the most live particles a spawn source sustains — the emission rate is clamped to cap/life. The unbudgeted-source safe default is 120.

data-screen-min number · default 0

Floor of the screen modifier’s attenuation factor (0 = other forces may cancel fully at the screen’s core).

data-fmin / data-fmax number

Variable-font weight range that --d drives on a feedback body.

data-opsz number

Optical-size axis to drive alongside weight.

data-active "1"

Engagement state — set automatically on hover/focus of a [data-hot] element.

data-preset name

Expand a preset into several co-located bodies — blackhole, galaxy, tornado, …

Which force reads which

Beyond the universal data-body / data-when / data-feedback, each force reads this subset (declared in the catalog):

attract

data-strengthdata-range

repel

data-strengthdata-range

swirl

data-strengthdata-rangedata-spin

stream

data-strengthdata-rangedata-angle

viscosity

data-strengthdata-range

jet

data-strengthdata-rangedata-angle

tether

data-strengthdata-range

wall

box-sized — no params

sink

data-absorbdata-max

gravity

data-strengthdata-range

charge

data-strengthdata-rangedata-spin

magnetism

data-strengthdata-rangedata-spin

thermal

data-strengthdata-range

collide

data-strengthdata-range

diffuse

data-strengthdata-range

propagate

data-strengthdata-range

memory

data-strengthdata-range

lens

data-strengthdata-rangedata-spin

gate

data-angle

buoyancy

data-strengthdata-range

shear

data-strengthdata-rangedata-angle

crystallize

data-strengthdata-range

align

data-strengthdata-rangedata-angle

wind

data-strengthdata-range

cohesion

data-strengthdata-range

pressure

data-strengthdata-range

hunt

data-strengthdata-range

spawn

data-strengthdata-angle

link

data-strengthdata-range

morph

data-strengthdata-target

resonate

data-strengthdata-spin

spotlight

data-angle

screen

data-strengthdata-rangedata-screen-min

pigment

data-rangedata-color

fieldflow

data-strengthdata-range

warp

data-absorbdata-pair

What the field writes back

Reciprocity has two halves: bodies bend the field through data-*, and the field bends them back through CSS custom properties. A body that opts in (data-feedback) receives these on its element — read them in your own CSS to make type glow, cards lift, or a meter fill. The write target is the element itself, or a body's writeTarget.