Generate beautiful quote images dynamically via URL! Built with Next.js, Canvas, Sharp, and TypeScript.

Simply access the site with your quote and author, and the service generates an image on the fly:

https://quotebanner.vercel.app/Every dog has its day - Arnold Mueller.jpg

Easily embeddable: You can embed these anywhere images are accepted. For example, this README:

<img src="proxy.php?url=https://quotebanner.vercel.app/Consistency requires you to be as ignorant today as you were a year ago. - Bernard Berenson.jpg">:

• Use real spaces or underscores in place of spaces (including before and after the -)
• Everything before - (space-dash-space) is the quote
• Everything after - is the author
• End with .jpg
• Optional: Add ?theme=ThemeName at the very end of the URL to use a specific theme (defaults to Theme1, which is currently the only theme)

• /Every dog has its day - Arnold Mueller.jpg
• /The only way to do great work is to love what you do - Steve Jobs.jpg?theme=Theme1
• /Be_yourself;_everyone_else_is_already_taken_-_Oscar_Wilde.jpg

npm install
npm run dev

Themes are stored in assets/themes/[theme-name]/ with three files:

1. clean.png - Your base image (the final background)
2. template.png - Same image with colored bounding boxes:
   • #01ff01 (bright green) marks where the quote goes
   • #02ff02 (slightly different green) marks where the author goes
3. [font-name].ttf - Optional custom font (falls back to Times New Roman)

• The system scans template.png for the flag colors (#01FF01 and #02FF02)
• It calculates the bounding box dimensions automatically
• Text is centered and auto-sized to fit perfectly
• The clean image is used for the final output (no green boxes!)