## Summary

This is an internal tool that will be used to quickly customize and generate new blobs for the landing page, and various marketing collateral

## Scope

- The GUI must allow the user to create unique custom blobs. Some ideas for different parameters:
- **Color*** - Light/Material (I don’t think the materials need to be locked to our brand colors, however, it should be easy to configure those as like a preset value if possible so that the user doesn’t have to figure out what the rgb/hsl value is for the polywrap green, for instance.
- **Shape* -** Ideally it is possible to generate a good range of shapes with the generator. I think you’ll have a better idea about how to go about this, but if you’re going the metaball approach, it might just be a matter of randomizing the position and number of those.
- **Orbit Control*** - I think this should be a sensible default that works in almost all cases, but it would be nice to have a simple way to adjust it when needed.
- **Emission*** - This can be really simple, but it would be good to have some kind of emission amount in the gui so that we can control whether it’s glowing or not. The light should be the same color as the material (selected above).
- **Physics Constrain** - This one is a nice-to-have, but it would be great if there were a way to constrain the shape to a sphere (ideally one that we can exclude from the render/viewport) and potentially a few other simple shapes (cube, pyramid). The sphere would definitely be priority here though.
- **Lighting Direction** - This should also be a sensible default that works in almost all cases, but having some way of rotating the light would be nice. Low priority.
- ******************Movement****************** - Another nice to have, but if there’s some way to configure animation speed, movement amount, that would be great, but I realize this would be probably difficult in a GUI.
- ************Shadow************ - It might be nice to have the ability to show/hide shadows if those are in the canvas. This is low priority.
- **Others?** - You’ll have a better idea of what’s possible and what feels interesting to configure. The above are off the top of my head, but if you have other ideas, please feel free to run with them.
- The canvas must be exportable as a flat file with a transparent bg (.png) as well as a webgl canvas that could be included inline in a website.
- The final code should be editable by us so if we want to go under the hood and tweak a specific value or add a new quality to the blob, we can maintain it ourselves.
- In terms of code, ideally it would be based on react-three-fibre and drei, as those seem to be the simplest for maintaining, but if those don’t work or will for some reason take you longer, feel free to just use what you’re used to.

## Notes

- As mentioned, this is for internal use only, so it doesn’t have to be super polished.
- It might be nice to have kind of “random” button, or just have the parameters randomize on refresh to make it simple for folks to just tap until it looks decent.
- The material is still TBD, and ultimately, I’d just love to see what you come up with. Based on the quick explorations I did with the [polywrap lab](https://github.com/polywrap/lab) the lower roughness and slight bit of metal seemed to work pretty nice, but I’ll leave this in your court. The one thing I will say here is that it’s better to have the more saturated colors available, so if a certain material parameter impedes that, it’s better to prioritize something that allows for a more saturated color.
- You’ll see that there are a wide range of different blobs used in the landing page mockup currently. This was mostly just for exploration, and since I knew they’d be redone in three.js, I didn’t spend time refining or standardizing. In general, I feel like the blobs with the more “metaball” shape are better and more appropriate than the ones where they look more like separate bubbles clumped together.
- At some point, it might be nice to add the "metaverse" background as a potential background environment in the export, but for now, we don't need to worry about it.
- The color palette can be found here: https://www.figma.com/file/WKB2YLmywAJfN04K5JmTVW/Polywrap---Design-System?node-id=7%3A7574&t=fB20tl1XseFkNvmq-1