Initial commit

src/components/Controls.module.css

@@ -0,0 +1,72 @@
+.Controls {
+  position: fixed;
+  background: var(--clr-bg-secondary);
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 18px;
+  border-radius: 12px;
+  width: 64px;
+  height: 200px;
+}
+
+.controlsWrapper, .gooWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.gooWrapper {
+  filter: url('#goo');
+}
+
+.control, .blob {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 36px);
+  height: auto;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.control > img {
+  width: 100%;
+}
+
+.blob {
+  background: var(--clr-bg);
+  border-radius: 16px;
+  aspect-ratio: 1/1;
+  transition: all .5s;
+  width: 0;
+  height: 0;
+}
+
+.selected {
+  width: 64px;
+  height: 64px;
+}
+
+.control:nth-child(1), .blob:nth-child(1) {
+  top: 60px;
+}
+
+.control:nth-child(2), .blob:nth-child(2) {
+  top: 120px;
+}
+
+.control:nth-child(3), .blob:nth-child(3) {
+  top: 180px;
+}