HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.
PropTypeDefaultDescriptionatnumberWhere the form sits across the box, as a share of the width: the fan's
bend 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 fan bends at 0.4
and a ribbon runs down the middle.densitynumber0.8How many strands the ribbon has, from 0, sixty, to 1, three hundred and
forty. Clamped to that range.gainnumber1Overall brightness, as a multiplier on the light.softnessnumber0.55The 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 fan's bend or a wave, stays sharp whatever this says.speednumber1How fast the ribbon moves, as a multiplier on time. 0 holds it still.spreadnumber1How wide the ribbon is, as a multiplier on each form's own width.travelbooleanfalseWhether the ribbon is laid down the whole page, so scrolling travels along
it.variant"fan"|"ribbon"|"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-info.
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.
PropTypeDefaultDescriptionatnumberWhere the form sits across the page, as a share of the width: the fan's
bend or the ribbon's axis. A wave crosses the whole width and does not
read it. Unset, a fan bends at 0.4 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"fan"|"ribbon"|"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.
ExamplesNameDescriptionAtA fan bending 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.PreviewA soft ribbon of strands, sized to the box that holds it.TravelOne ribbon down the whole page: a fan through the opening section, soft ribbon after it, and a wave above the last section.VariantsThe three forms: a bright fan, a soft ribbon, and sharp waves.