HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
StrandsView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page.ExperimentalSince 0.147.0MediaUsageimport'@fusion.dev/helix/strands'Preview
API ReferenceRoothelix-strandsA ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page.
PropTypeDescriptionatnumberWhere the form sits across the box, as a share of the width: the bend's
apex or the ribbon's axis. 0 is the left edge and 1 the right. A wave
crosses the whole width and does not read it. Unset, a bend's apex sits at 0.5
and a ribbon runs down the middle.bloomnumberDefault1How much the glow around the strands adds, as a multiplier. 0 draws the
strands alone, crisp and dimmer, and 1 is the default glow.contrastnumberDefault1How far apart the brightest and dimmest strands are, from 0, most of
them alike, to 1, a few burning bright over many faint ones. Clamped to
that range. The ribbon as a whole keeps its strength.densitynumberDefault0.8How many strands the ribbon has, from 0, sixty, to 1, three hundred and
forty. Clamped to that range.depthnumberDefault1How much the ribbon's depth shows, from 0, flat, to 1. Clamped to that
range. The strands at the front of the ribbon's roll are drawn thicker,
brighter, and further from its axis, and those at the back thinner, dimmer,
and out of focus.driftnumberDefault1How differently the strands move across the ribbon, from 0, the whole
ribbon rolling and waving as one, to 1, its edges flowing at their own
pace past its middle. Neighbors always move together, so no strand leaves
its lane. Clamped to that range.dustnumberDefault1How many specks of dust drift around the strands, as a multiplier: 0
draws none, 1 six hundred, and 4, the most, two thousand four
hundred. They gather where the ribbon is brightest.gainnumberDefault1Overall brightness, as a multiplier on the light.quietstringThe ids of elements the light dims behind, separated by spaces, such as
a hero's words. Inside each, the ribbon keeps a faint glow, so words over
it stay crisp and nothing busy runs under them, and it eases back to full
a short way past each edge. Up to four; ids that name nothing are skipped.softnessnumberDefault0The share of strands drawn out of focus where the ribbon is wide, from 0,
every strand sharp, to 1, every one soft. Clamped to that range. A tight
form, such as a bend's apex or a wave, stays sharp whatever this says.speednumberDefault1How fast the ribbon moves, as a multiplier on time. 0 holds it still.spreadnumberDefault1How wide the ribbon is, as a multiplier on each form's own width.travelbooleanDefaultfalseWhether the ribbon is laid down the whole page, so scrolling travels along
it.variant"bend"|"ribbon"|"sweep"|"waves"The form the ribbon takes. When it is not set, the form is ribbon. In
travel, the form of every stretch no stop claims.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Content drawn over the ribbon, such as a heading, and the helix-strands-stop elements that pin its forms in travel.
EventTypeDescriptionhelix-strands-fallbackHelixStrandsFallbackEventFired each time the element stops drawing its ribbon and shows its gradient, with the reason.
PartDescriptioncanvasThe surface the ribbon draws into.contentThe box over the ribbon that holds the content. It covers the element.
CSS PropertyDescription--strands-glowThe color of most strands. Defaults to --helix-color-primary.--strands-groundThe page the light is added to. Defaults to --helix-color-background.--strands-peakThe hottest strands, and on a light page the ink the light darkens toward. Defaults to --helix-color-primary-hover on a dark page and --helix-color-primary-active on a light one.--strands-tintThe color of a few strands, for depth. Defaults to --helix-color-accent, which is the primary itself unless the theme relates an accent to the brand, as accent: { from: 'brand', rotate: 40 } does.
Custom stateDescriptionfallbackThe element shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the ribbon draws again.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Stophelix-strands-stopPins a form of the ribbon to a section of the page.
PropTypeDescriptionatnumberWhere the form sits across the page, as a share of the width: the bend's
apex or the ribbon's axis. A wave crosses the whole width and does not
read it. Unset, a bend's apex sits at 0.5 and a ribbon runs down the middle.forstringThe id of the element the form is pinned to, in the same tree as the stop.variant"bend"|"ribbon"|"sweep"|"waves"The form the ribbon takes at the element. When it is not set, the form is ribbon.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAtA bend turning at a quarter of the width, and another at three quarters.ColorsStrands drawn in the success color, with the info color for depth, set with the color hooks.Density And SoftnessA sparse, sharp ribbon beside a dense, soft one.Depth And MotionA flat ribbon that moves as one beside the default, deep one, whose strands each move their own way.PreviewA soft ribbon of strands, sized to the box that holds it.TravelOne ribbon down the whole page: a bend through the opening section, soft ribbon after it, and a wave above the last section.VariantsThe three forms: a bright bend, a soft ribbon, and sharp waves.