Save the Date is a premium interactive digital invitation built with React, TypeScript, HTML5 Canvas, and Web Audio API thinking. It turns a familiar scratch-card mechanic into a high-fidelity frontend experience.
The original concept uses procedural foil-style texturing and mathematical masking to hide the event information until the user clears enough of the surface. In this portfolio page, the supporting visuals are adapted into the D’SEIKOU palette, while the case study still explains the underlying creative-coding idea.
The interaction depends on precise pointer tracking rather than a simple click. The app follows mouse and touch movement, updates a canvas mask in real time, and measures the cleared area through pixel-level alpha data. Once the reveal passes the completion threshold, the app transitions into a reward state.
That reward state gives the project its sense of completion: particle bursts, delayed CTA reveal, background audio sync, and a client-side iCalendar file so the user can add the event to their calendar.
- Core purpose: reveal event details through a tactile scratch-card interaction.
- Frontend layer: React, TypeScript, canvas rendering, pointer events, and client-side export logic.
- Interaction layer: scratch tracking, clearance threshold, reward animation, audio sync, and calendar CTA.
- Experience layer: mobile-friendly gestures, polished reveal pacing, and a memorable event announcement flow.
