A unique Next.js application that transforms music lyrics into scientific visualizations using periodic table elements and mathematical symbols. Experience your favorite songs in a whole new way - through the lens of chemistry and mathematics!
SoundSpectrum takes your favorite songs and transforms them into an educational and visually stunning experience by:
- Converting lyrics into periodic table elements
- Using mathematical symbols as fallback
- Synchronizing the transformed lyrics with music playback
- Creating a unique blend of music, chemistry, and mathematics
Original: "Hello world"
Becomes: "He-Li-O W-O-Rn-Ld"
(Helium, Lithium, Oxygen, Tungsten, Oxygen, Roentgenium, etc.)
- Music Search: Search and play any song instantly
- Scientific Transformation: Automatic conversion of lyrics to chemical elements
- Mathematical Fallback: Smart system that uses mathematical symbols when elements aren't available
- Real-time Synchronization: Perfectly timed display of transformed lyrics with music
- Interactive Learning: Learn about chemical elements while enjoying music
- Responsive Design: Beautiful UI that works on all devices
- Dark Mode: Eye-friendly dark theme by default
- Framework: Next.js 15
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide Icons
- API Integration: YouTube V3 API
- State Management: React Hooks
- UI Components: Aceternity UI
- Clone the repository:
git clone https://github.com/Async-NickL/SoundSpectrum.git
cd SoundSpectrum- Install dependencies:
npm install- Create a
.envfile in the root directory and add your YouTube API key:
NEXT_PUBLIC_YOUTUBE_API_KEY=your_api_key_here- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
SoundSpectrum/
├── app/
│ ├── components/ # Reusable UI components
│ ├── search/ # Search functionality
│ ├── layout.js # Root layout
│ └── page.js # Home page
├── public/ # Static assets
└── styles/ # Global styles
- Input: User searches for a song
- Music Retrieval: App fetches and plays the selected song
- Lyrics Processing: Timestamped lyrics are retrieved
- Elemental Transformation: Each word is converted to periodic table elements
- Fallback System: Mathematical symbols are used when elements aren't available
- Synchronized Display: Transformed lyrics appear in real-time with the music
- YouTube V3 API for music search functionality
- LRCLIB for lyrics data
- Next.js team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- Framer Motion for smooth animations
- Aceternity UI for ui components
Nikhil Kole - LinkedIn