Transforming a simple display impression into a playful interaction through a lightweight HTML5 scratch card experience.
This interactive display ad reimagines the traditional banner format as a scratch-to-reveal experience. Users can scratch directly with a mouse or finger to uncover hidden campaign content, rewards or promotional messages before continuing to the campaign CTA. The experience was designed to remain lightweight, responsive and intuitive across desktop and mobile devices while preserving the fast loading performance required for digital advertising environments. Interaction logic, reveal progression and CTA behaviour were carefully separated to ensure the experience feels natural without interfering with the campaign click-through journey.
- Natural Scratch Interaction Across DevicesScratch behaviour needed to feel consistent with both finger gestures on mobile and mouse movement on desktop. Pointer and touch input were unified into a single interaction system, with brush size and movement interpolation adjusted to create a smoother and more natural scratching experience.
- Accurate Reveal Percentage DetectionThe experience needed to know when enough of the scratch layer had been removed before revealing the next campaign state. Canvas pixel sampling and reveal thresholds were used to estimate scratched coverage while avoiding expensive calculations on every pointer movement.
- Lightweight Performance for Display AdsInteractive ads operate under tighter asset and loading constraints than standard web pages. Images, scripts and effects were kept lightweight, while unnecessary dependencies and heavy animation were avoided to reduce initial load time and runtime processing.
- Responsive Scratch Area ScalingThe scratch surface had to remain correctly aligned with the underlying reward artwork across different banner dimensions and device pixel ratios. Canvas dimensions, CSS scaling and pointer coordinates were normalized so that the interaction remained accurate after resizing.
- Separating Interaction From Click-ThroughA normal display ad encourages immediate clicking, while a scratch experience requires users to interact first. Scratch gestures and campaign CTA actions were separated to prevent accidental navigation while still providing a clear path to the advertiser's destination once the reveal was complete.
- Clear Progress Without Over-ExplainingUsers needed to understand immediately that the surface could be scratched without adding excessive instructions inside a limited advertising area. Visual texture, micro-copy and subtle interaction feedback were used to communicate the mechanic quickly.
- Reusable Campaign ConfigurationDifferent campaigns may require different background artwork, scratch textures, reward messages and destinations. The experience was structured so these elements can be replaced through configuration rather than rebuilding the scratch interaction for every campaign.
