Aura

Module — import actual-css/css/effects/aura or actual-css/css/effects.

Aura adds a decorative intent-colored border and halo around one direct child. It is visual emphasis only and does not change the child's semantics.

.aura sends a short accent of light travelling around the frame, over a permanent halo that keeps the object present between two passes. Add .aura-glow to light the whole perimeter evenly instead, as a halo that breathes slowly.

Aura reads best when it has enough perimeter to travel around, and is naturally more pronounced on dark surfaces. It still composes on small shapes:

Note the intent on the wrapper, not on the child: .aura is an intent boundary, so the badge or alert inside keeps its own color and the frame keeps the one you gave the wrapper. Matching them reads as one object; deliberately mismatching them reads as two.

Motion changes how the light lives, never whether the effect is there: when the user has requested reduced motion, the travelling accent becomes two opposite lit corners — a deliberate composition rather than a rotation frozen at an arbitrary angle — and the glow stays a full, still halo.

The frame color comes from an intent such as .primary, .success, or .danger; there are no separate aura color variants. The intent is sovereign: a neutral intent produces a neutral aura. Use a chromatic intent when you want a visibly luminous effect.

Two hooks tune how loud the effect is. --aura-intensity scales both halos at once, resting and breathing alike, so the breath stays proportional at every setting; --aura-duration sets one full rotation of the accent, or one breath of the glow.

Keep exactly one direct child and set --aura-radius when its shape differs from the common button, card, alert, and badge shapes detected as a visual enhancement.

The child must be opaque. The frame paints across the whole box and relies on the child to cover all but its edge, so a transparent child — an .outline alert, a .ghost button — is filled edge to edge with the frame color instead of framed by it. Give such a child a surface, or move the aura to an opaque wrapper around it.

CSS hooks

• --aura-color — frame and halo color; follows the local intent.
• --aura-width — frame thickness.
• --aura-blur — near halo blur; the far halo derives its own blur and its spread beyond the frame from this value, so one hook scales both.
• --aura-intensity — multiplies both halo opacities, resting and breathing. It does not touch the frame itself, which stays a crisp line at any setting.
• --aura-radius — child corner radius used to derive the outer radius.
• --aura-duration — one rotation of the accent, or one breath of the glow.