The official website for OpenMuscle — open-source prosthetic sensor technology, open for all humanity.
OpenMuscle builds affordable, open-source pressure myography sensors that predict finger movements using machine learning. Instead of expensive EMG, we use simple pressure sensors to detect muscle topology changes — and the whole device costs about ~$45 in components.
- Hardware: 60-sensor FlexGrid (15x4 flexible PCB) + ESP32-S3
- ML: Random Forest Regressors trained on labeled LASK5 data
- Licenses: MIT (software), CERN-OHL-S v2.0 (hardware), Creative Commons (docs)
Learn more at openmuscle.org or explore the OpenMuscle Hub.
git clone https://github.com/Open-Muscle/openmuscle-website.git
cd openmuscle-website
npm install
npm run dev # http://localhost:4321
npm run build # outputs to dist/| Layer | Technology |
|---|---|
| Framework | Astro 6 |
| Styling | Tailwind CSS 4 |
| Hosting | Azure Static Web Apps (free tier) |
| CI/CD | GitHub Actions (auto-deploy on push to main) |
| Domain | openmuscle.org via Azure DNS |
No frontend framework (React, Vue, etc.) — just plain Astro components with client-side JavaScript for animations.
src/
├── layouts/
│ └── BaseLayout.astro # Shared shell: nav, footer, <head>, mobile menu
├── pages/
│ ├── index.astro # Home — hero, finger prediction charts, repo cards
│ ├── technology.astro # PMG explanation, sensor comparisons, data pipeline
│ ├── repositories.astro # All GitHub repos with live stats
│ ├── get-involved.astro # Community links, contribution guide
│ └── about.astro # Origin story, photo timeline, tech stack, licenses
├── components/
│ ├── SensorHeatmap.astro # 60-sensor pressure heatmap visualization
│ ├── PredictionChart.astro # Finger prediction actual vs predicted chart
│ └── ModelComparison.astro # ML model comparison table
└── styles/
└── global.css # Brand tokens, button/card/grid styles
public/
├── logos/ # PNG logos (black/white, horizontal, 1x1 icon)
├── images/
│ ├── backgrounds/ # Transparent section backgrounds (5-12% opacity)
│ └── timeline/ # About page milestone photos
├── data/ # Real ML inference data for hero animation
└── favicon-32.png, apple-touch-icon.png, icon-192.png
All colors are defined as Tailwind theme tokens in src/styles/global.css:
| Token | Hex | Usage |
|---|---|---|
orange-primary |
#FFBFA3 |
Accents, borders, button bg |
orange-bold |
#FF9F63 |
CTAs, emphasis, hover states |
orange-light |
#FFE0CC |
Light backgrounds, overlays |
blue-primary |
#6FBEE6 |
Links, highlights, dotted lines |
blue-bright |
#70D6FF |
Interactive elements, glows |
blue-light |
#BFE8FF |
Card backgrounds |
bg-warm |
#FEF9F5 |
Main page background |
bg-cool |
#F3FEFE |
Alternate section background |
text-base |
#2C2C2C |
Body text |
navy |
#0f1729 |
Dark CTA section background |
Repo cards on the home and repositories pages fetch stars, forks, language, and last-updated from the GitHub API at build time. Stats refresh on every deploy.
The hero section replays actual finger prediction data — 4 canvases showing Index, Middle, Ring, and Pinky fingers with actual (blue) vs predicted (orange) traces from real FlexGrid sensor data.
Subtle grid backgrounds (blueprint-grid, blueprint-grid-dense) give the site a technical drawing feel. Solid orange lines represent strength/hardware, dotted blue lines represent openness/data flow.
- Create
src/pages/my-page.astro - Wrap content in
<BaseLayout title="My Page">...</BaseLayout> - Add nav link in
BaseLayout.astro(both desktop and mobile menu sections)
Edit the timeline array in src/pages/about.astro:
{ year: "2026", title: "Title", desc: "Description", color: "orange", image: "/images/timeline/photo.png" }Replace files in public/logos/. Required variants:
logo-horizontal-black.png/logo-horizontal-white.png— navbar, herologo-black.png/logo-white.png— large stacked logo (footer)icon-black.png/icon-white.png— 1:1 monogram (favicon source)
Edit repoSlugs and repoMeta at the top of src/pages/index.astro.
Every push to main triggers a GitHub Actions workflow that builds and deploys to Azure Static Web Apps automatically.
- Build command:
npm run build - Output directory:
dist
| Repository | Description |
|---|---|
| OpenMuscle-Hub | Central hub linking all OpenMuscle repos |
| OpenMuscle-FlexGrid | 60-sensor flexible PCB forearm band |
| OpenMuscle-LASK5 | Label Acquiring System for ML training data |
| OpenMuscle-Software | Python ML pipeline and data collection tools |
MIT — see LICENSE for details.