HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
AuraView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA drifting background of light, drawn in your theme's colors.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/aura'Preview
API ReferenceRoothelix-auraA drifting background of light, drawn in your theme's colors.
PropTypeDescriptionbloomnumberDefault0.5How soft the falloff is, 0 tight and 1 diffuse.driftnumberDefault0How far the settings wander on their own, 0 still and 1 restless.gainnumberDefault1Overall brightness, as a multiplier on the field.interaction"light"|"none"|"ripple"|"shadow"What the pointer does to the field. Set it to override the default for the
variant.interactivebooleanDefaultfalseWhether the pointer shifts and lifts the field.pauseControlbooleanDefaultfalseWhether the aura draws its own control that pauses the field and starts it
again, in its trailing corner. Absent draws none, for a page with a pause
control of its own.pausedbooleanDefaultfalseWhether the field holds still on the frame it shows.pauseLabelstringDefault"Pause the motion"The pause control's name, read by screen readers. The control is a toggle
and says it is pressed while the field is paused, so the name stays the
same.reachnumberDefault1How far the pointer reaches into the field, 0 upward.scalenumberDefault1Feature size, as a multiplier on the sampled coordinates.speednumberDefault1How fast it drifts, as a multiplier on time.terminusnumberWhere the axis crosses the top edge, as a fraction of the width.tiltnumberDefault14The field's rotation, in degrees.variancenumberDefault1How much the members of a population differ from one another, from 0,
where they are uniform, to 1, the default amount. Values are clamped to
that range, because they interpolate: a larger number would extrapolate,
and a streak whose length passed through zero would be drawn as a bar
across the whole frame.variant"aurora"|"braid"|"caustics"|"constellation"|"flow"|"fracture"|"lattice"|"particles"|"rays"|"streaks"|"threads"|"waves"The form the light takes. When it is not set, the form is braid.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Content drawn over the field, such as a heading.
EventTypeDescriptionchangeEventFired when the aura's own pause control pauses the field or starts it again.helix-aura-fallbackHelixAuraFallbackEventFired each time the aura stops drawing its shader and shows its gradient, with the reason.
PartDescriptioncanvasThe surface the shader draws into.contentThe box over the field that holds the content. It covers the aura.pauseThe control that pauses the field and starts it again, drawn under pause-control.pause-markThe glyph on the pause control: pause while the field moves, play while it is paused.
CSS PropertyDescription--aura-glowThe bright stop of the ramp. Defaults to --helix-color-primary.--aura-groundThe page the field fades into. Defaults to --helix-color-background.--aura-hazeThe faint stop between the ground and the glow. Defaults to --helix-color-primary-subtle.--aura-pause-background-colorThe pause control's ground. Defaults to --helix-color-surface-overlay.--aura-peakThe hottest stop, at the center of a shape. Defaults to --helix-color-primary-active on a light page and --helix-color-foreground on a dark one.
Custom stateDescriptionfallbackThe aura shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the shader draws again.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAuroraCurtains of light over a drifting horizon. It is the only variant drawn as a landscape.CausticsLight through moving water. The pointer makes ripples in it.ConstellationStars adrift, joined to their neighbors while they are near. The pointer gathers them.DriftEach setting changes on its own period, so the field has no cycle you can count.FlowLight that moves like ink in a thick liquid. The pointer leaves a wake that lasts after the pointer moves on.FractureRegions of the field, lit only along the seams where two of them meet.Gain And ScaleThe default braid wound tighter and brighter with scale, gain, bloom, and tilt.HeroA heading and a button over the field, which still follows the pointer across them, in colors set with the aura's own hooks.InteractionA field that ripples under the pointer, with reach setting how far the effect extends.LatticeA structure in perspective, lit at its joints.ParticlesPoints of light on their own orbits, pushed aside by the pointer.PreviewA braided shaft of light, sized to the box that holds it.RaysRays from a source above the frame, following the pointer.StreaksLight traveling in lanes, with trails that bend around the pointer.TerminusWhere the light leaves the top edge, which stays fixed however the box changes.ThreadsFive curves woven together to a pinch point that follows the pointer.WavesBroad, warped bands of light, with crests that the pointer drags.