We Replaced the PDF Proposal with a Live Web Page
PDF proposals have one problem: they're dead on arrival. The client downloads it, maybe reads it, maybe doesn't, and you wait for an email that may never come. You can't tell what landed and what didn't. You can't update it. You don't know if they even got past page two.
For a recent recruitment video project, we tried something different.
The Project
A local fire department needed a cinematic recruitment film to drive hiring. We built a full proposal for the engagement: six scenes, an interview plan, three pricing tiers, a production timeline, and a call to action. Standard stuff in terms of content.
But instead of sending a PDF, we built a standalone proposal page deployed to Vercel.
What the Page Does
Each scene in the storyboard has its own section: a reference image, shot list, interview quote pulled, and timing. Below each one is a "leave a note" button. Click it and a comment form drops in-place. The client can type feedback on Scene 1 (The Alarm), Scene 3 (the staged training burn), the pricing section, or anything else, and it saves directly to a Supabase table.
When they're ready to move forward, there's an approve button at the bottom. They enter their name, confirm, and the approval is recorded. The button turns green. No email chain, no "did you get my message."
We load any existing comments on page init, so if multiple stakeholders are reviewing the proposal at different times, each person sees what the others left. It's not a project management tool. It's just enough collaboration to keep the conversation on the page instead of scattered across inboxes.
The Technical Decisions
The page is plain HTML, CSS, and vanilla JS. No framework, no build step. For a single-page proposal that needs to load fast and not fail, that's the right call. Supabase is pulled in via CDN.
We wrapped the Supabase client in a try/catch and initialized scroll animations first, before anything else. If the Supabase CDN fails, the page still looks great and functions as a readable proposal. The comment and approval features gracefully disable with a console warning. We also added a honeypot field on each comment form to block bot submissions without adding friction for real reviewers.
The storyboard images are AI-generated placeholders that match each scene's visual mood. Rather than a blank image tag or a generic stock photo, each scene has something that actually communicates the intended feel: station interiors, a rig rolling through the dark, smoke and training sequences. It sets the tone in a way bullet points can't.
Scroll animations use IntersectionObserver with a viewport-on-load check so content above the fold reveals immediately instead of waiting for a scroll event that never fires.
Why This Works Better
A proposal page sells itself differently than a PDF. Pricing feels different at tier three of a premium-styled grid than it does as a line item in a table. The storyboard reads like a storyboard. The timeline feels like a timeline.
It also gives us information. We can see if the approval fires. We can see which sections generated comments. A PDF gives us nothing.
We're planning to use this pattern for any engagement where the deliverable is easy to preview visually: video projects, website proposals, design concepts. The setup cost is low once you have the template. Supabase handles the backend with a free tier table, and Vercel deploys in seconds.
If your proposals are sitting unread in inboxes, making them interactive is a straightforward fix.