children (1–N), each with its
OWN tokens inline; auto-hides the default pseudo bloom
grain (child) add
, then set the
--aura-grain token (opacity, e.g. point-one-five)
intensity (attr) data-aura-intensity="soft | bold"
motion (attr) data-aura-motion="calm | alive | still"
Place it exactly, inline:
style="--aura-w: 140%; --aura-h: 38%; --aura-x: 50%; --aura-y: -8%"
(a wide band hugging the top edge, half bled off the top)
=========================================================================== */
/* ---- tokens (component-local knobs, registered globally) --------------- */
:root {
--aura-color: var(--accent); /* @kind color */
--aura-w: 86%; /* bloom width @kind spacing */
--aura-h: 58%; /* bloom height @kind spacing */
--aura-x: 50%; /* center X in layer @kind spacing */
--aura-y: 100%; /* center Y in layer @kind spacing */
--aura-w2: 60%; /* duet blob width @kind spacing */
--aura-h2: 46%; /* duet blob height @kind spacing */
--aura-x2: 90%; /* duet center X @kind spacing */
--aura-y2: 4%; /* duet center Y @kind spacing */
--aura-strength: 0.85; /* @kind other */
--aura-blur: 44px; /* @kind spacing */
--aura-dur: 16s; /* @kind other */
--aura-vibrancy: 165%; /* @kind other */
--aura-grain: 0; /* @kind other */
}
.aura {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.aura::before,
.aura--duet::after {
content: "";
position: absolute;
background: radial-gradient(50% 50% at 50% 50%,
var(--aura-color) 0%,
color-mix(in srgb, var(--aura-color), transparent 10%) 34%,
color-mix(in srgb, var(--aura-color), transparent 52%) 58%,
transparent 78%);
filter: blur(var(--aura-blur)) saturate(var(--aura-vibrancy));
opacity: var(--aura-strength);
will-change: transform;
}
/* main bloom — centered on (--aura-x, --aura-y) via the `translate` property;
`transform` is left free for the drift/scale animation so the two compose. */
.aura::before {
width: var(--aura-w);
height: var(--aura-h);
left: var(--aura-x);
top: var(--aura-y);
translate: -50% -50%;
animation: aura-drift-x var(--aura-dur) ease-in-out infinite alternate;
}
/* second blob (mesh) */
.aura--duet::after {
width: var(--aura-w2);
height: var(--aura-h2);
left: var(--aura-x2);
top: var(--aura-y2);
translate: -50% -50%;
opacity: calc(var(--aura-strength) * 0.6);
animation: aura-breathe calc(var(--aura-dur) * 1.35) ease-in-out infinite alternate;
}
/* ---- explicit blobs (multi-element mode) ------------------------------
For 1–N fully independent blooms, drop
children and
give each its OWN tokens inline (color, geometry, blur, strength, vibrancy).
Adding any explicit blob auto-suppresses the default pseudo bloom (:has). */
.aura:has(.aura__blob)::before,
.aura:has(.aura__blob)::after { content: none; }
.aura__blob {
position: absolute;
width: var(--aura-w);
height: var(--aura-h);
left: var(--aura-x);
top: var(--aura-y);
translate: -50% -50%;
background: radial-gradient(50% 50% at 50% 50%,
var(--aura-color) 0%,
color-mix(in srgb, var(--aura-color), transparent 10%) 34%,
color-mix(in srgb, var(--aura-color), transparent 52%) 58%,
transparent 78%);
filter: blur(var(--aura-blur)) saturate(var(--aura-vibrancy));
opacity: var(--aura-strength);
will-change: transform;
animation: aura-drift-x var(--aura-dur) ease-in-out infinite alternate;
}
.aura__blob:nth-of-type(2) { animation-name: aura-breathe; }
.aura__blob:nth-of-type(3) { animation-name: aura-drift-x; animation-direction: alternate-reverse; }
.aura[data-aura-motion="still"] .aura__blob { animation: none; }
/* ---- grain / noise overlay -------------------------------------------
A fine film of monochrome noise laid OVER the bloom (z above both blobs).
Add the child and dial --aura-grain. */
.aura__grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: var(--aura-grain);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* ---- position presets (data-attribute scopes) -------------------------
Each just sets the center point; the bloom's own size decides how much
bleeds past the edge. Override --aura-x / --aura-y inline for anything else. */
[data-aura-pos="bottom"] { --aura-x: 50%; --aura-y: 100%; }
[data-aura-pos="top"] { --aura-x: 50%; --aura-y: 0%; }
[data-aura-pos="center"] { --aura-x: 50%; --aura-y: 50%; }
[data-aura-pos="left"] { --aura-x: 0%; --aura-y: 50%; }
[data-aura-pos="right"] { --aura-x: 100%; --aura-y: 50%; }
[data-aura-pos="top-left"] { --aura-x: 0%; --aura-y: 0%; }
[data-aura-pos="top-right"] { --aura-x: 100%; --aura-y: 0%; }
[data-aura-pos="bottom-left"] { --aura-x: 0%; --aura-y: 100%; }
[data-aura-pos="bottom-right"] { --aura-x: 100%; --aura-y: 100%; }
/* ---- shape presets (data-attribute scopes) ---------------------------- */
[data-aura-shape="band"] { --aura-w: 130%; --aura-h: 42%; } /* wide & short */
[data-aura-shape="column"] { --aura-w: 46%; --aura-h: 120%; } /* tall & narrow */
[data-aura-shape="circle"] { --aura-w: 70%; --aura-h: 70%; } /* equal */
[data-aura-shape="tight"] { --aura-w: 50%; --aura-h: 40%; --aura-w2: 38%; --aura-h2: 32%; }
[data-aura-shape="wide"] { --aura-w: 124%; --aura-h: 60%; --aura-w2: 80%; --aura-h2: 50%; --aura-blur: 60px; }
[data-aura-shape="full"] { --aura-w: 170%; --aura-h: 150%; --aura-w2: 130%; --aura-h2: 120%; --aura-blur: 80px; }
/* ---- intensity (data-attribute scopes) -------------------------------- */
[data-aura-intensity="soft"] { --aura-strength: 0.5; /* @kind other */ --aura-blur: 56px; }
[data-aura-intensity="bold"] { --aura-strength: 1; /* @kind other */ --aura-blur: 36px; }
/* ---- motion (data-attribute scopes) ----------------------------------- */
[data-aura-motion="calm"] { --aura-dur: 26s; /* @kind other */ }
[data-aura-motion="alive"] { --aura-dur: 9s; /* @kind other */ }
[data-aura-motion="still"]::before,
[data-aura-motion="still"]::after { animation: none; }
@keyframes aura-drift-x {
from { transform: translateX(-7%) scale(0.96); }
to { transform: translateX(7%) scale(1.06); }
}
@keyframes aura-breathe {
from { transform: scale(0.93); }
to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.aura::before, .aura--duet::after { animation: none; }
}