PERSONALISED GREETING CARDS
Full-stack & Growth
Global FMCG Brand
Media.Monks
Full-stack engineering
A festival microsite that generates a personalised animated GIF greeting card on the fly. A visitor types their name, gets a beautiful branded card with their name in it, and shares it in one tap - and every one of those cards is rendered on the server, per request, with no designer in the loop.
Project Overview
Festival greetings are the most shared content of the year. If a brand can put a genuinely nice, personalised card in people's hands, it rides that wave for free. The challenge is personalisation without a production line - you cannot pre-design a card for every name in the country, so the card has to be composited live, and it has to feel instant.
The Challenge
- 01 Unlimited personalisation, fixed effort - any name, any element combination, from one system
- 02 GIF encoding is heavy - do it wrong and users stare at a spinner and leave
- 03 It has to look designed, not generated - burned-in text in a low-colour GIF goes ugly fast
- 04 The creative had to earn its keep - a card that also captures a lead and spreads itself
The Approach
Render on the server, not the phone
The card is composited with node-canvas on the server, not in the browser. That gives consistent output on every device, protects the brand's fonts and assets, and keeps heavy GIF encoding off the user's phone. The endpoint draws frames, registers the brand font, places the name, and encodes a looping GIF over the festival animation.
Crisp type in a low-colour format
To stop names looking jagged inside a GIF's limited palette, the text is rendered on a 2x retina canvas and downscaled. We also traded GIF fidelity for speed with a lower encoder quality setting that a user never notices but that shaves real time off every render - at scale, that latency is the whole experience.
The creative is the funnel
The "make your card" hook is also a first-party data capture - name, phone and email flow into a PocketBase backend as leads. The finished card shares in one tap through the native share sheet, with a graceful fallback, and a QR code ties on-pack and offline placements straight into the web experience.
Technical Architecture
Rendering & Delivery
- Next.js (Node runtime) API route
- node-canvas + gif-encoder-2
- Vercel Blob storage
- Web Share API with fallback
Data & Growth
- PocketBase lead capture
- QR code for offline-to-web
- Multi-step validated flow
- Native share loop
Key Results
Unlimited
Zero
Lessons Learned
The best campaign tech does two jobs at once. This looks like a fun greeting card. Underneath, it is a personalisation engine, a data capture, and a distribution loop stacked into one page.
Dynamic server-side image generation is an underrated marketing primitive. Once you can composite any visual on demand, personalisation stops being a content cost and becomes a feature you just turn on.