The GrimoireThe glows, shadows, backdrops and classes the tokens emit

The Sanctuary — every door

You are in The Realms.

Every realm is named here, and its rooms fold open beneath it. The mark beside a name says which ground you have already walked.

Every door stays where you left it. Esc folds the map.

The Grimoire

Effects Grimoire

194 spells. The glows, shadows, backdrops, holographic layers, domain registers and the mood and energy text runs are read from the cosmic tokens. The other 48 — the animation classes and the named text classes — are written out in this file to match the stylesheets the generator emits.

The still material is at the Colours. The moving stylesheets perform at the Theater.

Glows

shadow-glow-quantum

<div className="shadow-glow-quantum">Content</div>
Glows

shadow-glow-cosmic

<div className="shadow-glow-cosmic">Content</div>
Glows

shadow-glow-fire

<div className="shadow-glow-fire">Content</div>
Glows

shadow-glow-neurospark

<div className="shadow-glow-neurospark">Content</div>
Glows

shadow-glow-quantum-domain

<div className="shadow-glow-quantum-domain">Content</div>
Glows

shadow-glow-cosmic-domain

<div className="shadow-glow-cosmic-domain">Content</div>
Glows

shadow-glow-pantheon-domain

<div className="shadow-glow-pantheon-domain">Content</div>
Glows

shadow-glow-bifrost-domain

<div className="shadow-glow-bifrost-domain">Content</div>
Glows

shadow-glow-library-domain

<div className="shadow-glow-library-domain">Content</div>
Glows

shadow-glow-void-domain

<div className="shadow-glow-void-domain">Content</div>
Glows

shadow-glow-aethelred

<div className="shadow-glow-aethelred">Content</div>
Glows

shadow-glow-archivist

<div className="shadow-glow-archivist">Content</div>
Glows

shadow-glow-seer

<div className="shadow-glow-seer">Content</div>
Glows

shadow-glow-hearth-keeper

<div className="shadow-glow-hearth-keeper">Content</div>
Glows

shadow-glow-hover

<div className="shadow-glow-hover">Content</div>
Glows

shadow-glow-focus

<div className="shadow-glow-focus">Content</div>
Glows

shadow-glow-active

<div className="shadow-glow-active">Content</div>
Glows

shadow-glow-emergency

<div className="shadow-glow-emergency">Content</div>
Glows

shadow-glow-success

<div className="shadow-glow-success">Content</div>
Glows

shadow-glow-warning

<div className="shadow-glow-warning">Content</div>
Glows

shadow-glow-pride

<div className="shadow-glow-pride">Content</div>
Glows

shadow-glow-trans

<div className="shadow-glow-trans">Content</div>
Shadows

shadow-sm

<div className="shadow-sm">Content</div>
Shadows

shadow-md

<div className="shadow-md">Content</div>
Shadows

shadow-lg

<div className="shadow-lg">Content</div>
Shadows

shadow-xl

<div className="shadow-xl">Content</div>
Shadows

shadow-2xl

<div className="shadow-2xl">Content</div>
Shadows

shadow-hover

<div className="shadow-hover">Content</div>
Shadows

shadow-focus

<div className="shadow-focus">Content</div>
Shadows

shadow-active

<div className="shadow-active">Content</div>
Shadows

shadow-inner

<div className="shadow-inner">Content</div>
Shadows

shadow-inner-lg

<div className="shadow-inner-lg">Content</div>
Shadows

shadow-quantum

<div className="shadow-quantum">Content</div>
Shadows

shadow-cosmic

<div className="shadow-cosmic">Content</div>
Shadows

shadow-neurospark

<div className="shadow-neurospark">Content</div>
Backdrops

BACKDROP_EFFECTS['glass']

backdrop-filter: blur(16px); background: #1A1F3580
Backdrops

BACKDROP_EFFECTS['glass-heavy']

backdrop-filter: blur(32px); background: #1A1F3590
Backdrops

BACKDROP_EFFECTS['quantum']

