foundry-component-library 0.2.9 → 0.2.12

package/lib/components/ServiceHubsTeaserEffects/glass/Lens.tsx

@@ -0,0 +1,75 @@
+import * as THREE from "three";
+import { useRef, useState } from "react";
+import { createPortal, useFrame, useThree } from "@react-three/fiber";
+import { useFBO, useGLTF, MeshTransmissionMaterial } from "@react-three/drei";
+import { easing } from "maath";
+
+const Lens = ({
+  children,
+  damping = 0.2,
+  ...props
+}: {
+  children: React.ReactNode;
+  damping?: number;
+  [key: string]: any;
+}) => {
+  const ref = useRef<THREE.Mesh>(null);
+  const { nodes }: { nodes: any } = useGLTF("/lens-transformed.glb");
+  const buffer = useFBO();
+  const viewport = useThree((state) => state.viewport);
+  const [scene] = useState(() => new THREE.Scene());
+  useFrame((state, delta) => {
+    if (!ref.current) return;
+    // Tie lens to the pointer
+    // getCurrentViewport gives us the width & height that would fill the screen in threejs units
+    // By giving it a target coordinate we can offset these bounds, for instance width/height for a plane that
+    // sits 15 units from 0/0/0 towards the camera (which is where the lens is)
+    const viewport = state.viewport.getCurrentViewport(
+      state.camera,
+      [0, 0, 15]
+    );
+    easing.damp3(
+      ref.current.position,
+      [
+        (state.pointer.x * viewport.width) / 2,
+        (state.pointer.y * viewport.height) / 2,
+        15,
+      ],
+      damping,
+      delta
+    );
+    // This is entirely optional but spares us one extra render of the scene
+    // The createPortal below will mount the children of <Lens> into the new THREE.Scene above
+    // The following code will render that scene into a buffer, whose texture will then be fed into
+    // a plane spanning the full screen and the lens transmission material
+    state.gl.setRenderTarget(buffer);
+    state.gl.setClearColor("#f197f4");
+    state.gl.render(scene, state.camera);
+    state.gl.setRenderTarget(null);
+  });
+  return (
+    <>
+      {createPortal(children, scene)}
+      <mesh scale={[viewport.width, viewport.height, 1]}>
+        <planeGeometry />
+        <meshBasicMaterial map={buffer.texture} />
+      </mesh>
+      <mesh
+        scale={0.25}
+        ref={ref}
+        rotation-x={Math.PI / 2}
+        geometry={nodes.Cylinder.geometry}
+        {...props}>
+        <MeshTransmissionMaterial
+          buffer={buffer.texture}
+          ior={1.2}
+          thickness={1.5}
+          anisotropy={0.1}
+          chromaticAberration={0.02}
+        />
+      </mesh>
+    </>
+  );
+};
+
+export default Lens;

