https://github.com/v1b3x0r/material-js-concept
Manifest-driven Material System for the web — define surfaces, optics, and behaviors in JSON instead of CSS. Think in materials, not properties.
https://github.com/v1b3x0r/material-js-concept
css-architecture design-system frontend-engine json-schema manifest material mdspec ui-library webcomponents
Last synced: 8 months ago
JSON representation
Manifest-driven Material System for the web — define surfaces, optics, and behaviors in JSON instead of CSS. Think in materials, not properties.
- Host: GitHub
- URL: https://github.com/v1b3x0r/material-js-concept
- Owner: v1b3x0r
- License: mit
- Created: 2025-10-05T06:28:04.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-12T14:10:15.000Z (8 months ago)
- Last Synced: 2025-10-13T08:06:16.750Z (8 months ago)
- Topics: css-architecture, design-system, frontend-engine, json-schema, manifest, material, mdspec, ui-library, webcomponents
- Language: TypeScript
- Homepage: https://material-js-concept.vercel.app
- Size: 214 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Material Definition System (MDS)
Language for digital materials — born from Coke Light, built with GPT‑5.
---
> “short, real, and written for humans — not for search engines.”
---
```
┌────────────────────┐
│ MaterialSystem │
│ (Core Runtime) │
└─────────┬──────────┘
│
┌───────────┼────────────┐
│ │
┌─────────────┐ ┌─────────────┐
│ MDSpec │ │ Manifest │
│ (Schema) │ │ .mdm.json │
└──────┬──────┘ └──────┬──────┘
│ │
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Optics │ │ Behavior │
│ Surface │ │ Physics.js │
└─────────────┘ └─────────────┘
```
Interactive sample — drag the silicone element to feel the tactile response.
---
## 🧱 What is MDS
A **language for digital materials.**
Instead of describing *what UI looks like*, MDS defines *what it’s made of.*
Use declarative materials right in the DOM:
```html
Drag me
```
```js
import MDS from "@v1b3x0r/mds-core"
const silicone = await fetch("./liquid-silicone.mdm.json").then(r => r.json())
MDS.register("@mds/liquid-silicone", silicone)
MDS.apply()
```
---
## 🧠 Why It Exists
I was tired of bloated UI frameworks and endless CSS repetition.
So I wondered: what if the DOM could *understand materials* — glass, paper, silicone —
instead of properties?
MDS became an **HCI experiment** — a quiet study of how humans *feel* digital surfaces before they even touch them.
> it started from a Coke Light and an argument with GPT‑5.
---
## ⚙️ How It Works
- **Manifest‑driven:** materials defined in JSON (`.mdm.json`)
- **Physics‑ready:** elastic & tactile behavior (K, D, mass)
- **State‑aware:** hover, press, drag handled declaratively
- **Zero dependency:** works anywhere — CDN, npm, vanilla DOM
Example manifest:
```json
{
"name": "@mds/liquid-silicone",
"optics": { "tint": "rgba(200,200,255,0.3)" },
"surface": { "radius": "16px" },
"behavior": {
"physics": "./liquid-silicone.physics.js",
"physicsParams": { "K": 22, "D": 18, "mass": 1.5 }
}
}
```
---
## 👥 For Different Roles
| 👩💻 Developers | 🎨 Designers | 🧠 HCI Researchers | 🧩 System Thinkers | 🤖 AI Builders |
|:--|:--|:--|:--|:--|
| Adds tactile response layer between DOM & behavior engines. | Describe materials in plain language (“soft paper”, “frosted glass”). | Sandbox for studying tactile perception & digital materiality. | Bridge between perception & implementation declaratively. | Generate & evolve manifests directly from structured JSON. |
---
## 🧩 Tech Summary
| Feature | Description |
|:--|:--|
| Runtime | ~4.5 KB (ESM gzipped) |
| Theme | Auto light / dark |
| Physics | External `.physics.js` modules |
| License | MIT |
| Support | Chrome 90+, Firefox 88+, Safari 14+ |
| Repo | [GitHub: v1b3x0r/material-js-concept](https://github.com/v1b3x0r/material-js-concept) |
| NPM | [@v1b3x0r/mds-core](https://www.npmjs.com/package/@v1b3x0r/mds-core) |
---
## 🪶 Origin
This project was **100% AI‑coded through conversation.**
I never typed a line manually — just talked.
Core designed with GPT‑5 (Cognitive‑Focused Instruct + Narrative Prompting)
Implementation & refined docs with Sonnet 4.5 on Claude Code
Bugs fixed by Codex
> “It's start from Northern Thailand ☕”
---
2025 © MIT License — Made for humans who still believe in feel.