A web app that generates 3D-printable STL files of round dishes with Grade 1 Braille text embossed on the rim. Designed for accessibility — fully usable with screen readers and keyboard navigation.
- Braille embossing — Enter up to 20 characters (a–z, spaces) and download a dish with Grade 1 Braille dots on the rim
- Scoopable interior — 10mm radius fillet on the inner bottom edge so nothing gets caught in corners
- Magnet recess — 25mm × 4mm pocket centered on the bottom (with 0.2mm print tolerance) for mounting
- Smooth top edges — 0.5mm fillets on inner and outer rim edges
- Screen-reader accessible — Semantic HTML, ARIA live regions, keyboard-only navigation, zero WCAG 2.1 AA violations
- Manifold mesh — Revolved profile geometry with embedded Braille dots produces clean, watertight STL files
npm install
npm run devOpen http://localhost:5173, type your text, and click Generate and Download STL.
| Feature | Measurement |
|---|---|
| Outer diameter | 100mm |
| Rim width | 10mm |
| Height | 30mm |
| Bottom thickness | 6mm |
| Inner bottom fillet | 10mm radius |
| Top edge fillets | 0.5mm radius |
| Braille dot diameter | 1.5mm |
| Braille dot protrusion | ~0.55mm |
| Magnet recess | 25.4mm dia × 4.2mm deep |
Tested with PLA at 0.2mm layer height. The Braille dots are small — a well-calibrated printer helps. The magnet pocket fits a standard 25mm × 4mm neodymium disc magnet.
| Layer | Choice |
|---|---|
| UI | Vanilla HTML + TypeScript |
| Build | Vite |
| 3D geometry | @jscad/modeling (CSG via extrudeRotate) |
| STL export | @jscad/stl-serializer |
| Unit tests | Vitest |
| E2E / a11y tests | Playwright + axe-core |
src/
main.ts # DOM wiring, validation, download trigger
constants.ts # All dimensions in one place
braille-map.ts # Grade 1 Braille lookup (char → dot pattern)
dish-geometry.ts # Dish body via revolved 2D profile
braille-geometry.ts # Braille dots placed along curved rim
generate-stl.ts # Orchestrator: union geometry → STL Blob
tests/
braille-map.test.ts # Braille mapping cross-verified against reference
braille-geometry.test.ts # Dot count, positions, rim bounds
dish-geometry.test.ts # Valid mesh generation
generate-stl.test.ts # Binary STL format validation
accessibility.test.ts # Playwright + axe-core WCAG audit
# Unit tests
npm test
# E2E / accessibility (requires Playwright browsers)
npx playwright install chromium
npm run test:e2eMIT