fireflies

efdevcon · Jan 2, 2024 · 99921f0 · 99921f0
1 parent 54aac40
commit 99921f0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/devcon/src/components/common/page-hero/PageHero.tsx b/devcon/src/components/common/page-hero/PageHero.tsx
@@ -103,6 +103,8 @@ export const PageHero = (props: PageHeroProps) => {
   if (props.background) {
     style.backgroundImage = `url(${props.background})`
     style.backgroundSize = 'cover'
+    style['-webkit-mask-image'] =
+      '-webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))'
   }
 
   let className = `${css['hero']} margin-bottom`
@@ -145,13 +147,12 @@ export const PageHero = (props: PageHeroProps) => {
 
   return (
     <div id="page-hero" className={className} style={style}>
-      {/* {props.heroBackground && (
-        <div className="absolute w-full h-full">
-          <Image className="h-full w-full object-cover" src={props.heroBackground} alt="Hero background"></Image>
-        </div>
-      )} */}
-
-      <div className="section">
+      <div className="section relative h-[50vh]">
+        {/* {props.heroBackground && (
+          <div className="absolute w-full h-full">
+            <Image className="h-full w-full object-contain" src={props.heroBackground} alt="Hero background"></Image>
+          </div>
+        )} */}
         {/* add to section: h-[50vh] <-- for when bg image is set */}
         <div className={css['info']}>
           <PathNavigation {...props} />

diff --git a/devcon/src/components/common/page-hero/page-hero.module.scss b/devcon/src/components/common/page-hero/page-hero.module.scss
@@ -106,6 +106,8 @@
   &.custom-background {
     border-bottom: none;
 
+    mask-image: linear-gradient(from right, black, transparent);
+
     .path {
       // Might be problematic depending on image colors
       color: white;

diff --git a/devcon/src/components/domain/index/hero/dc7/fireflies.js b/devcon/src/components/domain/index/hero/dc7/fireflies.js
@@ -26,11 +26,16 @@ class Animation {
     return canvas
   }
 
+  stop = () => {
+    window.cancelAnimationFrame(this.animationFrameId)
+    window.removeEventListener('resize', this.resize)
+  }
+
   draw = () => {
     var drawer = this.draw.bind(this)
 
     this.redraw()
-    window.requestAnimationFrame(drawer)
+    this.animationFrameId = window.requestAnimationFrame(drawer)
   }
 
   redraw = () => {
@@ -83,7 +88,7 @@ class Firefly {
   }
 
   flicker = () => {
-    if (this.opacity >= 1 || this.opacity <= 0.001) {
+    if (this.opacity >= 1 || this.opacity <= 0.5) {
       this.flare = !this.flare
     }
 
@@ -104,15 +109,18 @@ function setOpacity(color, opacity) {
 
 export const Fireflies = props => {
   React.useEffect(() => {
-    new Animation(`#${props.id}`, {
+    const animation = new Animation(`#${props.id}`, {
       count: 75,
       color: 'rgba(236, 196, 94, 1)',
-      //   color: 'rgba(236, 196, 255, 1)',
       speed: 0.2,
-      radius: 2,
+      radius: 2.5,
       ...props.settings,
     })
 
+    // Cleanup function
+    return () => {
+      animation.stop()
+    }
     // new Animation(`#${props.id}`, {
     //   count: 30,
     //   color: 'rgba(255, 248, 0, 1)',

diff --git a/devcon/src/pages/index.module.scss b/devcon/src/pages/index.module.scss
@@ -151,7 +151,9 @@
 }
 
 .background-text {
-  * {
-    background: rgba(255, 255, 255, 0.7);
-  }
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3)
 }