LyrScript

A visually aesthetic lyric viewer that looks like a macOS code window

Transform your favorite song lyrics into a beautiful, animated coding experience. LyrScript displays lyrics one line at a time with smooth typing animations in a macOS-inspired code window interface.

Live Demo • Report Bug • Request Feature

✨ Features

🎨 Beautiful Themes

10+ Pre-designed Themes including:
- Midnight Slate (default)
- Monochrome Dark
- Cyberpunk Neon
- Forest Whisper
- Lavender Dream
- Amber Glow
- Northern Lights
- Rose Mist
- Desert Mirage
- Aqua Sunset
- And more!

⌨️ Realistic Typing Animation

Character-by-character typing effect with customizable speed
Blinking cursor animation for authentic code editor feel
Smooth line transitions and animations
Maximum 8 lines visible at once for optimal readability

🎵 LRC Format Support

Standard LRC (Lyric) file format with timestamp synchronization
Automatic lyric fetching from lrclib.net API
Manual LRC content input
Precise millisecond timing for perfect sync

💾 Import/Export Settings

Save your lyric configurations as JSON
Export and share your favorite setups
Import previously saved configurations
Preserve song metadata and preferences

🖥️ macOS-Inspired UI

Authentic window controls (red, yellow, green buttons)
Sleek borderless design
Line numbers like a real code editor
Responsive layout for all screen sizes
Smooth gradient animated backgrounds

🔍 Smart Lyric Search

Search lyrics by song title and artist
Powered by lrclib.net database
Automatic synced lyrics retrieval
One-click populate your player

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (version 16 or higher)
npm or yarn package manager

Installation

Clone the repository

git clone https://github.com/abdipr/lyrscript.git
cd lyrscript

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000 to see LyrScript in action!

Building for Production

To create an optimized production build:

npm run build

The compiled files will be in the dist/ directory, ready to be deployed.

Preview Production Build

To preview the production build locally:

npm run preview

📖 Usage Guide

Basic Setup

Open Settings Panel

Click the settings icon (⚙️) in the bottom-right corner of the screen.
Enter Song Information

Fill in the following fields:
- Song Title: The name of the song
- Artist: The artist or band name
Get Lyrics

You have two options:

Option A: Search Automatically
- Click the "Search for Lyrics" button
- LyrScript will fetch synced lyrics from lrclib.net
- Lyrics will auto-populate if found
Option B: Manual Input
- Paste your LRC content directly into the text area
- LRC format example:
```
[00:12.34] First line of lyrics
[00:15.67] Second line of lyrics
[00:18.90] Third line of lyrics
```
Customize Appearance
- Theme: Choose from 10+ beautiful themes
- Typing Speed: Adjust the typing animation speed (default: 50ms per character)
Start Playback

Click "Save & Start" to begin the lyric animation!

LRC Format

LyrScript uses the standard LRC format for synced lyrics:

[mm:ss.xx] Lyric text

Where:

mm = minutes (2 digits)
ss = seconds (2 digits)
xx = centiseconds (2-3 digits)

Example:

[00:12.00] Hello darkness, my old friend
[00:17.20] I've come to talk with you again
[00:21.80] Because a vision softly creeping
[00:26.50] Left its seeds while I was sleeping

Keyboard Shortcuts

Action	Shortcut
Open Settings	Click ⚙️ icon
Close Settings	Click × icon or outside modal
Save & Start	Click "Save & Start" button

🛠️ Technology Stack

LyrScript is built with modern web technologies:

React - UI framework
TypeScript - Type-safe JavaScript
Vite - Fast build tool and dev server
TailwindCSS - Utility-first CSS framework
lrclib.net API - Lyric database

📁 Project Structure

lyrscript/
├── public/              # Static assets
│   ├── favicon icons    # App icons
│   └── site.webmanifest # PWA manifest
├── components/          # React components
│   ├── Icons.tsx        # SVG icon components
│   ├── LyricWindow.tsx  # Main lyric display window
│   └── SettingsPanel.tsx # Settings modal component
├── App.tsx              # Main application component
├── index.tsx            # Application entry point
├── index.html           # HTML template
├── constants.ts         # Theme definitions and defaults
├── types.ts             # TypeScript type definitions
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── package.json         # Project dependencies

🎨 Customization

Adding New Themes

Themes are defined in constants.ts. To add a new theme:

export const THEME_CLASSES = {
  // ... existing themes
  'your-theme-name': {
    window: 'bg-slate-900/60 border-slate-700',
    header: 'bg-slate-800/80 border-slate-700',
    body: 'text-slate-200',
    accent: 'text-slate-500',
    background: 'from-indigo-900 via-slate-900 to-purple-900'
  }
};

Modifying Typing Speed

Adjust the default typing speed in constants.ts:

export const DEFAULT_SETTINGS: AppSettings = {
  // ... other settings
  typingSpeed: 50, // milliseconds per character
};

Changing Max Visible Lines

Modify the constant in App.tsx:

const MAX_VISIBLE_LINES = 8; // Change to your preferred number

🌐 API Integration

LyrScript uses the lrclib.net API to fetch synced lyrics.

API Endpoint

GET https://lrclib.net/api/search?track_name={trackName}&artist_name={artistName}

Response Format

{
  "id": 123,
  "name": "Song Name",
  "trackName": "Song Name",
  "artistName": "Artist Name",
  "albumName": "Album Name",
  "duration": 240,
  "instrumental": false,
  "plainLyrics": "...",
  "syncedLyrics": "[00:12.34] Lyric line..."
}

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

How to Contribute

Fork the Project
Create your Feature Branch
```
git checkout -b feature/AmazingFeature
```
Commit your Changes
```
git commit -m 'Add some AmazingFeature'
```
Push to the Branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Development Guidelines

Follow the existing code style
Write clear commit messages
Add comments for complex logic
Test your changes thoroughly
Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

LyrScript Team - Initial work - abdipr

🙏 Acknowledgments

lrclib.net - For providing the lyric database API
Vercel - For hosting and deployment
JetBrains Mono - For the beautiful monospace font
All contributors who help improve LyrScript

📧 Support

If you encounter any issues or have questions:

📫 Open an issue on GitHub Issues
💬 Start a discussion on GitHub Discussions

🌟 Show Your Support

If you like LyrScript, please consider:

⭐ Starring this repository
🐛 Reporting bugs
💡 Suggesting new features
🔀 Contributing to the code

Made with ❤️ by the LyrScript Team

Website • GitHub

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
components		components
public		public
.gitignore		.gitignore
App.tsx		App.tsx
LICENSE		LICENSE
README.md		README.md
constants.ts		constants.ts
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
types.ts		types.ts
vite.config.ts		vite.config.ts

License

abdipr/lyrscript

Folders and files

Latest commit

History

Repository files navigation