Particle optimized for mobile 🚀

Author: chicio

graphql-types.ts

@@ -258,8 +258,6 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
-  port?: Maybe<Scalars['Int']>;
-  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1011,8 +1009,6 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2187,8 +2183,6 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
-  | 'port'
-  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2290,8 +2284,6 @@ export type SiteGroupConnection = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

src/components/background-fullscreen.tsx

@@ -1,26 +1,19 @@
 import React from "react";
 import Particles from "react-tsparticles";
-import { useIsPowerfulMobileDevice } from "../logic/device";
-import { isDesktop } from "react-device-detect";
 import { useParticlesConfiguration } from "../logic/particles";
 
 export const BackgroundFullScreen: React.FC = () => {
-  const isPowerfulMobileDevice = useIsPowerfulMobileDevice();
   const particlesConfiguration = useParticlesConfiguration();
 
   return (
-    <div>
-      {(isDesktop || isPowerfulMobileDevice) && (
-        <Particles
-          id="tsparticles"
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-          }}
-          options={particlesConfiguration}
-        />
-      )}
-    </div>
+    <Particles
+      id="tsparticles"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+      }}
+      options={particlesConfiguration}
+    />
   );
 };

src/logic/device.ts

@@ -1,14 +1,21 @@
 import { useHardwareConcurrency, useMemoryStatus } from "react-adaptive-hooks";
-import { isMobile } from "react-device-detect";
+import { isDesktop, isIOS, isMobile } from "react-device-detect";
 
 export const useIsPowerfulMobileDevice = () => {
   const { deviceMemory } = useMemoryStatus({ deviceMemory: 1 });
   const { numberOfLogicalProcessors } = useHardwareConcurrency();
 
   return (
-    isMobile &&
-    deviceMemory >= 3 &&
-    numberOfLogicalProcessors != null &&
-    numberOfLogicalProcessors >= 8
+    isIOS ||
+    (isMobile &&
+      deviceMemory >= 4 &&
+      numberOfLogicalProcessors != null &&
+      numberOfLogicalProcessors >= 8)
   );
 };
+
+export const useIsPowerfulDevice = () => {
+  const isPowerfulMobileDevice = useIsPowerfulMobileDevice();
+
+  return isDesktop || isPowerfulMobileDevice;
+};

src/logic/particles.ts

@@ -1,69 +1,75 @@
 import { textAbovePrimaryColor } from "../components/theme";
 import { ISourceOptions } from "tsparticles";
+import { useIsPowerfulDevice } from "./device";
+import { isDesktop, isMobile } from "react-device-detect";
 
-export const useParticlesConfiguration: () => ISourceOptions = () => ({
-  background: {
-    color: {
-      value: "transparent",
-    },
-  },
-  fpsLimit: 60,
-  interactivity: {
-    detectsOn: "canvas",
-    events: {
-      onHover: {
-        enable: true,
-        mode: "repulse",
+export const useParticlesConfiguration: () => ISourceOptions = () => {
+  const isPowerfulDevice = useIsPowerfulDevice();
+
+  return {
+    background: {
+      color: {
+        value: "transparent",
       },
     },
-    modes: {
-      repulse: {
-        distance: 150,
-        duration: 0.5,
+    fpsLimit: isPowerfulDevice ? 60 : 30,
+    interactivity: {
+      detectsOn: "canvas",
+      events: {
+        onHover: {
+          enable: isDesktop,
+          mode: "repulse",
+        },
+      },
+      modes: {
+        repulse: {
+          distance: isMobile ? 100 : 150,
+          duration: 0.5,
+        },
       },
     },
-  },
-  particles: {
-    color: {
-      value: textAbovePrimaryColor,
-    },
-    links: {
-      enable: true,
-      color: textAbovePrimaryColor,
-      blink: true,
-      distance: 150,
-      opacity: 0.5,
-      width: 1,
-    },
-    collisions: {
-      enable: false,
-      mode: "bounce",
-    },
-    move: {
-      direction: "none",
-      enable: true,
-      outMode: "bounce",
-      random: false,
-      speed: 3,
-      straight: false,
-    },
-    number: {
-      density: {
+    particles: {
+      color: {
+        value: textAbovePrimaryColor,
+      },
+      links: {
         enable: true,
-        value_area: 800,
+        color: textAbovePrimaryColor,
+        blink: true,
+        distance: isMobile ? 100 : 150,
+        opacity: 0.5,
+        width: 1,
+      },
+      collisions: {
+        enable: false,
+        mode: "bounce",
+      },
+      move: {
+        direction: "none",
+        enable: true,
+        outMode: "bounce",
+        random: false,
+        speed: 3,
+        straight: false,
+      },
+      number: {
+        density: {
+          enable: true,
+          value_area: 800,
+        },
+        value: 80,
+      },
+      opacity: {
+        value: 0.5,
+      },
+      shape: {
+        type: "circle",
+      },
+      size: {
+        random: true,
+        value: 3,
       },
-      value: 80,
-    },
-    opacity: {
-      value: 0.5,
-    },
-    shape: {
-      type: "circle",
-    },
-    size: {
-      random: true,
-      value: 3,
     },
-  },
-  detectRetina: true,
-});
+    detectRetina: true,
+  };
+};

src/posts/2017-08-25-how-to-calculate-reflection-vector.md

@@ -1,4 +1,3 @@
-
 ---
 title: "How to calculate the reflection vector"
 description: "In this post I will talk about reflection vector used in some lighting models, for example the Phong