🌟 Genesis Ontology Web Components

Natural HTML extension approach - Components feel like native HTML elements

v2.0 No inline HTML/SCSS in JavaScript • Lifecycle-driven • Declarative attributes

1. Genesis Entity Components

Use <genesis-entity nature="..."> for content blocks

Primary Entity

Main content with glassmorphism

Automatic fadeInUp + card hover

Secondary Entity

Supporting contextual data

Simple fadeIn + subtle hover

Imperative Entity

Urgent system signal

BounceIn entrance + pulse

View Code

<genesis-entity nature="primary">
  <h3>Primary Entity</h3>
  <p>Main content with glassmorphism</p>
</genesis-entity>

2. Genesis Synapse Components

Use <genesis-synapse vector="..."> for interactive elements

Execute Action

Navigate Link

Destructive Action

View Code

<genesis-synapse vector="execute">
  Execute Action
</genesis-synapse>

<genesis-synapse vector="navigate">
  Navigate Link
</genesis-synapse>

3. Genesis Cognition Components

Use <genesis-cognition intent="..."> for typography

Axiom: Foundational Headline

Discourse: This is standard body text that communicates ideas and information in a clear, readable format. It fades in with a simple animation.

AI

Machine Learning

Web Components

Ontology

View Code

<genesis-cognition intent="axiom">
  Headline Text
</genesis-cognition>

<genesis-cognition intent="quantum">Tag</genesis-cognition>

4. Genesis State Components

Use <genesis-state condition="..."> for temporal states

Evolving State: Content that is currently updating or streaming (pulses continuously)

View Code

<genesis-state condition="evolving">
  Content that updates...
</genesis-state>

5. Scroll-Triggered Animations

Use condition="scroll-triggered" for reveal-on-scroll

✨ Why Web Components?

🎯 Natural HTML Extension

Components feel like native HTML elements, not JavaScript constructs. <genesis-entity> is as natural as <div>.

🔄 Lifecycle-Driven

Animations tied to component lifecycle (mount, unmount, attribute changes). More predictable than DOM scanning.

📝 Declarative Attributes

Clear intent with nature="primary" instead of relying on class name patterns. Explicit is better than implicit.

🎨 SCSS Stays Separate

No inline HTML/SCSS in JavaScript. Components are transparent containers. Styling lives in .scss files where it belongs.

🧬 SCSS Integration

Web Components work seamlessly with ontological SCSS mixins:

/* In your subdomain SCSS */
@import "ontology/index";

genesis-entity {
  @include genesis-entity('primary');
}

genesis-synapse {
  @include genesis-synapse('execute');
}

genesis-cognition {
  @include genesis-cognition('axiom');
}

Result: Visual styling from SCSS + animation behavior from Web Components = Complete ontological integration

Genesis Ontological Design System v2.0

Web Components • Motion Library • OKLCH Colors • Glassmorphism