Add glitch to homepage (#542)

app/web/package.json

@@ -19,6 +19,7 @@
     "@monaco-editor/react": "^4.0.11",
     "@react-three/drei": "^7.3.1",
     "@react-three/fiber": "^7.0.5",
+    "@react-three/postprocessing": "^2.0.5",
     "@redwoodjs/auth": "^0.36.4",
     "@redwoodjs/forms": "^0.36.4",
     "@redwoodjs/router": "^0.36.4",
@@ -61,4 +62,4 @@
     "raw-loader": "^4.0.2",
     "tailwindcss": "^2.2.7"
   }
-}
+}

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

app/yarn.lock

@@ -2740,6 +2740,14 @@
     utility-types "^3.10.0"
     zustand "^3.5.1"
 
+"@react-three/postprocessing@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-2.0.5.tgz#9c30e14e0766f9ceee33740682a9fcdd2cfe785a"
+  integrity sha512-0o4NjYXpqfbW03fpB2WuWA2FApoafwvqhDI2Ca1Weljbo3d/Uy3XUBB8WyZU3zWIAQbg7SzU/d03wpFSGzWzJQ==
+  dependencies:
+    postprocessing "^6.22.2"
+    react-merge-refs "^1.1.0"
+
 "@redwoodjs/api-server@0.36.4":
   version "0.36.4"
   resolved "https://registry.yarnpkg.com/@redwoodjs/api-server/-/api-server-0.36.4.tgz#eaf517a4f6253f8fa1b363de2bc0bac36ab2a361"
@@ -14916,6 +14924,11 @@ postcss@^8.2.15, postcss@^8.3.5, postcss@^8.3.6:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+postprocessing@^6.22.2:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.23.0.tgz#3d84df55a936ab5ccd94fb7755dd634cad66cd88"
+  integrity sha512-gih7Pq6C60fX6TeFLig5mPZVNG0PWG0YO2rjvmeV44WpNLWEMPe4dNx2s6uhs14CI9OkyDWVGhdLnMSF6h66BQ==
+
 potpack@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz"