foundry-component-library 0.2.9 → 0.2.12

package/lib/components/Capabilities/Item.tsx

@@ -20,7 +20,7 @@ const Item = ({
   cases: Case[];
   active: string;
   setActive: Dispatch<SetStateAction<string>>;
-  Link?: typeof LinkType | React.ElementType;
+  Link?: typeof LinkType;
   Image: NextImage;
 }) => {
   const casesRef = useRef<HTMLDivElement>(null);
@@ -75,8 +75,7 @@ const Item = ({
             } else {
               setActive(title);
             }
-          }}
-        >
+          }}>
           {isActive && <span>-</span>}
           {!isActive && <span>+</span>}
         </button>
@@ -100,8 +99,7 @@ const Item = ({
                   overflowX: "auto",
                   scrollbarWidth: "none",
                   msOverflowStyle: "none",
-                }}
-              >
+                }}>
                 {Link &&
                   cases.map((item) => {
                     const { thumbnailImage, mainImage } = item.case;
@@ -112,8 +110,7 @@ const Item = ({
                         key={item.uri}
                         className={styles.case}
                         draggable={false}
-                        onClick={handleClick}
-                      >
+                        onClick={handleClick}>
                         <div className={styles.caseImage}>
                           {Image && (
                             <Image

package/lib/components/Capabilities/index.tsx

@@ -16,7 +16,7 @@ const Capabilities = ({
     text: string;
     cases: Case[];
   }[];
-  Link?: typeof LinkType | React.ElementType;
+  Link?: typeof LinkType;
   Image: NextImage;
 }) => {
   const [active, setActive] = useState("");

package/lib/components/ServiceHubsTeaserEffects/TileBalls.tsx

@@ -0,0 +1,35 @@
+import { Canvas } from "@react-three/fiber";
+import { Environment, Text } from "@react-three/drei";
+import { EffectComposer, N8AO, TiltShift2 } from "@react-three/postprocessing";
+import Bubbles from "./bubbles/Bubbles";
+
+const TileBalls = () => {
+  return (
+    <Canvas
+      shadows
+      dpr={[1, 2]}
+      gl={{ antialias: false }}
+      camera={{ fov: 15, position: [0, 0, 20] }}>
+      <color attach="background" args={["#380de8"]} />
+      <fog attach="fog" args={["red", 20, -5]} />
+      <ambientLight intensity={1.5} />
+      <pointLight position={[10, 10, 10]} intensity={1} castShadow />
+      <Bubbles />
+      <EffectComposer>
+        <N8AO aoRadius={6} intensity={2} color="red" />
+        <TiltShift2 blur={0.1} />
+      </EffectComposer>
+      <Environment preset="city" />
+      <Text
+        position={[0, 0, 0]}
+        fontSize={0.4}
+        textAlign="center"
+        fontWeight={600}
+        color="#fff">
+        Content and{"\n"}Campaigning
+      </Text>
+    </Canvas>
+  );
+};
+
+export default TileBalls;

package/lib/components/ServiceHubsTeaserEffects/TileFluid.tsx

@@ -0,0 +1,29 @@
+import { Text } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { EffectComposer } from "@react-three/postprocessing";
+import { Fluid } from "./fluid/Fluid";
+
+const TileFluid = () => {
+  return (
+    <Canvas
+      style={{
+        height: "100%",
+        width: "100%",
+      }}
+      camera={{ position: [0, 0, 20], fov: 15 }}>
+      <Text
+        position={[0, 0, 0]}
+        fontSize={0.4}
+        textAlign="center"
+        fontWeight={600}
+        color="#380de8">
+        Branding &{"\n"}Corporate ID
+      </Text>
+      <EffectComposer>
+        <Fluid backgroundColor="#fbff00" fluidColor="#380de8" rainbow={true} />
+      </EffectComposer>
+    </Canvas>
+  );
+};
+
+export default TileFluid;

package/lib/components/ServiceHubsTeaserEffects/TileGlass.tsx

@@ -0,0 +1,23 @@
+import { Canvas } from "@react-three/fiber";
+import { Text } from "@react-three/drei";
+import Lens from "./glass/Lens";
+
+const TileGlass = () => {
+  return (
+    <Canvas camera={{ position: [0, 0, 20], fov: 15 }}>
+      <Lens>
+        <Text
+          position={[0, 0, 0]}
+          fontSize={0.4}
+          textAlign="center"
+          fontWeight={600}
+          color="#491b11">
+          Strategy &{"\n"}
+          Positioning
+        </Text>
+      </Lens>
+    </Canvas>
+  );
+};
+
+export default TileGlass;

package/lib/components/ServiceHubsTeaserEffects/TileRays.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useRef } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import { MeshBasicMaterial, DoubleSide, Mesh, Group } from "three";
+import { LightSource } from "./rays/LightSource";
+import {
+  EffectComposer,
+  EffectPass,
+  GodRaysEffect,
+  RenderPass,
+} from "postprocessing";
+
+function Slab({ url }: { url: string }) {
+  const gltf = useGLTF(url);
+  const slabRef = useRef<Group>(null);
+  const { camera, scene, gl } = useThree();
+
+  // GodRays light
+  const lightRef = useRef<Mesh>(null);
+  useFrame(({ pointer }) => {
+    if (lightRef.current) {
+      const LIGHT_RANGE = 5;
+      lightRef.current.position.x = pointer.x * LIGHT_RANGE;
+      lightRef.current.position.y = pointer.y * LIGHT_RANGE;
+    }
+  });
+
+  React.useEffect(() => {
+    if (!gltf) return;
+
+    const slab = gltf.scene;
+    slab.rotation.x = Math.PI / 2;
+
+    slab.traverse((obj) => {
+      if (obj instanceof Mesh) {
+        obj.material = new MeshBasicMaterial({
+          color: 0x491b11,
+          side: DoubleSide,
+        });
+      }
+    });
+
+    if (slabRef.current) {
+      slabRef.current.add(slab);
+    }
+
+    // Setup postprocessing
+    const composer = new EffectComposer(gl);
+    composer.addPass(new RenderPass(scene, camera));
+
+    if (!lightRef.current) return;
+
+    const gre = new GodRaysEffect(camera, lightRef.current, {
+      height: 480,
+      kernelSize: 2,
+      density: 1,
+      decay: 0.8,
+      weight: 0.5,
+      exposure: 0.3,
+      samples: 20,
+      clampMax: 0.95,
+    });
+
+    composer.addPass(new EffectPass(camera, gre));
+
+    // Render loop override
+    // const originalSetAnimationLoop = gl.setAnimationLoop;
+    gl.setAnimationLoop(() => composer.render());
+
+    return () => {
+      // Cleanup
+      // gl.setAnimationLoop(originalSetAnimationLoop);
+      composer.dispose();
+    };
+  }, [gltf, gl, scene, camera]);
+
+  return (
+    <>
+      {/* <mesh ref={lightRef} position={[0, 0, -10]} /> */}
+      <group ref={slabRef} />
+      <LightSource ref={lightRef} position={[0, 0, -20]} />
+    </>
+  );
+}
+
+export default function SlabScene() {
+  return (
+    <Canvas
+      camera={{ fov: 60, position: [0, 0, 10], near: 1, far: 100 }}
+      gl={{ antialias: true, powerPreference: "high-performance" }}>
+      {/* <ambientLight intensity={0.2} /> */}
+      {/* <OrbitControls /> */}
+      <Slab url="/slab-with-text.glb" />
+    </Canvas>
+  );
+}

package/lib/components/ServiceHubsTeaserEffects/bubbles/Bubble.tsx

@@ -0,0 +1,48 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Instance } from "@react-three/drei";
+import type { Mesh } from "three";
+
+const Bubble = ({
+  factor,
+  speed,
+  xFactor,
+  yFactor,
+  zFactor,
+}: {
+  factor: number;
+  speed: number;
+  xFactor: number;
+  yFactor: number;
+  zFactor: number;
+}) => {
+  const ref = useRef<Mesh>(null);
+
+  useFrame((state) => {
+    const t = factor + state.clock.elapsedTime * (speed / 2);
+
+    ref.current!.scale.setScalar(Math.max(1.5, Math.cos(t) * 5));
+
+    ref.current!.position.set(
+      Math.cos(t) +
+        Math.sin(t * 1) / 10 +
+        xFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 1) * factor) / 10,
+      Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        yFactor +
+        Math.sin((t / 10) * factor) +
+        (Math.cos(t * 2) * factor) / 10,
+      Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        zFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 3) * factor) / 4
+    );
+  });
+
+  return <Instance ref={ref} />;
+};
+
+export default Bubble;

package/lib/components/ServiceHubsTeaserEffects/bubbles/Bubbles.tsx

@@ -0,0 +1,45 @@
+import { MathUtils, InstancedMesh } from "three";
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Instances } from "@react-three/drei";
+import Bubble from "./Bubble";
+
+const particles = Array.from({ length: 20 }, () => ({
+  factor: MathUtils.randInt(20, 100),
+  speed: MathUtils.randFloat(0.01, 0.75),
+  xFactor: MathUtils.randFloatSpread(3),
+  yFactor: MathUtils.randFloatSpread(3),
+  zFactor: MathUtils.randFloatSpread(5),
+}));
+
+const Bubbles = () => {
+  const ref = useRef<InstancedMesh>(null);
+
+  useFrame((state, delta) => {
+    if (!ref.current) return;
+
+    ref.current.rotation.y = MathUtils.damp(
+      ref.current.rotation.y,
+      (-state.pointer.x * Math.PI) / 6,
+      2.75,
+      delta
+    );
+  });
+
+  return (
+    <Instances
+      limit={particles.length}
+      ref={ref}
+      castShadow
+      receiveShadow
+      position={[0, 2.5, 0]}>
+      <sphereGeometry args={[0.45, 64, 64]} />
+      <meshStandardMaterial roughness={1} color="#f0f0f0" />
+      {particles.map((data, i) => (
+        <Bubble key={i} {...data} />
+      ))}
+    </Instances>
+  );
+};
+
+export default Bubbles;

