Lyrictor

Lyrictor is a browser-based creative tool for turning a personal interpretation of a song into a visual experience. Songs already mean something personal, and Lyrictor exists to lower the cost and friction of turning that feeling into something beautiful and shareable, with a magnetic-style timeline, beat-reactive visuals, and built-in AI image generation.

Interpret, create, publish.

Why Lyrictor

• Timeline-first creation built for shaping a song's emotional arc
• Native lyric syncing and layered timeline items (text, images, visualizer blocks)
• AI image generation directly inside the creative flow
• Two creative modes: free layout and Apple Music-style vertical sync mode
• Publishing built for sharing and revisiting interpretations over time

Standout Features

AI Image Generation (Built In)

• Generate backgrounds and scene images from prompts without leaving your project
• OpenRouter image model support (including Gemini and GPT image models)
• Optional local Stable Diffusion support
• Prompt history and generated image log for fast iteration and reuse
• Prompt suggestion flow for faster creative ideation

Timeline Creation

• Interactive waveform timeline with zoom, pan, and precise placement
• Layered timeline levels for overlapping visual moments
• Collision-aware lane behavior for cleaner sequencing
• Multi-select creation and timeline-driven text, image, and visualizer control

Two Editing Modes

• Free mode: move and style lyric text anywhere on canvas
• Static sync mode: Apple Music-style vertical scrolling lyric presentation

Beat-Reactive Visualizer

• Audio-reactive visualizer blocks on the same timeline as lyrics
• Real-time intensity changes driven by audio analysis

Publishing and Export

• Project save/load and publishing for revisiting and sharing interpretations over time
• In-browser video export for landscape and portrait formats

Demo

Stephen Sanchez - Until I Found You

Lyrictor + AI (Preview)

Tech Stack

• React + TypeScript
• React Spectrum
• Zustand
• Konva
• waveform-data
• react-use-audio-player + Howler
• Firebase (auth + data)

Local Development

yarn
yarn dev

Build for production:

yarn build

Roadmap

• More text animation presets and transitions
• Richer timeline interactions and creative control
• Expanded sharing and discovery around musical interpretation