Svelte Signal Instrument Lab
✦ Svelte signal instrument with Tailwind 4, a cleaner lab-sheet UI, reactive SVG stage, and Netlify-ready static deployment.
✦ Waveframe
Svelte signal instrument with a calmer lab-sheet UI, reactive SVG stage, and preset-driven state changes
A compact Svelte pet project built to show a more user-friendly side of reactive UI work: one clean signal sheet where presets, sliders, transport state, and scan mode redraw the same SVG stage instantly.
✨ Highlights
- Clean lab-sheet layout with one main stage and a compact control desk
- Reactive SVG waveform driven by five live controls and one shared state model
- Preset changes that reconfigure the same instrument without switching to a second UI model
- Light, calmer visual direction that keeps the project readable instead of overloaded
- Tailwind CSS 4 as the styling base with a small custom slider/stage layer
- Static Vite setup with Netlify-ready deployment
🧭 Scope
/- the Waveframe signal instrument
🛠️ Tech Stack
| Layer | Technology |
|---|---|
| Framework | Svelte 5 |
| Language | TypeScript |
| Styling | Tailwind CSS 4 + minimal custom slider/stage layer |
| Motion | keyed transitions, reactive SVG redraw, derived telemetry |
| Build Tool | Vite 8 |
| Hosting | Static deployment ready |
🧱 Architecture
InstrumentStageowns the oscilloscope-style sheet and recomputes the waveform, fill, markers, and summary bars from live valuesControlSliderkeeps the control desk readable while still showing the directness of Svelte bindingspresets.tsholds the preset definitions and scan mode options so one compact state model drives the whole sheet
🗂️ Project Structure
svelte-signal-instrument-lab/
├── public/
│ └── favicon.svg
├── src/
│ ├── App.svelte
│ ├── app.css
│ ├── main.ts
│ ├── vite-env.d.ts
│ └── lib/
│ ├── ControlSlider.svelte
│ ├── InstrumentStage.svelte
│ ├── types.ts
│ └── data/
│ └── presets.ts
├── LICENSE
├── netlify.toml
├── package.json
└── README.md
🚀 Local Development
📦 Install
npm install
▶️ Run dev server
npm run dev
🏗️ Build
npm run build
🌐 Deployment
🌐 Netlify (Recommended)
- Push your code to GitHub
- Connect repository to Netlify
- Build settings are auto-configured via
netlify.toml - Deploy
📄 License
MIT License. See LICENSE.
