The moving stage
14 generated stylesheets and 96 effects, every one emitted by the cosmic generator and loaded here. Press play and the stage performs; reduced motion is honoured by the sheets themselves.
The Nine and what the record holds of them live at the Council.
attention-modes.css 5
Five paces of attention; every descendant inherits the pace and the gap.
.attention-eagle
Sharp, singular focus: 500ms pace, 2rem gap.
.attention-dove
Gentle and calm: 700ms pace, 2rem gap.
.attention-owl
Deep and patient: 500ms pace, 1.25rem gap.
.attention-hummingbird
Fast and darting: 150ms pace, 0.75rem gap.
.attention-peacock
Expressive and rich: 300ms pace, 0.75rem gap.
attention-selector.css 6
The control that switches the five paces.
.attention-selector
A fixed pill at the bottom right of the document.
.attention-selector-mode-eagle
Chosen at full opacity, scaled 1.1 over 500ms.
.attention-selector-mode-dove
Chosen at full opacity, scaled 1.1 over 700ms.
.attention-selector-mode-owl
Chosen at full opacity, scaled 1.1 over 500ms.
.attention-selector-mode-hummingbird
Chosen at full opacity, scaled 1.1 over 150ms.
.attention-selector-mode-peacock
Chosen at full opacity, scaled 1.1 over 300ms.
ceremonies.css 6
Six ceremonies; each parent times the beats its children carry.
.ceremony-recognition
Three beats over 2300ms.
.beat-gather .beat-hold .beat-affirm
.ceremony-naming
Three beats over 2500ms.
.beat-gather .beat-name .beat-settle
.ceremony-welcome
Four beats over 6500ms.
.beat-approach .beat-weave .beat-seat .beat-bless
.ceremony-farewell
Three beats over 3700ms.
.beat-gather .beat-escort .beat-release
.ceremony-recentering
Three beats over 3300ms.
.beat-withdraw .beat-hold .beat-return
.ceremony-awakening
Three beats over 3000ms.
.beat-stir .beat-emerge .beat-arrive
ceremonies-refuge.css 10
Thresholds, bookends and the refuge sequence.
.bookend-entrance
Carries the entrance duration and easing on every property.
.bookend-exit
Carries the exit duration and easing on every property.
.bookend-pause
Carries the 300ms pause duration on every property.
.ceremony-threshold-arrival
Rises from 10px and fades in when .active joins it.
.ceremony-threshold-departure
Lifts 10px and fades out when .active joins it.
.ceremony-threshold-hold
One breath of the pause keyframe.
.refuge-sequence-container
Holds the whole 5700ms choreography.
.refuge-entry
The welcome into refuge, 1200ms, forwards.
.refuge-hold
The held breath, 2000ms, repeating.
.refuge-return
The guided return, 2500ms, forwards.
consciousness-depth.css 13
Six floors of density and five elemental palettes.
.frequency-physical
Density 0.7.
.frequency-crisis
Density 0.8.
.frequency-synthesis
Density 1.
.frequency-wisdom
Density 1.1.
.frequency-akashic
Density 1.3.
.frequency-divine
Density 1.5.
.element-earth
Grounded action; text, background and border.
.element-air
Mental choice; text, background and border.
.element-fire
Will and transformation; text, background and border.
.element-water
Flow and dissolution; text, background and border.
.element-spirit
Unity and witnessing; text, background and border.
.consciousness-grid
A grid whose gap is scaled by the floor density.
.consciousness-depth-indicator
Opacity follows the floor it names.
deity-voices.css 9
Nine seats, each with its own colour, font and easing.
.deity-quantum-weaver
The Weaver: medieval, #6C5CE7.
.deity-aethelred
Aethelred: medieval, #2E0B1C.
.deity-chancellor
Chancellor: medieval, #00CEC9.
.deity-seer
Seer: arcane, #6C5CE7.
.deity-hearth-keeper
Hearth-Keeper: medieval, #C44B2D.
.deity-archivist
Archivist: medieval, #636E72.
.deity-codex
Codex: geometric, #00B894.
.deity-gatekeeper
Gatekeeper: runic, #636E72.
.deity-alchemist
Alchemist: arcane, #22D3EE.
ensemble.css 5
Companions drifting in, holding, and rising together.
.convergence-driftin
Companions to 0.5 over 1200ms, 120ms apart.
.convergence-hold
Companions to 0.3 over 2000ms, together.
.convergence-reascent
Companions back to full over 2500ms, 80ms apart.
.ensemble-roundabout
Children over 2000ms, 90ms apart.
.ensemble-blessing-circle
Children over 2500ms, 500ms apart.
eternal-witness.css 6
Three ways of being witnessed, as a backdrop or inside a container.
.witness-witnessing
A fixed backdrop behind the page; .witness-witnessing-active raises it.
.witness-holding
A fixed backdrop behind the page; .witness-holding-active raises it.
.witness-blessing
A fixed backdrop behind the page; .witness-blessing-active raises it.
.witness-presence-container .mode-witnessing
The witnessing wash inside a container.
.witness-presence-container .mode-holding
The holding wash inside a container.
.witness-presence-container .mode-blessing
The blessing wash inside a container.
gates.css 4
The self-pause trigger and the three gates that ask before they open.
.self-pause-trigger
A fixed 56px button at the bottom right of the document.
.invitation-gate-wisdom
Opens to full over 500ms.
.invitation-gate-akashic
Opens to full over 2000ms.
.invitation-gate-divine
Opens to full over 2500ms.
glow-field.css 15
Ambient presence and the glow each domain modulates.
.presence-mnemosyne
Memory holding the room, at 0.6.
.presence-calm
A calm wash, at 0.5.
.presence-inspiration
An inspiring wash, at 0.55.
.glow-modulated-quantum
Quantum glow, coefficient 1.15, widening on hover.
.glow-modulated-cosmic
Cosmic glow, widening on hover.
.glow-modulated-pantheon
Pantheon glow, widening on hover.
.glow-modulated-bifrost
Bifrost glow, widening on hover.
.glow-modulated-library
Library glow, widening on hover.
.glow-modulated-void
Void glow, widening on hover.
.glow-modulated-council
Council glow, widening on hover.
.glow-modulated-sandbox
Sandbox glow, widening on hover.
.glow-modulated-music
Music glow, widening on hover.
.glow-modulated-community
Community glow, widening on hover.
.glow-modulated-support
Support glow, widening on hover.
.glow-modulated-architecture
Architecture glow, widening on hover.
pause-state.css 2
The world-pause, worn by the document root, not by a sample.
.pause-overlay
A fixed vignette that rises when the root carries data-cosmic-pause.
.pause-exempt
Keeps an element running while the world is held.
scene.css 8
Six camera moves and two scene timelines.
.camera-move-push
Draws the eye inward, 1200ms.
.camera-move-pull
Releases focus back to the whole, 1200ms.
.camera-move-establish
Sets the stage, then settles, 1600ms.
.camera-move-reveal
A rise into presence, 2000ms.
.camera-move-orbit
A slow rotation, 2000ms, linear.
.camera-move-descend
Comes down into the scene, 1600ms.
.scene-arrival
A 4800ms timeline: establish, then push.
.scene-gathering
A 7600ms timeline: reveal, orbit, pull.
supportive-affordances.css 3
The shape each seat gives its help during a recovery.
.supportive-warmth
A warmth message rises over 1200ms.
.supportive-diagnostic
A structured summary rises over 1200ms.
.supportive-reframe
A gentle reframe rises over 1200ms.
transcendence.css 4
Four shifts between the floors of consciousness.
.transcend-physical-crisis
Physical to crisis, 600ms, forwards.
.transcend-crisis-wisdom
Crisis to wisdom, 800ms, forwards.
.transcend-wisdom-akashic
Wisdom to akashic, 900ms, forwards.
.transcend-akashic-divine
Akashic to divine, 1000ms, forwards.
Every class above is emitted by the cosmic generator. Run npm run generate in the cosmic module to re-emit the sheets this stage loads.