Hi, this is something I’ve had at the back of my head for at least a year now, but since I don’t seem to ever find the time to implement it, I thought maybe I’d at least share the idea here. Please feel free to run with the idea — I’d love to see it made into an actual webapp.
Background
BlendMode is powerful. It enables a ton of visual effects that would be hard or impossible to make otherwise. Some of them are subtle (like the “wipe” effect below), others can be pure eye candy.
In either case, using blend mode is often also the most performant way to achieve an effect.
Problem
It takes time to internalize, or “grok”, blend mode and its many variants. The API docs provide a nice visualization for each value, but since that visualization needs to show the whole effect of every blendmode with a single non-animated picture, it’s hard to read, and it’s even harder to mentally apply the blend mode to something the developer wants to achieve (the “aha, I can use it to do a wipe!” moment).
This means there are a lot of Flutter engineers who don’t use blend mode, or who only use it in a rote way (copypasta from somewhere, without understanding what’s going on).
Proposal
Build a (web) app that lets people experiment with blend modes. I call this the BlendMode Playground.
Prior art (for CSS):
Ideally, BlendMode Playground would have these features:
- A number of sane picture presets for the background and the foreground. For example,
- For background: a nature photo, a colorful rainbow, a picture with transparency, a light texture, a dark texture.
- For foreground: light text, dark text, white circle with transparency, white circle on black, black circle on white, white-to-black gradient, white-to-transparent gradient, black-to-transparent gradient, red-to-transparent gradient, animated versions of these gradients, Dash with transparency, Dash on black, Dash on white, …
- Ability to quickly switch between blend modes and pictures. Ideally, one-click (so no dropdowns).
- Ability to see several blend modes at once, so people can really internalize the difference between
screenandoverlayandlighten, for example.
If anybody here is looking for a project that could have big reach and impact (even beyond Flutter, to be honest, since blend mode algorithms are everywhere), then I think this is a good prompt. In an ideal world, this would be something the Flutter (DevRel) team provides — but of course that team has limited bandwidth and there’s so much more other work for them that needs to be done and is higher priority.