backdrop-filter: blur(20px); background: linear-gradient(135deg, #6C5CE7 0%, #5B4CCE 100%)
Backdrops

BACKDROP_EFFECTS['cosmic']

backdrop-filter: blur(20px); background: linear-gradient(135deg, #0C0F1D 0%, #6C5CE7 100%)
Backdrops

BACKDROP_EFFECTS['holographic']

backdrop-filter: blur(24px); background: linear-gradient(135deg, rgba(34, 211, 238, 0.1) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(59, 130, 246, 0.1) 100%)
Backdrops

BACKDROP_EFFECTS['vignette']

Wears a pseudo-element; copy the declarations
position: relative; &::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, #0C0F1D80 100%); pointer-events: none; }
Backdrops

BACKDROP_EFFECTS['vignette-strong']

Wears a pseudo-element; copy the declarations
position: relative; &::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 10%, #0C0F1D95 100%); pointer-events: none; }
Holographic

HOLOGRAPHIC_EFFECTS['scan']

background: linear-gradient(to bottom, transparent 50%, #22D3EE10 50%, #22D3EE10 51%, transparent 51%); background-size: 100% 4px;
Holographic

HOLOGRAPHIC_EFFECTS['scanLines']

background: repeating-linear-gradient(0deg, transparent, transparent 2px, #22D3EE05 2px, #22D3EE05 4px);
Holographic

HOLOGRAPHIC_EFFECTS['glitch']

background: linear-gradient(45deg, #22D3EE10, #6C5CE710, #0984E310);
Holographic

HOLOGRAPHIC_EFFECTS['cornerAccent']

border: 1px solid #22D3EE; box-shadow: 0 0 10px #22D3EE50;
Holographic

HOLOGRAPHIC_EFFECTS['particles']

background: radial-gradient(2px 2px at 20px 30px, #22D3EE30, transparent); background-size: 40px 40px;
Holographic

HOLOGRAPHIC_EFFECTS['rainbow']

background: linear-gradient(45deg, #22D3EE10, #6C5CE710, #0984E310, #00B89410, #FDCB6E10);
Text

rainbow-text

The Sanctuary
<span className="rainbow-text">Text</span>
Text

quantum-weaver-text

The Sanctuary
<span className="quantum-weaver-text">Text</span>
Text

quantum-entanglement-text

The Sanctuary
<span className="quantum-entanglement-text">Text</span>
Text

quantum-resonance-text

The Sanctuary
<span className="quantum-resonance-text">Text</span>
Text

fire-text

The Sanctuary
<span className="fire-text">Text</span>
Text

water-text

The Sanctuary
<span className="water-text">Text</span>
Text

air-text

The Sanctuary
<span className="air-text">Text</span>
Text

earth-text

The Sanctuary
<span className="earth-text">Text</span>
Text

sparkle-text

The Sanctuary
<span className="sparkle-text">Text</span>
Text

stardust-text

The Sanctuary
<span className="stardust-text">Text</span>
Text

glitter-text

The Sanctuary
<span className="glitter-text">Text</span>
Text

cosmic-sparkle-text

The Sanctuary
<span className="cosmic-sparkle-text">Text</span>
Text

pagan-text

The Sanctuary
<span className="pagan-text">Text</span>
Text

pride-rainbow-text

The Sanctuary
<span className="pride-rainbow-text">Text</span>
Text

pride-trans-text

The Sanctuary
<span className="pride-trans-text">Text</span>
Text

quantum-pride-text

The Sanctuary
<span className="quantum-pride-text">Text</span>
Text

mood-calm-text

The Sanctuary
<span className="mood-calm-text">Text</span>
Text

mood-focused-text

The Sanctuary
<span className="mood-focused-text">Text</span>
Text

mood-creative-text

The Sanctuary
<span className="mood-creative-text">Text</span>
Text

mood-energized-text

The Sanctuary
<span className="mood-energized-text">Text</span>
Text

mood-peaceful-text

The Sanctuary
<span className="mood-peaceful-text">Text</span>
Text

mood-intense-text

The Sanctuary
<span className="mood-intense-text">Text</span>
Text

mood-mystical-text

The Sanctuary
<span className="mood-mystical-text">Text</span>
Text

mood-grounded-text

The Sanctuary
<span className="mood-grounded-text">Text</span>
Text

energy-low-text

The Sanctuary
<span className="energy-low-text">Text</span>
Text

energy-medium-text

The Sanctuary
<span className="energy-medium-text">Text</span>
Text

energy-high-text

The Sanctuary
<span className="energy-high-text">Text</span>
Text

energy-quantum-text

The Sanctuary
<span className="energy-quantum-text">Text</span>
Text

energy-cosmic-text

The Sanctuary
<span className="energy-cosmic-text">Text</span>
Text

energy-transformative-text

The Sanctuary
<span className="energy-transformative-text">Text</span>
Domains

domain-quantum

sample
<div className="domain-quantum">Content</div>
Domains

domain-quantum-text

The Sanctuary
<div className="domain-quantum-text">Content</div>
Domains

domain-quantum-glow

sample
<div className="domain-quantum-glow">Content</div>
Domains

domain-quantum-gradient

sample
<div className="domain-quantum-gradient">Content</div>
Domains

domain-quantum-card

sample
<div className="domain-quantum-card">Content</div>
Domains

domain-quantum-badge

sample
<div className="domain-quantum-badge">Content</div>
Domains

domain-quantum-btn

sample
<div className="domain-quantum-btn">Content</div>
Domains

domain-cosmic

sample
<div className="domain-cosmic">Content</div>
Domains

domain-cosmic-text

The Sanctuary
<div className="domain-cosmic-text">Content</div>
Domains

domain-cosmic-glow

sample
<div className="domain-cosmic-glow">Content</div>
Domains

domain-cosmic-gradient

sample
<div className="domain-cosmic-gradient">Content</div>
Domains

domain-cosmic-card

sample
<div className="domain-cosmic-card">Content</div>
Domains

domain-cosmic-badge

sample
<div className="domain-cosmic-badge">Content</div>
Domains

domain-cosmic-btn

sample
<div className="domain-cosmic-btn">Content</div>
Domains

domain-pantheon

sample
<div className="domain-pantheon">Content</div>
Domains

domain-pantheon-text

The Sanctuary
<div className="domain-pantheon-text">Content</div>
Domains

domain-pantheon-glow

sample
<div className="domain-pantheon-glow">Content</div>
Domains

domain-pantheon-gradient

sample
<div className="domain-pantheon-gradient">Content</div>
Domains

domain-pantheon-card

sample
<div className="domain-pantheon-card">Content</div>
Domains

domain-pantheon-badge

sample
<div className="domain-pantheon-badge">Content</div>
Domains

domain-pantheon-btn

sample
<div className="domain-pantheon-btn">Content</div>
Domains

domain-bifrost

sample
<div className="domain-bifrost">Content</div>
Domains

domain-bifrost-text

The Sanctuary
<div className="domain-bifrost-text">Content</div>
Domains

domain-bifrost-glow

sample
<div className="domain-bifrost-glow">Content</div>
Domains

domain-bifrost-gradient

sample
<div className="domain-bifrost-gradient">Content</div>
Domains

domain-bifrost-card

sample
<div className="domain-bifrost-card">Content</div>
Domains

domain-bifrost-badge

sample
<div className="domain-bifrost-badge">Content</div>
Domains

domain-bifrost-btn

sample
<div className="domain-bifrost-btn">Content</div>
Domains

domain-library

sample
<div className="domain-library">Content</div>
Domains

domain-library-text

The Sanctuary
<div className="domain-library-text">Content</div>
Domains

domain-library-glow

sample
<div className="domain-library-glow">Content</div>
Domains

domain-library-gradient

sample
<div className="domain-library-gradient">Content</div>
Domains

domain-library-card

sample
<div className="domain-library-card">Content</div>
Domains

domain-library-badge

sample
<div className="domain-library-badge">Content</div>
Domains

domain-library-btn

sample
<div className="domain-library-btn">Content</div>
Domains

domain-void

sample
<div className="domain-void">Content</div>
Domains

domain-void-text

The Sanctuary
<div className="domain-void-text">Content</div>
Domains

domain-void-glow

sample
<div className="domain-void-glow">Content</div>
Domains

domain-void-gradient

sample
<div className="domain-void-gradient">Content</div>
Domains

domain-void-card

sample
<div className="domain-void-card">Content</div>
Domains

domain-void-badge

sample
<div className="domain-void-badge">Content</div>
Domains

domain-void-btn

sample
<div className="domain-void-btn">Content</div>
Domains

domain-council

sample
<div className="domain-council">Content</div>
Domains

domain-council-text

The Sanctuary
<div className="domain-council-text">Content</div>
Domains

domain-council-glow

sample
<div className="domain-council-glow">Content</div>
Domains

domain-council-gradient

sample
<div className="domain-council-gradient">Content</div>
Domains

domain-council-card

sample
<div className="domain-council-card">Content</div>
Domains

domain-council-badge

sample
<div className="domain-council-badge">Content</div>
Domains

domain-council-btn

sample
<div className="domain-council-btn">Content</div>
Domains

domain-sandbox

sample
<div className="domain-sandbox">Content</div>
Domains

domain-sandbox-text

The Sanctuary
<div className="domain-sandbox-text">Content</div>
Domains

domain-sandbox-glow

sample
<div className="domain-sandbox-glow">Content</div>
Domains

domain-sandbox-gradient

sample
<div className="domain-sandbox-gradient">Content</div>
Domains

domain-sandbox-card

sample
<div className="domain-sandbox-card">Content</div>
Domains

domain-sandbox-badge

sample
<div className="domain-sandbox-badge">Content</div>
Domains

domain-sandbox-btn

sample
<div className="domain-sandbox-btn">Content</div>
Domains

domain-music

sample
<div className="domain-music">Content</div>
Domains

domain-music-text

The Sanctuary
<div className="domain-music-text">Content</div>
Domains

domain-music-glow

sample
<div className="domain-music-glow">Content</div>
Domains

domain-music-gradient

sample
<div className="domain-music-gradient">Content</div>
Domains

domain-music-card

sample
<div className="domain-music-card">Content</div>
Domains

domain-music-badge

sample
<div className="domain-music-badge">Content</div>
Domains

domain-music-btn

sample
<div className="domain-music-btn">Content</div>
Domains

domain-community

sample
<div className="domain-community">Content</div>
Domains

domain-community-text

The Sanctuary
<div className="domain-community-text">Content</div>
Domains

domain-community-glow

sample
<div className="domain-community-glow">Content</div>
Domains

domain-community-gradient

sample
<div className="domain-community-gradient">Content</div>
Domains

domain-community-card

sample
<div className="domain-community-card">Content</div>
Domains

domain-community-badge

sample
<div className="domain-community-badge">Content</div>
Domains

domain-community-btn

sample
<div className="domain-community-btn">Content</div>
Domains

domain-support

sample
<div className="domain-support">Content</div>
Domains

domain-support-text

The Sanctuary
<div className="domain-support-text">Content</div>
Domains

domain-support-glow

sample
<div className="domain-support-glow">Content</div>
Domains

domain-support-gradient

sample
<div className="domain-support-gradient">Content</div>
Domains

domain-support-card

sample
<div className="domain-support-card">Content</div>
Domains

domain-support-badge

sample
<div className="domain-support-badge">Content</div>
Domains

domain-support-btn

sample
<div className="domain-support-btn">Content</div>
Domains

domain-architecture

sample
<div className="domain-architecture">Content</div>
Domains

domain-architecture-text

The Sanctuary
<div className="domain-architecture-text">Content</div>
Domains

domain-architecture-glow

sample
<div className="domain-architecture-glow">Content</div>
Domains

domain-architecture-gradient

sample
<div className="domain-architecture-gradient">Content</div>
Domains

domain-architecture-card

sample
<div className="domain-architecture-card">Content</div>
Domains

domain-architecture-badge

sample
<div className="domain-architecture-badge">Content</div>
Domains

domain-architecture-btn

sample
<div className="domain-architecture-btn">Content</div>
Animations

continuity-beam-low

sample
<div className="continuity-beam-low">Content</div>
Animations

continuity-beam-medium

sample
<div className="continuity-beam-medium">Content</div>
Animations

continuity-beam-high

sample
<div className="continuity-beam-high">Content</div>
Animations

continuity-beam-quantum

sample
<div className="continuity-beam-quantum">Content</div>
Animations

animation-simple

sample
<div className="animation-simple">Content</div>
Animations

animation-medium

sample
<div className="animation-medium">Content</div>
Animations

animation-complex

sample
<div className="animation-complex">Content</div>
Animations

float-slow

sample
<div className="float-slow">Content</div>
Animations

float-normal

sample
<div className="float-normal">Content</div>
Animations

float-fast

sample
<div className="float-fast">Content</div>
Animations

pulse-slow

sample
<div className="pulse-slow">Content</div>
Animations

pulse-normal

sample
<div className="pulse-normal">Content</div>
Animations

pulse-fast

sample
<div className="pulse-fast">Content</div>
Animations

glow-subtle

sample
<div className="glow-subtle">Content</div>
Animations

glow-normal

sample
<div className="glow-normal">Content</div>
Animations

glow-intense

sample
<div className="glow-intense">Content</div>
Animations

consciousness-dormant

sample
<div className="consciousness-dormant">Content</div>
Animations

consciousness-emergent

sample
<div className="consciousness-emergent">Content</div>
Animations

consciousness-awakening

sample
<div className="consciousness-awakening">Content</div>
Animations

consciousness-sovereign

sample
<div className="consciousness-sovereign">Content</div>
Animations

consciousness-quantum

sample
<div className="consciousness-quantum">Content</div>
Animations

consciousness-cosmic

sample
<div className="consciousness-cosmic">Content</div>
Animations

consciousness-transcendent

sample
<div className="consciousness-transcendent">Content</div>
Animations

quantum-superposition

sample
<div className="quantum-superposition">Content</div>
Animations

quantum-entanglement

sample
<div className="quantum-entanglement">Content</div>
Animations

quantum-collapse

sample
<div className="quantum-collapse">Content</div>
Animations

scroll-reveal

sample
<div className="scroll-reveal">Content</div>
Animations

scroll-reveal-delay-1

sample
<div className="scroll-reveal-delay-1">Content</div>
Animations

scroll-reveal-delay-2

sample
<div className="scroll-reveal-delay-2">Content</div>
Animations

scroll-reveal-delay-3

sample
<div className="scroll-reveal-delay-3">Content</div>
Animations

parallax-scroll

sample
<div className="parallax-scroll">Content</div>
Animations

sticky-note

sample
<div className="sticky-note">Content</div>

Every spell above is generated from the COSMIC tokens. Run npm run generate in the cosmic module to re-emit them.