Welcome to part two of my mini-series! This little app demonstrates how one can change the payment pointer based on what is in focus on a webpage, making use of the Intersection Observer. But let's take a step back first.
What is Web Monetization really about? What fascinates me about it is that it allows for an alternative business model for the web. Instead of platforms being the only players benefiting from content, consumers stream micropayments to content creators, for example with the help of a Coil membership and extension. Social media platforms could offer their services without selling advertisement space by introducing a revenue sharing scheme, for example probabilistic revenue sharing.
For this demo, created on Glitch, I didn't go as far as probabilistic revenue sharing, I didn't even create a platform. I created a static page that shows images, just like Instagram but not as pretty. While you scroll through the gallery, different images come into focus. As soon as 75% of an image are in focus, the Intersection Observer picks up the payment pointer that is included in the HTML wrapping the image and changes the content of the monetization meta-tag. Since the demo images are taken from unsplash, the micropayments are streamed to charity.
A longer article about this demo, including a video, can be found on Coil's blog.
This demo could easily be converted into a platform, where users can post images together with their payment pointers. If an image is exclusive, it could be blurred out for users who don't have Web Monetization enabled. That way, there is no censorship. The platform creator can decide whether they ask for a payment to host the image or they implement probabilistic revenue sharing, which is a fun project on its own.
I'm curious to hear about and see implementations of other ideas using the Intersection Observer together with Web Monetization.
Top comments (0)