vibe coded w cursor agents claude 3.7
--
- Interactive 3D visualization of the Morse code tree structure
- Text-to-Morse code conversion with audio playback
- Visual path tracing through the tree as code plays
- Real-time highlighting of current symbols and nodes
- Responsive design that works on both desktop and mobile
- Next.js - React framework for the application
- Three.js - 3D visualization library
- React Three Fiber - React renderer for Three.js
- Web Audio API - For generating Morse code sounds
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - Component library
The application visualizes Morse code as a binary tree:
- Starting at the root node (the top arrow in the diagram)
- A dot (.) moves left in the tree
- A dash (-) moves right in the tree
- Following the path of dots and dashes leads to a specific letter
For example:
- The letter 'E' is represented by a single dot (.), so it's the first node on the left path
- The letter 'T' is represented by a single dash (-), so it's the first node on the right path
- The letter 'A' is dot-dash (.-), so you go left then right
- Bun package manager
-
Clone the repository:
git clone https://github.com/yourusername/morse-code-viz.git -
Navigate to the project directory:
cd morse-code-viz -
Install dependencies:
bun install -
Start the development server:
bun run dev -
Open http://localhost:3000 in your browser to see the application.
- Enter the text you want to convert to Morse code in the input field
- Click the "Play" button to start the visualization
- Watch as the application plays the Morse code for each letter and traces the path through the tree
- Use the "Stop" button if you want to halt playback
This project is licensed under the MIT License - see the LICENSE file for details.
- Based on the international Morse code standard
- Visualization inspired by classic Morse code decoding charts