{"id":31897227,"url":"https://github.com/v1b3x0r/material-js-concept","last_synced_at":"2025-10-13T11:18:18.850Z","repository":{"id":318150162,"uuid":"1070045166","full_name":"v1b3x0r/material-js-concept","owner":"v1b3x0r","description":"Manifest-driven Material System for the web — define surfaces, optics, and behaviors in JSON instead of CSS. Think in materials, not properties.","archived":false,"fork":false,"pushed_at":"2025-10-12T14:10:15.000Z","size":219,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-13T08:06:16.750Z","etag":null,"topics":["css-architecture","design-system","frontend-engine","json-schema","manifest","material","mdspec","ui-library","webcomponents"],"latest_commit_sha":null,"homepage":"https://material-js-concept.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/v1b3x0r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-05T06:28:04.000Z","updated_at":"2025-10-12T14:10:18.000Z","dependencies_parsed_at":"2025-10-05T13:25:46.887Z","dependency_job_id":"effbfba8-e96e-4e20-aafd-5f367780cecd","html_url":"https://github.com/v1b3x0r/material-js-concept","commit_stats":null,"previous_names":["v1b3x0r/material-js-concept"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/v1b3x0r/material-js-concept","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1b3x0r%2Fmaterial-js-concept","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1b3x0r%2Fmaterial-js-concept/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1b3x0r%2Fmaterial-js-concept/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1b3x0r%2Fmaterial-js-concept/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/v1b3x0r","download_url":"https://codeload.github.com/v1b3x0r/material-js-concept/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1b3x0r%2Fmaterial-js-concept/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014766,"owners_count":26085593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-architecture","design-system","frontend-engine","json-schema","manifest","material","mdspec","ui-library","webcomponents"],"created_at":"2025-10-13T11:18:16.719Z","updated_at":"2025-10-13T11:18:18.840Z","avatar_url":"https://github.com/v1b3x0r.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \n  \u003cbr\u003e\u003cbr\u003e\n  \u003cb\u003eMaterial Definition System (MDS)\u003c/b\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003eLanguage for digital materials — born from Coke Light, built with GPT‑5.\u003c/i\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@v1b3x0r/mds-core\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@v1b3x0r/mds-core.svg?style=flat-square\u0026color=black\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/v1b3x0r/material-js-concept/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/v1b3x0r/material-js-concept?style=flat-square\u0026color=silver\" alt=\"stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/v1b3x0r/material-js-concept/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square\" alt=\"license\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n \n---\n \n\n\u003e “short, real, and written for humans — not for search engines.”\n\n \n---\n \n\n\u003cdiv align=\"center\"\u003e\n\n```\n            ┌────────────────────┐\n            │  MaterialSystem    │\n            │   (Core Runtime)   │\n            └─────────┬──────────┘\n                      │\n          ┌───────────┼────────────┐\n          │                        │\n   ┌─────────────┐          ┌─────────────┐\n   │  MDSpec     │          │  Manifest   │\n   │  (Schema)   │          │  .mdm.json  │\n   └──────┬──────┘          └──────┬──────┘\n          │                         │\n          ▼                         ▼\n   ┌─────────────┐          ┌─────────────┐\n   │  Optics     │          │  Behavior   │\n   │  Surface    │          │  Physics.js │\n   └─────────────┘          └─────────────┘\n```\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/mds-demo.gif\" width=\"640\" alt=\"MDS interactive demo\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eInteractive sample — drag the silicone element to feel the tactile response.\u003c/i\u003e\n\u003c/p\u003e\n\n \n---\n \n\n## 🧱 What is MDS\nA **language for digital materials.**  \nInstead of describing *what UI looks like*, MDS defines *what it’s made of.*\n\nUse declarative materials right in the DOM:\n```html\n\u003cdiv data-material=\"@mds/liquid-silicone\"\u003eDrag me\u003c/div\u003e\n```\n\n```js\nimport MDS from \"@v1b3x0r/mds-core\"\nconst silicone = await fetch(\"./liquid-silicone.mdm.json\").then(r =\u003e r.json())\nMDS.register(\"@mds/liquid-silicone\", silicone)\nMDS.apply()\n```\n\n---\n\n## 🧠 Why It Exists\nI was tired of bloated UI frameworks and endless CSS repetition.  \nSo I wondered: what if the DOM could *understand materials* — glass, paper, silicone —  \ninstead of properties?\n\nMDS became an **HCI experiment** — a quiet study of how humans *feel* digital surfaces before they even touch them.\n\n\u003e it started from a Coke Light and an argument with GPT‑5.\n\n---\n\n## ⚙️ How It Works\n\n- **Manifest‑driven:** materials defined in JSON (`.mdm.json`)  \n- **Physics‑ready:** elastic \u0026 tactile behavior (K, D, mass)  \n- **State‑aware:** hover, press, drag handled declaratively  \n- **Zero dependency:** works anywhere — CDN, npm, vanilla DOM  \n\nExample manifest:\n```json\n{\n  \"name\": \"@mds/liquid-silicone\",\n  \"optics\": { \"tint\": \"rgba(200,200,255,0.3)\" },\n  \"surface\": { \"radius\": \"16px\" },\n  \"behavior\": {\n    \"physics\": \"./liquid-silicone.physics.js\",\n    \"physicsParams\": { \"K\": 22, \"D\": 18, \"mass\": 1.5 }\n  }\n}\n```\n\n---\n\n## 👥 For Different Roles\n\n| 👩‍💻 Developers | 🎨 Designers | 🧠 HCI Researchers | 🧩 System Thinkers | 🤖 AI Builders |\n|:--|:--|:--|:--|:--|\n| Adds tactile response layer between DOM \u0026 behavior engines. | Describe materials in plain language (“soft paper”, “frosted glass”). | Sandbox for studying tactile perception \u0026 digital materiality. | Bridge between perception \u0026 implementation declaratively. | Generate \u0026 evolve manifests directly from structured JSON. |\n\n---\n\n## 🧩 Tech Summary\n\n| Feature | Description |\n|:--|:--|\n| Runtime | ~4.5 KB (ESM gzipped) |\n| Theme | Auto light / dark |\n| Physics | External `.physics.js` modules |\n| License | MIT |\n| Support | Chrome 90+, Firefox 88+, Safari 14+ |\n| Repo | [GitHub: v1b3x0r/material-js-concept](https://github.com/v1b3x0r/material-js-concept) |\n| NPM | [@v1b3x0r/mds-core](https://www.npmjs.com/package/@v1b3x0r/mds-core) |\n\n---\n\n## 🪶 Origin\n\nThis project was **100% AI‑coded through conversation.**  \nI never typed a line manually — just talked.\n\nCore designed with GPT‑5 (Cognitive‑Focused Instruct + Narrative Prompting)  \nImplementation \u0026 refined docs with Sonnet 4.5 on Claude Code\nBugs fixed by Codex  \u003cbr\u003e\n\n\u003e “It's start from Northern Thailand ☕”\n\n \n---\n \n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003e2025 © MIT License — Made for humans who still believe in feel.\u003c/sub\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fv1b3x0r%2Fmaterial-js-concept","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fv1b3x0r%2Fmaterial-js-concept","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fv1b3x0r%2Fmaterial-js-concept/lists"}