Greetonata

A greeting card that draws itself and sings. AI writes the words, the words shape the art and the melody, and PayPal carries a real gift inside.

Comment

Inspiration

I'm an emergency physician, and in my free time I make music and small creative web apps. Digital greeting cards always felt the same to me: a stock picture, a stock tune, and a message that could have been sent to anyone. I wanted a card where the message itself becomes the art, where the recipient's own name is turned into music, and where a real gift arrives with it, the way an envelope with a little cash inside does in real life.

What it does

Greetonata (greeting + sonata) turns a short message into a one-of-a-kind card.

  1. Pick an occasion: birthday, celebration, Christmas & New Year, or thank you.
  2. Tell it who the card is for: names, how you know each other, a detail or two.
  3. AI writes three drafts in different moods (warm, playful, festive). With each draft it also picks the key words, a colour palette and an energy level. You choose one and edit it freely.
  4. The card comes alive: the message is drawn stroke by stroke as a cake, a flower, a snowflake or a heart, while a piano melody plays and each word lights up as it is sung.
  5. Pay with PayPal: the card costs $2.99, and you can tuck a $10, $20 or $50 gift inside. One PayPal order covers both.
  6. Send the private link. The recipient opens a sealed envelope with their name on it, taps the wax seal, watches and hears the card, blows out the candles, and claims the gift to their PayPal account. The card shows the real payout status until the money arrives.

What makes each card unique

  • No stock images. The drawing is generated from a fingerprint of the message. A birthday cake even reads the age from the text and shows it as number candles.
  • No stock tunes. Every letter of a name becomes a note: a musical cipher in the spirit of Bach's B-A-C-H. The tune opens with the recipient's name and closes with the sender's, so Ana and Maja get different melodies.
  • The AI shapes the art, not only the text. Key words glow and ring louder, the palette tints the drawing, and the energy sets the tempo.
  • Same message, same card. Nothing is random, so the recipient sees and hears exactly what the sender did.

How I built it

  • Front end: plain HTML, CSS and JavaScript, with no framework and no build step. A shared card engine (shapes.js, music.js, draw.js) runs on both the sender's and the recipient's page.
  • Drawing: Canvas 2D. Each shape is built from the text's fingerprint (letters, length, rhythm of words) and painted over time, in sync with the music.
  • Music: Web Audio API with real grand piano recordings (Salamander Grand Piano, CC BY 3.0). The composer uses hand-written phrases in waltz or 4/4 time, places the name letters on them, and moves notes on strong beats to chord tones so the names always sound like part of a song.
  • AI: Groq (Llama 3.3 70B) writes the drafts and returns key words, a palette and an energy level as JSON. The server validates everything: key words must appear in the text, colours must be valid, energy stays between 1 and 5. If the AI fails, the card still works from the text alone.
  • Payments: PayPal Orders v2 for checkout, with prices calculated only on the server and the captured amount checked against the order. PayPal Payouts v1 sends the gift, with a lock and a sender_batch_id per card so a gift can never be paid twice. The payout status is tracked until it is final.
  • Back end: Cloudflare Pages Functions and Cloudflare KV. Cards are stored under private ids, and link previews show the recipient's name and an occasion image.
  • Quality: rate limits on every API route, 14 automated tests (with fake PayPal, Groq and KV), and accessibility support: spoken descriptions of each drawing, a keyboard-friendly candle button, and a reduced-motion mode.

Challenges I ran into

  • Making names sound like music. Turning letters into notes is easy; making the result sound like a song is not. The answer was a fixed rhythm from hand-written phrases, octave choices that keep the line smooth, and chord tones on strong beats.
  • Keeping drawing, words and melody in sync on every phone, from the first note to the last candle.
  • Making money flows safe. One payment must never create two cards, and a gift must never be paid twice, even if someone taps twice or reloads the page.
  • Showing real payout status instead of a guess: "on its way", "waiting in PayPal", "arrived" or "returned to the sender".
  • Browser differences. For example, iPhone Safari displayed some symbols as emoji and laid out the occasion cards differently, so both needed fixes.

Accomplishments that I'm proud of

  • The whole flow works end to end on a real phone: AI drafts, PayPal payment, private link, envelope, music, candles, and a gift that really lands in the recipient's PayPal sandbox account.
  • Every card is generated, not chosen from a gallery, yet it stays reproducible: the same words always give the same card.
  • It's all done without a framework or a build step, and with automated tests for the money paths.

What I learned

  • How PayPal Orders and Payouts fit together into one experience, one flow to pay and one to give, and how to make both idempotent.
  • How to schedule music precisely with the Web Audio API and draw in sync with it.
  • That AI is most interesting when it acts as a creative director, choosing words, colours and energy that shape the art, and not only as a text writer.

What's next for Greetonata

  • More occasions and more languages for the drafts.
  • Scheduled delivery, so a birthday card arrives exactly on the morning of the birthday.
  • Group cards, where several people add to one gift.
  • Saving a card as a short video keepsake.
  • Moving from the PayPal sandbox to live payments.ration

Built With

Share this project:

Updates

Submission history