Dear Flower
A web app for making digital flower bouquets with handwritten letters and sending them to friends.
Overview
Create and share digital bouquets with friends
Dear Flower lets you pick flowers, choose a wrapper, arrange your own bouquet, and write a handwritten letter to go with it. You send it as a link, and when the other person opens it, they see a sealed envelope that opens to reveal the bouquet and letter inside.
I designed and built everything myself: the drag-and-drop canvas, the letter editor, the sharing flow, and the envelope reveal. I wanted making the bouquet to feel like a craft project, not just clicking buttons.
Demo
Full walkthrough — from bouquet creation to delivery
The Experience
Two roles, one gift
The flow is designed around two distinct perspectives — the creator, who arranges and writes, and the recipient, who discovers and unwraps. The handoff between them is intentional.
Arrange
Drag flowers onto canvas
Pick flowers, choose a wrapper, rotate and scale to compose your bouquet. Your draft saves automatically as you go.
Canvas API + drag interactionWrite
Add a personal letter
Type a personal message in a handwritten-style editor. Preview it alongside the bouquet before sending.
Handwritten font renderingShare
Send via unique link
A unique short link is generated for your bouquet. Copy it to send directly, or download the bouquet as an image.
Short URL generator on VercelReceive
Open the envelope
The recipient clicks the link and sees a closed envelope. Clicking it triggers an opening animation that reveals the bouquet and letter inside — building anticipation before the gift appears.
CSS envelope animationUnder the Hood
A lightweight frontend that handles everything client-side
No backend. No database. The app runs entirely in the browser — flower rendering on a Canvas API layer, a handwritten-style letter editor, and a share flow that generates unique short links hosted on Vercel.
Creator Modules
Infrastructure
Design Decisions
Why it works this way
A few decisions that shaped how this project turned out.
Why an envelope reveal instead of just loading the bouquet?
The envelope-opening moment creates a deliberate pause before the gift appears. It mirrors the physical experience of unwrapping — building anticipation makes the reveal more meaningful than an instant page load.
Why Canvas API instead of DOM elements for flowers?
Flowers need free-form positioning, rotation, and scaling. Canvas gives precise control over compositing and z-ordering without fighting CSS layout. It also makes exporting the bouquet as an image trivial.
Why separate creator and recipient experiences entirely?
The creator needs tools and controls. The recipient needs a moment of delight. Combining them would compromise both. The shareable link is a natural dividing line between the two.
Why no backend or user accounts?
Dear Flower is about a single gift-giving moment, not an ongoing relationship with the app. Keeping it serverless reduces complexity, makes deployment instant via Vercel, and means the bouquet data lives entirely in the URL.