Publish web_embedding (#1777)

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md


Co-authored-by: Mark Thompson
<2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

web_embedding/element_embedding_demo/web/js/demo-css-fx.js

@@ -0,0 +1,82 @@
+// Manages toggling the VFX of the buttons
+(function () {
+  "use strict";
+
+  let handheld;
+
+  let fxButtons = document.querySelector("#fx");
+  let flutterTarget = document.querySelector("#flutter_target");
+
+  let attribution = document.createElement("span");
+  attribution.className = "imageAttribution";
+  attribution.innerHTML = "Photo by <a href='https://unsplash.com/photos/x9WGMWwp1NM' rel='noopener noreferrer' target='_blank'>Nathana Rebouças</a> on Unsplash";
+
+  // (Re)moves the flutterTarget inside a div#handheld.
+  function handleHandHeld(fx) {
+    resetRotation();
+    if (!handheld) {
+      handheld = document.createElement("div");
+      handheld.id = "handheld";
+      handheld.classList.add("hidden");
+      // Inject before the flutterTarget
+      flutterTarget.parentNode.insertBefore(handheld, flutterTarget);
+      handheld.append(flutterTarget);
+      handheld.append(attribution);
+      window.setTimeout(function () {
+        handheld.classList.remove("hidden");
+      }, 100);
+      // Disable all effects on the flutter container
+      flutterTarget.className = "";
+      setOtherFxEnabled(false);
+    } else {
+      handheld.classList.add("hidden");
+      window.setTimeout(function () {
+        handheld.parentNode.insertBefore(flutterTarget, handheld);
+        handheld.remove();
+        handheld = null;
+      }, 210);
+      setOtherFxEnabled(true);
+    }
+    window.requestAnimationFrame(function () {
+      // Let the browser flush the DOM...
+      flutterTarget.classList.toggle(fx);
+    });
+  }
+
+  // Sets a rotation style on the flutterTarget (in degrees).
+  function handleRotation(degrees) {
+    flutterTarget.style.transform = `perspective(1000px) rotateY(${degrees}deg)`;
+  }
+
+  // Removes the inline style from the flutterTarget.
+  function resetRotation() {
+    flutterTarget.style = null;
+  }
+
+  // Enables/disables the buttons that are not compatible with the "handheld" mode.
+  function setOtherFxEnabled(enabled) {
+    fxButtons.querySelectorAll('input').forEach((btn) => {
+      if (btn.dataset.fx != 'handheld') {
+        btn.classList.toggle('disabled', !enabled);
+      }
+    });
+  }
+
+  // Handles clicks on the buttons inside #fx.
+  fxButtons.addEventListener("click", (event) => {
+    let fx = event.target.dataset.fx;
+    if (fx === "handheld") {
+      handleHandHeld(fx);
+      return;
+    }
+    flutterTarget.classList.toggle(fx);
+  });
+
+  fxButtons.addEventListener("input", (event) => {
+    if (event.target.id === "rotation") {
+      flutterTarget.classList.toggle("spin", false);
+      handleRotation(event.target.value);
+    }
+  })
+
+})();