Add glitch to homepage (#542)

app/web/src/components/EditorMenu/helpers.ts

@@ -3,6 +3,7 @@ import { fileSave } from 'browser-fs-access'
 import { MeshBasicMaterial, Mesh, Scene } from 'three'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter'
 import { requestRender, State } from 'src/helpers/hooks/useIdeState'
+import { toast } from '@redwoodjs/web/toast'
 
 export const PullTitleFromFirstLine = (code = '') => {
   const firstLine = code.split('\n').filter(identity)[0] || ''
@@ -53,6 +54,7 @@ export const makeStlDownloadHandler =
         extensions: ['.stl'],
       })
     }
+    toast("CadHub is a work in process and We're still working out kinks with the STL download.")
     if (geometry) {
       if (
         type === 'geometry' &&

app/web/src/components/Hero/AssetWithGooey.tsx

@@ -5,6 +5,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
 import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
 import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
+import { Glitch, EffectComposer } from "@react-three/postprocessing";
 
 const thresholdAngle = 10
 export default function AssetWithGooey({
@@ -38,6 +39,14 @@ export default function AssetWithGooey({
   })
   return (
     <group dispose={null} ref={edgeRef} position={position}>
+      <EffectComposer>
+        <Glitch
+          delay={[1, 5]} // min and max glitch delay
+          duration={[0.2, 0.4]} // min and max glitch duration
+          strength={[0.05, 0.1]} // min and max glitch strength
+          ratio={0.95} // Threshold for strong glitches, 0 - no weak glitches, 1 - no strong glitches.
+        />
+      </EffectComposer>
       <group ref={coffeeRef}>
         <mesh ref={mesh} scale={scaleArr} geometry={geo}>
           <meshPhysicalMaterial