package/lib/components/ServiceHubsTeaserEffects/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { useRef } from "react";
+import Container from "../Container";
+import styles from "./styles.module.scss";
+import TextSection from "../TextSection";
+import TileGlass from "./TileGlass";
+import TileBalls from "./TileBalls";
+import TileRays from "./TileRays";
+import TileFluid from "./TileFluid";
+import { NextLink } from "../../types";
+
+const ServiceHubsTeaserEffects = ({
+  caption,
+  heading,
+  text,
+  tiles,
+  Link,
+}: {
+  caption: string;
+  heading: string;
+  text: string;
+  tiles: {
+    id: string;
+    uri: string;
+    title: string;
+    customFieldsHub: {
+      heading: string;
+    };
+  }[];
+  Link: NextLink;
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={styles.benefits}>
+      <TextSection caption={caption} heading={heading} text={text} isSmall />
+      <Container noMobilePadding>
+        <div className={styles.wrapper} ref={wrapperRef}>
+          <div className={styles.tiles}>
+            {tiles.map((tile, i) => {
+              const colors: Array<"pink" | "yellow" | "brown" | "blue"> = [
+                "pink",
+                "yellow",
+                "brown",
+                "blue",
+              ];
+              const background = colors[i % colors.length];
+
+              return (
+                <Link
+                  href={tile.uri}
+                  className={styles.tileWrapper}
+                  key={tile.id}>
+                  <div className={`${styles.tile} ${styles[background]}`}>
+                    {i === 0 && <TileGlass />}
+                    {i === 1 && <TileFluid />}
+                    {i === 2 && <TileRays />}
+                    {i === 3 && <TileBalls />}
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ServiceHubsTeaserEffects;

package/lib/components/ServiceHubsTeaserEffects/rays/LightSource.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import noise from "./noise";
+
+export function LightSource(props: React.ComponentProps<"mesh">) {
+  const meshRef = useRef(null);
+
+  // shared time uniform
+  const time = useMemo(() => ({ value: 0 }), []);
+
+  const material = useMemo(() => {
+    const m = new THREE.MeshBasicMaterial({
+      color: 0xf197f4,
+      transparent: true,
+    } as any);
+
+    (m as any).onBeforeCompile = (shader: any) => {
+      shader.uniforms.time = time;
+
+      shader.fragmentShader = `
+        uniform float time;
+        ${shader.fragmentShader}
+      `
+        .replace(
+          `void main() {`,
+          `
+          ${noise}
+          void main() {
+        `
+        )
+        .replace(
+          `vec4 diffuseColor = vec4( diffuse, opacity );`,
+          `
+          vec2 uv = vUv - 0.5;
+          vec3 col = vec3(0.0);
+
+          float f = smoothstep(0.5, 0.0, length(uv));
+          f = pow(f, 4.0);
+
+          float n = snoise(vec3(uv * 7.0, time)) * 0.5 + 0.5;
+          n = n * 0.5 + 0.5;
+
+          col = mix(col, diffuse, f * n);
+          vec4 diffuseColor = vec4(col, opacity);
+        `
+        );
+    };
+
+    m.defines = { USE_UV: "" };
+    return m;
+  }, [time]);
+
+  useFrame((_, delta) => {
+    time.value += delta;
+  });
+
+  return (
+    <mesh ref={meshRef} material={material} {...props}>
+      <circleGeometry args={[50, 64]} />
+    </mesh>
+  );
+}

package/lib/components/ServiceHubsTeaserEffects/rays/noise.js

@@ -0,0 +1,97 @@
+const noise = `
+vec4 permute(vec4 x) {
+  return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec3 fade(vec3 t) {
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float snoise(vec3 v) {
+  const vec2  C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod(i, 289.0);
+  vec4 p = permute(
+    permute(
+      permute(
+        i.z + vec4(0.0, i1.z, i2.z, 1.0)
+      ) + i.y + vec4(0.0, i1.y, i2.y, 1.0)
+    ) + i.x + vec4(0.0, i1.x, i2.x, 1.0)
+  );
+
+  float n_ = 1.0 / 7.0;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(
+    vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3))
+  );
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(
+    0.6 - vec4(
+      dot(x0, x0),
+      dot(x1, x1),
+      dot(x2, x2),
+      dot(x3, x3)
+    ),
+    0.0
+  );
+  m = m * m;
+
+  return 42.0 *
+    dot(
+      m * m,
+      vec4(
+        dot(p0, x0),
+        dot(p1, x1),
+        dot(p2, x2),
+        dot(p3, x3)
+      )
+    );
+}
+`;
+
+export default noise;

package/lib/components/ServiceHubsTeaserEffects/styles.module.scss

@@ -0,0 +1,135 @@
+@use "../variables" as *;
+
+.benefits {
+  overflow: hidden;
+}
+
+.wrapper {
+  width: 100%;
+  // overflow-x: scroll;
+  user-select: none;
+}
+
+.tiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
+}
+
+.tileWrapper {
+  z-index: 0;
+  position: relative;
+  width: calc(25% - 12px);
+  max-width: 100%;
+  height: 351px;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  @media screen and (max-width: $screen-sm) {
+    max-width: 80%;
+    height: 300px;
+  }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
+  }
+}
+
+.tile {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: $color-pink;
+  color: $color-brown;
+  font-size: 25px;
+  width: 100%;
+  height: 100%;
+  font-family: $font-secondary;
+
+  path {
+    stroke: $color-brown;
+  }
+
+  &.yellow {
+    background-color: $color-yellow;
+    color: $color-blue;
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  &.brown {
+    background-color: $color-brown;
+    color: $color-pink;
+
+    path {
+      stroke: $color-pink;
+    }
+  }
+
+  &.blue {
+    background-color: $color-blue;
+    color: $color-white;
+
+    path {
+      stroke: $color-white;
+    }
+  }
+
+  // &:hover {
+  //   .face {
+  //     display: none;
+  //   }
+
+  //   .tails {
+  //     display: block;
+  //   }
+  // }
+}
+
+.text {
+  margin-bottom: 42px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.face {
+  display: block;
+  font-size: 35px;
+}
+
+// .tails {
+//   text-align: left;
+//   padding-left: 30px;
+//   display: none;
+//   font-size: 21px;
+//   font-family: $font-secondary;
+// }
+
+// .tailsText {
+//   margin-bottom: 30px;
+// }

package/lib/index.ts

@@ -31,6 +31,7 @@ import OfficesTeaser from "./components/OfficesTeaser";
 import PartnerNetwork from "./components/PartnerNetwork";
 import QuoteSection from "./components/QuoteSection";
 import ServiceHubsTeaser from "./components/ServiceHubsTeaser";
+import ServiceHubsTeaserEffects from "./components/ServiceHubsTeaserEffects";
 import PostContent from "./components/single/Content";
 import PostTop from "./components/single/Top";
 import TeamBenefits from "./components/TeamBenefits";
@@ -74,6 +75,7 @@ export {
   PartnerNetwork,
   QuoteSection,
   ServiceHubsTeaser,
+  ServiceHubsTeaserEffects,
   PostContent,
   PostTop,
   TeamBenefits,

package/lib/types/glsl.d.ts

@@ -0,0 +1,14 @@
+declare module "*.frag?raw" {
+  const source: string;
+  export default source;
+}
+
+declare module "*.vert?raw" {
+  const source: string;
+  export default source;
+}
+
+declare module "*.glsl?raw" {
+  const source: string;
+  export default source;
+}

package/lib/vite-env.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+
+declare module "*.frag" {
+  const source: string;
+  export default source;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.2.9",
+  "version": "0.2.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -63,6 +63,10 @@
     "**/*.css"
   ],
   "dependencies": {
-    "graphql-request": "^7.1.2"
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.2",
+    "@react-three/postprocessing": "^3.0.4",
+    "graphql-request": "^7.1.2",
+    "three": "^0.182.0"
   }
 }