CSS Variables

This page covers public CSS variables that are intentionally usable from your own CSS.

If a module only writes inline styles, classes, or DOM attributes, it does not belong here.

Important Boundary

Not every built-in module writes CSS variables.

Examples:

StringParallax writes inline transform
StringAnchor writes inline transform-origin
StringForm writes classes and error DOM
StringLoading, StringLazy, StringResponsive, StringScrollContainer, and StringScroller do not expose public CSS variable output

There is no public --parallax variable in the current runtime.

Scroll Progress And Motion

Variable	Written by	Value	Notes
`--progress`	`StringProgress` by default	eased `0..1` number	The actual variable name can be changed with `string-key`.
`--progress-slice`	`StringProgressPart`	remapped `0..1` number	Written directly on the slice element.
`--lerp`	`StringLerp`	scroll lerp delta	Written to the source element and mirrors.
`--glide`	`StringGlide`	normalized displacement value	Written to the source element and mirrors. The same module also writes inline `transform`.

Cursor Target Variables

These variables are written to elements marked with string="cursor".

Variable	Written by	Value	Notes
`--x`	`StringCursor`	local horizontal cursor position	Meaning depends on `string-alignment`.
`--y`	`StringCursor`	local vertical cursor position	Meaning depends on `string-alignment`.
`--x-px`	`StringCursor` when enabled	local pixel X	Only written if `string-cursor-vars` requests `xpx`.
`--y-px`	`StringCursor` when enabled	local pixel Y	Only written if `string-cursor-vars` requests `ypx`.
`--dx`	`StringCursor` when enabled	local X delta	Only written if `string-cursor-vars` requests `dx`.
`--dy`	`StringCursor` when enabled	local Y delta	Only written if `string-cursor-vars` requests `dy`.
`--angle`	`StringCursor` when enabled	movement angle in radians	Only written if `string-cursor-vars` requests `angle`.
`--angle-deg`	`StringCursor` when enabled	movement angle in degrees	Only written if `string-cursor-vars` requests `angle-deg`.

Cursor Portal Variables

These variables are written to floating portal elements marked with string-cursor="...".

Variable	Written by	Value	Notes
`--x`	`StringCursor`	viewport X position	Consume with pixel math such as `translate3d(calc(var(--x) * 1px), ...)`.
`--y`	`StringCursor`	viewport Y position	Consume with pixel math.
`--x-lerp`	`StringCursor`	portal follow velocity on X	Smoothed portal motion, not target-local motion.
`--y-lerp`	`StringCursor`	portal follow velocity on Y	Smoothed portal motion, not target-local motion.

Interaction Variables

Variable	Written by	Value	Notes
`--magnetic-x`	`StringMagnetic`	smoothed X offset	Written to the source element and mirrors.
`--magnetic-y`	`StringMagnetic`	smoothed Y offset	Written to the source element and mirrors.
`--push-x`	`StringImpulse`	translated X offset	Written to the source element and mirrors.
`--push-y`	`StringImpulse`	translated Y offset	Written to the source element and mirrors.
`--push-rotation`	`StringImpulse`	rotation in degrees	Written to the source element and mirrors.
`--spotlight-angle`	`StringSpotlight`	angle in degrees	Written to the source element and mirrors.
`--spotlight-distance`	`StringSpotlight`	pointer distance	Written to the source element and mirrors.

Text Split Variables

StringSplit writes variables to generated wrappers and sometimes to the source element itself.

Variable family	Written by	Surface
`--line-index`, `--word-total`	`StringSplit`	generated `.-s-line` wrappers
`--word-index`, `--char-total`	`StringSplit`	generated `.-s-word` wrappers
`--char-index`, `--kerning`	`StringSplit`	generated `.-s-char` wrappers
`--char-global-total`, `--word-global-total`, `--line-global-total`	`StringSplit`	source element
`--fit-font-size`, `--fit-scale-y`, `--fit-aspect-ratio`	`StringSplit` when `fit` is active	source element and fit-aware wrappers

Because StringSplit rebuilds DOM, those variables are tied to generated wrapper nodes, not only to the original source element.

Consumption Patterns

Typical usage looks like this:

CSS

.card {
  transform: translateY(calc(var(--glide, 0) * 32px));
}

.cursor-target {
  transform: translate(
    calc(var(--magnetic-x, 0) * 1px),
    calc(var(--magnetic-y, 0) * 1px)
  );
}

.progress-rotate {
  transform: rotate(calc(var(--progress, 0) * 1turn));
}

Where To Go Next

For event payloads paired with these variables, see Event Channels.
For routing and mirror-related input such as string-key and string-copy-from, see Common Attributes.
For full per-module output contracts, use the relevant module pages in Built-in Modules.