package/lib/components/ServiceHubsTeaserEffects/fluid/Fluid.tsx

@@ -0,0 +1,192 @@
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Camera, Color, Mesh, Scene, Texture, Vector2, Vector3 } from 'three';
+import { ShaderPass } from 'three/examples/jsm/Addons.js';
+import { Effect as FluidEffect } from './effect/Fluid';
+import { useFBOs } from './hooks/useFBOs';
+import { useMaterials } from './hooks/useMaterials';
+import { type FluidProps } from './types';
+import { DEFAULT_CONFIG } from './constant';
+import { usePointer } from './hooks/usePointer';
+import { normalizeScreenHz } from './utils';
+
+type MaterialName = keyof ReturnType<typeof useMaterials>;
+type FBONames = keyof ReturnType<typeof useFBOs>;
+
+type Uniforms = {
+    uColor: Vector3 | Color;
+    uPointer: Vector2;
+    uTarget: Texture | null;
+    uVelocity: Texture;
+    uCurl: Texture;
+    uTexture: Texture;
+    uPressure: Texture;
+    uDivergence: Texture;
+    uSource: Texture;
+    uRadius: number;
+    uClearValue: number;
+    uCurlValue: number;
+    uDissipation: number;
+};
+
+export const Fluid = ({
+    blend = DEFAULT_CONFIG.blend,
+    force = DEFAULT_CONFIG.force,
+    radius = DEFAULT_CONFIG.radius,
+    curl = DEFAULT_CONFIG.curl,
+    swirl = DEFAULT_CONFIG.swirl,
+    intensity = DEFAULT_CONFIG.intensity,
+    distortion = DEFAULT_CONFIG.distortion,
+    fluidColor = DEFAULT_CONFIG.fluidColor,
+    backgroundColor = DEFAULT_CONFIG.backgroundColor,
+    showBackground = DEFAULT_CONFIG.showBackground,
+    rainbow = DEFAULT_CONFIG.rainbow,
+    pressure = DEFAULT_CONFIG.pressure,
+    densityDissipation = DEFAULT_CONFIG.densityDissipation,
+    velocityDissipation = DEFAULT_CONFIG.velocityDissipation,
+    blendFunction = DEFAULT_CONFIG.blendFunction,
+}: FluidProps) => {
+    const size = useThree((three) => three.size);
+    const gl = useThree((three) => three.gl);
+
+    const [bufferScene] = useState(() => new Scene());
+    const bufferCamera = useMemo(() => new Camera(), []);
+
+    const meshRef = useRef<Mesh>(null);
+    const postRef = useRef<ShaderPass>(null);
+    const pointerRef = useRef(new Vector2());
+    const colorRef = useRef(new Vector3());
+
+    const FBOs = useFBOs();
+    const materials = useMaterials();
+    const splatStack = usePointer({ force });
+
+    const setShaderMaterial = useCallback(
+        (name: MaterialName) => {
+            if (!meshRef.current) return;
+
+            meshRef.current.material = materials[name];
+            meshRef.current.material.needsUpdate = true;
+        },
+        [materials],
+    );
+
+    const setRenderTarget = useCallback(
+        (name: FBONames) => {
+            const target = FBOs[name];
+
+            if ('write' in target) {
+                gl.setRenderTarget(target.write);
+                gl.clear();
+                gl.render(bufferScene, bufferCamera);
+                target.swap();
+            } else {
+                gl.setRenderTarget(target);
+                gl.clear();
+                gl.render(bufferScene, bufferCamera);
+            }
+        },
+        [bufferCamera, bufferScene, FBOs, gl],
+    );
+
+    const setUniforms = useCallback(
+        <K extends keyof Uniforms>(material: MaterialName, uniform: K, value: Uniforms[K]) => {
+            const mat = materials[material];
+
+            if (mat && mat.uniforms[uniform]) {
+                mat.uniforms[uniform].value = value;
+            }
+        },
+        [materials],
+    );
+
+    useFrame((_, delta) => {
+        if (!meshRef.current || !postRef.current) return;
+
+        for (let i = splatStack.length - 1; i >= 0; i--) {
+            const { mouseX, mouseY, velocityX, velocityY } = splatStack[i];
+
+            pointerRef.current.set(mouseX, mouseY);
+            colorRef.current.set(velocityX, velocityY, 10.0);
+
+            setShaderMaterial('splat');
+            setUniforms('splat', 'uTarget', FBOs.velocity.read.texture);
+            setUniforms('splat', 'uPointer', pointerRef.current);
+            setUniforms('splat', 'uColor', colorRef.current);
+            setUniforms('splat', 'uRadius', radius / 100.0);
+            setRenderTarget('velocity');
+            setUniforms('splat', 'uTarget', FBOs.density.read.texture);
+            setRenderTarget('density');
+
+            splatStack.pop();
+        }
+
+        setShaderMaterial('curl');
+        setUniforms('curl', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('curl');
+
+        setShaderMaterial('vorticity');
+        setUniforms('vorticity', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('vorticity', 'uCurl', FBOs.curl.texture);
+        setUniforms('vorticity', 'uCurlValue', curl);
+        setRenderTarget('velocity');
+
+        setShaderMaterial('divergence');
+        setUniforms('divergence', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('divergence');
+
+        setShaderMaterial('clear');
+        setUniforms('clear', 'uTexture', FBOs.pressure.read.texture);
+        setUniforms('clear', 'uClearValue', normalizeScreenHz(pressure, delta));
+        setRenderTarget('pressure');
+
+        setShaderMaterial('pressure');
+        setUniforms('pressure', 'uDivergence', FBOs.divergence.texture);
+
+        for (let i = 0; i < swirl; i++) {
+            setUniforms('pressure', 'uPressure', FBOs.pressure.read.texture);
+            setRenderTarget('pressure');
+        }
+
+        setShaderMaterial('gradientSubstract');
+        setUniforms('gradientSubstract', 'uPressure', FBOs.pressure.read.texture);
+        setUniforms('gradientSubstract', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('velocity');
+
+        setShaderMaterial('advection');
+        setUniforms('advection', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uSource', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uDissipation', normalizeScreenHz(velocityDissipation, delta));
+
+        setRenderTarget('velocity');
+        setUniforms('advection', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uSource', FBOs.density.read.texture);
+        setUniforms('advection', 'uDissipation', normalizeScreenHz(densityDissipation, delta));
+
+        setRenderTarget('density');
+    });
+
+    return (
+        <>
+            {createPortal(
+                <mesh ref={meshRef} scale={[size.width, size.height, 1]}>
+                    <planeGeometry args={[2, 2]} />
+                </mesh>,
+                bufferScene,
+            )}
+
+            <FluidEffect
+                blendFunction={blendFunction}
+                intensity={intensity}
+                rainbow={rainbow}
+                distortion={distortion}
+                backgroundColor={backgroundColor}
+                blend={blend}
+                fluidColor={fluidColor}
+                showBackground={showBackground}
+                ref={postRef}
+                tFluid={FBOs.density.read.texture}
+            />
+        </>
+    );
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/constant.ts

@@ -0,0 +1,23 @@
+import { BlendFunction } from 'postprocessing';
+
+export const DEFAULT_CONFIG = {
+    blend: 5,
+    intensity: 2,
+    force: 1.1,
+    distortion: 0.4,
+    curl: 1.9,
+    radius: 0.3,
+    swirl: 4,
+    pressure: 0.8,
+    densityDissipation: 0.96,
+    velocityDissipation: 1.0,
+    fluidColor: '#3300ff',
+    backgroundColor: '#070410',
+    showBackground: true,
+    rainbow: false,
+    dyeRes: 512,
+    simRes: 128,
+    blendFunction: BlendFunction.SET,
+} as const;
+
+export const REFRESH_RATE = 60;

package/lib/components/ServiceHubsTeaserEffects/fluid/effect/Fluid.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, useEffect, useMemo } from 'react';
+import { EffectProps } from '../types';
+import { FluidEffect } from './FluidEffect';
+
+export const Effect = forwardRef(function Fluid(props: EffectProps, ref) {
+    // prevent re-creating the effect on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const effect = useMemo(() => new FluidEffect(props), []);
+
+    useEffect(() => {
+        effect.state = { ...props };
+        effect.update();
+    }, [effect, props]);
+
+    useEffect(() => {
+        return () => {
+            effect.dispose?.();
+        };
+    }, [effect]);
+
+    return <primitive ref={ref} object={effect} dispose={null} />;
+});

package/lib/components/ServiceHubsTeaserEffects/fluid/effect/FluidEffect.tsx

@@ -0,0 +1,61 @@
+import { Effect, EffectAttribute } from "postprocessing";
+import { Texture, Uniform, Vector3 } from "three";
+import compositeFrag from "../glsl/composite.frag?raw";
+import { type EffectProps } from "../types";
+import { hexToRgb } from "../utils";
+
+type Uniforms = {
+  tFluid: Texture;
+  uColor: Vector3;
+  uBackgroundColor: Vector3;
+  uRainbow: boolean;
+  uShowBackground: boolean;
+  uDistort: number;
+  uBlend: number;
+  uIntensity: number;
+};
+
+export class FluidEffect extends Effect {
+  state: EffectProps;
+
+  constructor(props: EffectProps) {
+    const uniforms: Record<keyof Uniforms, Uniform> = {
+      tFluid: new Uniform(props.tFluid),
+      uDistort: new Uniform(props.distortion),
+      uRainbow: new Uniform(props.rainbow),
+      uIntensity: new Uniform(props.intensity),
+      uBlend: new Uniform(props.blend),
+      uShowBackground: new Uniform(props.showBackground),
+      uColor: new Uniform(hexToRgb(props.fluidColor!)),
+      uBackgroundColor: new Uniform(hexToRgb(props.backgroundColor!)),
+    };
+
+    super("FluidEffect", compositeFrag, {
+      blendFunction: props.blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map(Object.entries(uniforms)),
+    });
+
+    this.state = props;
+  }
+
+  private updateUniform<K extends keyof Uniforms>(key: K, value: Uniforms[K]) {
+    const uniform = this.uniforms.get(key);
+    if (uniform) {
+      uniform.value = value;
+    }
+  }
+
+  update() {
+    this.updateUniform("uIntensity", this.state.intensity);
+    this.updateUniform("uDistort", this.state.distortion);
+    this.updateUniform("uRainbow", this.state.rainbow);
+    this.updateUniform("uBlend", this.state.blend);
+    this.updateUniform("uShowBackground", this.state.showBackground);
+    this.updateUniform("uColor", hexToRgb(this.state.fluidColor));
+    this.updateUniform(
+      "uBackgroundColor",
+      hexToRgb(this.state.backgroundColor)
+    );
+  }
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/advection.frag

@@ -0,0 +1,16 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uVelocity;
+uniform sampler2D uSource;
+uniform vec2 texelSize;
+uniform float dt;
+uniform float uDissipation;
+
+void main() {
+    vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+
+    gl_FragColor = uDissipation * texture2D(uSource, coord);
+
+    gl_FragColor.a = 1.0;
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/base.vert

@@ -0,0 +1,26 @@
+#ifdef USE_V_UV
+  varying vec2 vUv;
+#endif
+
+#ifdef USE_OFFSETS
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform vec2 texelSize;
+#endif
+
+void main() {
+  #ifdef USE_V_UV
+    vUv = uv;
+  #endif
+
+  #ifdef USE_OFFSETS
+    vL = uv - vec2(texelSize.x, 0.0);
+    vR = uv + vec2(texelSize.x, 0.0);
+    vT = uv + vec2(0.0, texelSize.y);
+    vB = uv - vec2(0.0, texelSize.y);
+  #endif
+
+  gl_Position = vec4(position, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/clear.frag

@@ -0,0 +1,7 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uTexture;
+uniform float uClearValue;
+
+void main() { gl_FragColor = uClearValue * texture2D(uTexture, vUv); }