# Neural CSS Engine Pro 🧠⚡

**GPU neural raymarching CSS engine** - Iridescent materials, path tracing, morphing backgrounds, and Vencord Discord themes.

## Features

| Feature | Description |
|---------|-------------|
| **Iridescent Effect** | 7-color shifting gradient that responds to mouse/view angle |
| **Path Tracing** | Multi-source radial glow simulating ray bounces |
| **Morph Background** | Dual-layer parallax with two images shifting by view angle |
| **Fresnel Glow** | Edge lighting effect with pulsing animation |
| **Evolving Scenes** | Time-based morphing 3D scenes |
| **Vencord/Discord** | Full overlay integration for Discord themes |

## Installation

1. Open `chrome://extensions`
2. Enable **Developer mode** (top right toggle)
3. Click **Load unpacked**
4. Select the `neural-css-extension` folder
5. Click the extension icon → Toggle **ON**
6. Open `demo.html` or any page with `.neural-activated`

## CSS Classes

```css
/* Activate full neural engine */
.neural-activated

/* Vencord/Discord overlay */
.neural-vencord

/* Iridescent gradient background */
.neural-bg-iridescent

/* Fresnel glow on hover */
.neural-fresnel-glow

/* Morphing dual-layer background */
.neural-morph-bg

/* Path trace glow effect */
.neural-path-trace-glow

/* Time-evolving scene */
.neural-evolve
```

## CSS Properties

```css
/* Core */
--neural-enabled: true/false
--neural-quality: low/medium/high/ultra
--neural-scale: 1.0

/* Iridescent */
--neural-iridescent-strength: 0.8
--neural-iridescent-color-1 through -7
--neural-fresnel-power: 3.0

/* Morph Background */
--neural-morph-bg-1: url(...)
--neural-morph-bg-2: url(...)
--neural-morph-strength: 0.5

/* Path Tracing */
--neural-path-trace-samples: 4
--neural-path-trace-bounces: 4

/* View Angle (auto-animated or set manually) */
--neural-view-angle-x: 0
--neural-view-angle-y: 0
--neural-view-auto-animate: true
```

## Vencord/Discord Plugin

Copy `scripts/vencord/NeuralVencord.plugin.js` to your Vencord plugins folder and enable in settings.

## Files

```
neural-css-extension/
├── manifest.json          # Extension manifest
├── content.js             # Main engine (Three.js WebGL)
├── background.js          # Service worker
├── neural.css            # All CSS classes/properties
├── demo.html             # Live demo page
├── shaders/
│   ├── neural.frag       # Raymarching fragment shader
│   ├── neural.vert       # Vertex shader
│   ├── iridescent.glsl   # Iridescent effect shader
│   └── path_trace.glsl   # Path tracing shader
├── vencord/
│   ├── vencord-shader.js  # Vencord integration
│   └── NeuralVencord.plugin.js  # Vencord plugin
├── utils/
│   └── css-parser.js      # CSS property parser
└── ui/
    ├── popup.html        # Extension popup
    └── popup.js          # Popup logic
```

## How It Works

1. **Three.js WebGL** renders a full-screen quad with custom GLSL shaders
2. **CSS parser** reads `--neural-*` custom properties from page
3. **Iridescent shader** calculates colors based on fresnel + view angle + time
4. **Morph shader** blends two images with parallax offset based on mouse
5. **Raymarching** (SDF) renders 3D primitives in real-time

Works as:
- **Browser Extension** - Full WebGL engine
- **CSS-only** - CSS animations work without extension
- **Vencord Plugin** - Discord integration