# mmnga/x-ambient architecture

> Architecture diagram of the GitHub repository mmnga/x-ambient, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mmnga/x-ambient
- Repository: https://github.com/mmnga/x-ambient

## Overview

X Ambient is a Chrome extension that lights the page from media in a hovered X post. Its main workflow is to find visible post media, render its edge colors into a blurred ambient field, and apply a mask so the original media stays sharp; settings control the effect. The graph also includes optional card fitting and the settings popup. The excerpts show these runtime links, but do not expose all of content.js or the extension manifest, so uncertain wiring is omitted.

Main entry points: [`src/content.js`](https://github.com/mmnga/x-ambient/blob/main/src/content.js) (Post interaction), [`src/card-layout.js`](https://github.com/mmnga/x-ambient/blob/main/src/card-layout.js) (Window-fit cards), [`src/popup.js`](https://github.com/mmnga/x-ambient/blob/main/src/popup.js) (Settings popup), [`src/settings.js`](https://github.com/mmnga/x-ambient/blob/main/src/settings.js) (Settings model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Page interaction"]
  node_content["Post interaction<br/>[content.js]"]
  node_media["Media discovery<br/>[content.js]"]
end

subgraph group_rendering["Ambient rendering"]
  node_renderer["Light renderer<br/>[content.js]"]
  node_core["Geometry and projection<br/>[ambient-core.js]"]
end

subgraph group_preferences["Settings"]
  node_settings["Settings model<br/>[settings.js]"]
  node_popup["Settings popup<br/>[popup.js]"]
  node_storage[("Local settings")]
end

subgraph group_layout["Card layout"]
  node_cardlayout["Window-fit cards<br/>[card-layout.js]"]
end

node_visitor(("X user"))
node_timeline["X timeline"]

node_visitor -->|"hovers over"| node_timeline
node_timeline -->|"provides page media"| node_content
node_content -->|"finds visible media"| node_media
node_media -->|"supplies sources"| node_renderer
node_content -->|"updates effect"| node_renderer
node_renderer -->|"uses geometry"| node_core
node_renderer -->|"draws ambient light"| node_timeline
node_renderer -->|"masks original media"| node_timeline
node_popup -->|"normalizes values"| node_settings
node_popup -->|"reads and saves"| node_storage
node_storage -->|"provides preferences"| node_content
node_content -->|"applies preferences"| node_settings
node_content -.->|"creates layout"| node_cardlayout
node_cardlayout -->|"fits cards"| node_timeline
node_cardlayout -->|"signals layout changes"| node_content

click node_content "https://github.com/mmnga/x-ambient/blob/main/src/content.js"
click node_media "https://github.com/mmnga/x-ambient/blob/main/src/content.js"
click node_renderer "https://github.com/mmnga/x-ambient/blob/main/src/content.js"
click node_core "https://github.com/mmnga/x-ambient/blob/main/src/ambient-core.js"
click node_settings "https://github.com/mmnga/x-ambient/blob/main/src/settings.js"
click node_popup "https://github.com/mmnga/x-ambient/blob/main/src/popup.js"
click node_cardlayout "https://github.com/mmnga/x-ambient/blob/main/src/card-layout.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_content,node_media,node_visitor toneBlue
class node_renderer,node_core toneAmber
class node_settings,node_popup,node_storage toneMint
class node_cardlayout toneRose
class node_timeline toneIndigo
```

## Components

### Page interaction

- [Post interaction](https://github.com/mmnga/x-ambient/blob/main/src/content.js): `src/content.js`
- [Media discovery](https://github.com/mmnga/x-ambient/blob/main/src/content.js): `src/content.js`

### Ambient rendering

- [Light renderer](https://github.com/mmnga/x-ambient/blob/main/src/content.js): `src/content.js`
- [Geometry and projection](https://github.com/mmnga/x-ambient/blob/main/src/ambient-core.js): `src/ambient-core.js`

### Settings

- [Settings model](https://github.com/mmnga/x-ambient/blob/main/src/settings.js): `src/settings.js`
- [Settings popup](https://github.com/mmnga/x-ambient/blob/main/src/popup.js): `src/popup.js`
- **Local settings**

### Card layout

- [Window-fit cards](https://github.com/mmnga/x-ambient/blob/main/src/card-layout.js): `src/card-layout.js`

### Other components

- **X user**
- **X timeline**

## Connections

- X user → X timeline: hovers over (evidence: `README.md`)
- X timeline → Post interaction: provides page media (evidence: `README.md`)
- Post interaction → Media discovery: finds visible media (evidence: `src/content.js`)
- Media discovery → Light renderer: supplies sources (evidence: `src/content.js`)
- Post interaction → Light renderer: updates effect (evidence: `src/content.js`)
- Light renderer → Geometry and projection: uses geometry (evidence: `src/content.js`)
- Light renderer → X timeline: draws ambient light (evidence: `README.md`)
- Light renderer → X timeline: masks original media (evidence: `src/content.js`)
- Settings popup → Settings model: normalizes values (evidence: `src/popup.js`)
- Settings popup → Local settings: reads and saves (evidence: `src/popup.js`)
- Local settings → Post interaction: provides preferences (evidence: `README.md`)
- Post interaction → Settings model: applies preferences (evidence: `src/content.js`)
- Post interaction → Window-fit cards: creates layout
- Window-fit cards → X timeline: fits cards (evidence: `README.md`)
- Window-fit cards → Post interaction: signals layout changes (evidence: `src/card-layout.js`)