foundry-component-library 0.2.10 → 0.2.13

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/TileRays.tsx

@@ -2,8 +2,8 @@
 
 import React, { useRef } from "react";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { OrbitControls, useGLTF } from "@react-three/drei";
-import { Vector2, MeshBasicMaterial, DoubleSide } from "three";
+import { useGLTF } from "@react-three/drei";
+import { MeshBasicMaterial, DoubleSide, Mesh, Group } from "three";
 import { LightSource } from "./rays/LightSource";
 import {
   EffectComposer,
@@ -12,13 +12,13 @@ import {
   RenderPass,
 } from "postprocessing";
 
-function Slab({ url }) {
+function Slab({ url }: { url: string }) {
   const gltf = useGLTF(url);
-  const slabRef = useRef();
+  const slabRef = useRef<Group>(null);
   const { camera, scene, gl } = useThree();
 
   // GodRays light
-  const lightRef = useRef();
+  const lightRef = useRef<Mesh>(null);
   useFrame(({ pointer }) => {
     if (lightRef.current) {
       const LIGHT_RANGE = 5;
@@ -34,7 +34,7 @@ function Slab({ url }) {
     slab.rotation.x = Math.PI / 2;
 
     slab.traverse((obj) => {
-      if (obj.isMesh) {
+      if (obj instanceof Mesh) {
         obj.material = new MeshBasicMaterial({
           color: 0x491b11,
           side: DoubleSide,
@@ -42,12 +42,16 @@ function Slab({ url }) {
       }
     });
 
-    slabRef.current.add(slab);
+    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,
@@ -62,12 +66,12 @@ function Slab({ url }) {
     composer.addPass(new EffectPass(camera, gre));
 
     // Render loop override
-    const originalSetAnimationLoop = gl.setAnimationLoop;
+    // const originalSetAnimationLoop = gl.setAnimationLoop;
     gl.setAnimationLoop(() => composer.render());
 
     return () => {
       // Cleanup
-      gl.setAnimationLoop(originalSetAnimationLoop);
+      // gl.setAnimationLoop(originalSetAnimationLoop);
       composer.dispose();
     };
   }, [gltf, gl, scene, camera]);

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

@@ -1,9 +1,22 @@
 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 }) => {
-  const ref = useRef();
+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);

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

@@ -1,4 +1,4 @@
-import { MathUtils } from "three";
+import { MathUtils, InstancedMesh } from "three";
 import { useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import { Instances } from "@react-three/drei";
@@ -13,17 +13,18 @@ const particles = Array.from({ length: 20 }, () => ({
 }));
 
 const Bubbles = () => {
-  const ref = useRef(null);
+  const ref = useRef<InstancedMesh>(null);
 
-  useFrame(
-    (state, delta) =>
-      void (ref.current.rotation.y = MathUtils.damp(
-        ref.current.rotation.y,
-        (-state.pointer.x * Math.PI) / 6,
-        2.75,
-        delta
-      ))
-  );
+  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

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

@@ -1,58 +1,61 @@
-import { Effect, EffectAttribute } from 'postprocessing';
-import { Texture, Uniform, Vector3 } from 'three';
-import compositeFrag from '../glsl/composite.frag';
-import { type EffectProps } from '../types';
-import { hexToRgb } from '../utils';
+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;
+  tFluid: Texture;
+  uColor: Vector3;
+  uBackgroundColor: Vector3;
+  uRainbow: boolean;
+  uShowBackground: boolean;
+  uDistort: number;
+  uBlend: number;
+  uIntensity: number;
 };
 
 export class FluidEffect extends Effect {
-    state: EffectProps;
+  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!)),
-        };
+  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)),
-        });
+    super("FluidEffect", compositeFrag, {
+      blendFunction: props.blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map(Object.entries(uniforms)),
+    });
 
-        this.state = props;
-    }
+    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;
-        }
+  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));
-    }
+  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/hooks/useMaterials.tsx

@@ -1,242 +1,242 @@
-import { ShaderMaterial, Texture, Vector2, Vector3 } from 'three';
-import { useEffect, useMemo } from 'react';
-import { useThree } from '@react-three/fiber';
-import { DEFAULT_CONFIG, REFRESH_RATE } from '../constant';
+import { ShaderMaterial, Texture, Vector2, Vector3 } from "three";
+import { useEffect, useMemo } from "react";
+import { useThree } from "@react-three/fiber";
+import { DEFAULT_CONFIG, REFRESH_RATE } from "../constant";
 
-import baseVertex from '../glsl/base.vert';
-import clearFrag from '../glsl/clear.frag';
-import curlFrag from '../glsl/curl.frag';
-import divergenceFrag from '../glsl/divergence.frag';
-import gradientSubstractFrag from '../glsl/gradientSubstract.frag';
-import pressureFrag from '../glsl/pressure.frag';
-import splatFrag from '../glsl/splat.frag';
-import advectionFrag from '../glsl/advection.frag';
-import vorticityFrag from '../glsl/vorticity.frag';
+import baseVertex from "../glsl/base.vert?raw";
+import clearFrag from "../glsl/clear.frag?raw";
+import curlFrag from "../glsl/curl.frag?raw";
+import divergenceFrag from "../glsl/divergence.frag?raw";
+import gradientSubstractFrag from "../glsl/gradientSubstract.frag?raw";
+import pressureFrag from "../glsl/pressure.frag?raw";
+import splatFrag from "../glsl/splat.frag?raw";
+import advectionFrag from "../glsl/advection.frag?raw";
+import vorticityFrag from "../glsl/vorticity.frag?raw";
 
 export const useMaterials = (): { [key: string]: ShaderMaterial } => {
-    const size = useThree((s) => s.size);
+  const size = useThree((s) => s.size);
 
-    const shaderMaterials = useMemo(() => {
-        const advection = new ShaderMaterial({
-            name: 'Fluid/Advection',
-            uniforms: {
-                uVelocity: {
-                    value: new Texture(),
-                },
-                uSource: {
-                    value: new Texture(),
-                },
-                dt: {
-                    value: 1 / REFRESH_RATE,
-                },
-                uDissipation: {
-                    value: 1.0,
-                },
-                texelSize: { value: new Vector2() },
-            },
-            fragmentShader: advectionFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+  const shaderMaterials = useMemo(() => {
+    const advection = new ShaderMaterial({
+      name: "Fluid/Advection",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        uSource: {
+          value: new Texture(),
+        },
+        dt: {
+          value: 1 / REFRESH_RATE,
+        },
+        uDissipation: {
+          value: 1.0,
+        },
+        texelSize: { value: new Vector2() },
+      },
+      fragmentShader: advectionFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const clear = new ShaderMaterial({
-            name: 'Fluid/Clear',
-            uniforms: {
-                uTexture: {
-                    value: new Texture(),
-                },
-                uClearValue: {
-                    value: DEFAULT_CONFIG.pressure,
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: clearFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const clear = new ShaderMaterial({
+      name: "Fluid/Clear",
+      uniforms: {
+        uTexture: {
+          value: new Texture(),
+        },
+        uClearValue: {
+          value: DEFAULT_CONFIG.pressure,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: clearFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const curl = new ShaderMaterial({
-            name: 'Fluid/Curl',
-            uniforms: {
-                uVelocity: {
-                    value: new Texture(),
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: curlFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_OFFSETS: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const curl = new ShaderMaterial({
+      name: "Fluid/Curl",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: curlFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const divergence = new ShaderMaterial({
-            name: 'Fluid/Divergence',
-            uniforms: {
-                uVelocity: {
-                    value: new Texture(),
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: divergenceFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-                USE_OFFSETS: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const divergence = new ShaderMaterial({
+      name: "Fluid/Divergence",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: divergenceFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const gradientSubstract = new ShaderMaterial({
-            name: 'Fluid/GradientSubtract',
-            uniforms: {
-                uPressure: {
-                    value: new Texture(),
-                },
-                uVelocity: {
-                    value: new Texture(),
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: gradientSubstractFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-                USE_OFFSETS: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const gradientSubstract = new ShaderMaterial({
+      name: "Fluid/GradientSubtract",
+      uniforms: {
+        uPressure: {
+          value: new Texture(),
+        },
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: gradientSubstractFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const pressure = new ShaderMaterial({
-            name: 'Fluid/Pressure',
-            uniforms: {
-                uPressure: {
-                    value: new Texture(),
-                },
-                uDivergence: {
-                    value: new Texture(),
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: pressureFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-                USE_OFFSETS: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const pressure = new ShaderMaterial({
+      name: "Fluid/Pressure",
+      uniforms: {
+        uPressure: {
+          value: new Texture(),
+        },
+        uDivergence: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: pressureFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const splat = new ShaderMaterial({
-            name: 'Fluid/Splat',
-            uniforms: {
-                uTarget: {
-                    value: new Texture(),
-                },
-                aspectRatio: {
-                    value: size.width / size.height,
-                },
-                uColor: {
-                    value: new Vector3(),
-                },
-                uPointer: {
-                    value: new Vector2(),
-                },
-                uRadius: {
-                    value: DEFAULT_CONFIG.radius / 100.0,
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: splatFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const splat = new ShaderMaterial({
+      name: "Fluid/Splat",
+      uniforms: {
+        uTarget: {
+          value: new Texture(),
+        },
+        aspectRatio: {
+          value: size.width / size.height,
+        },
+        uColor: {
+          value: new Vector3(),
+        },
+        uPointer: {
+          value: new Vector2(),
+        },
+        uRadius: {
+          value: DEFAULT_CONFIG.radius / 100.0,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: splatFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        const vorticity = new ShaderMaterial({
-            name: 'Fluid/Vorticity',
-            uniforms: {
-                uVelocity: {
-                    value: new Texture(),
-                },
-                uCurl: {
-                    value: new Texture(),
-                },
-                uCurlValue: {
-                    value: DEFAULT_CONFIG.curl,
-                },
-                dt: {
-                    value: 1 / REFRESH_RATE,
-                },
-                texelSize: {
-                    value: new Vector2(),
-                },
-            },
-            fragmentShader: vorticityFrag,
-            vertexShader: baseVertex,
-            defines: {
-                USE_V_UV: '',
-                USE_OFFSETS: '',
-            },
-            depthTest: false,
-            depthWrite: false,
-        });
+    const vorticity = new ShaderMaterial({
+      name: "Fluid/Vorticity",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        uCurl: {
+          value: new Texture(),
+        },
+        uCurlValue: {
+          value: DEFAULT_CONFIG.curl,
+        },
+        dt: {
+          value: 1 / REFRESH_RATE,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: vorticityFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
 
-        return {
-            splat,
-            curl,
-            clear,
-            divergence,
-            pressure,
-            gradientSubstract,
-            advection,
-            vorticity,
-        };
-    }, [size]);
+    return {
+      splat,
+      curl,
+      clear,
+      divergence,
+      pressure,
+      gradientSubstract,
+      advection,
+      vorticity,
+    };
+  }, [size]);
 
-    useEffect(() => {
-        for (const material of Object.values(shaderMaterials)) {
-            const aspectRatio = size.width / (size.height + 400);
-            material.uniforms.texelSize.value.set(
-                1 / (DEFAULT_CONFIG.simRes * aspectRatio),
-                1 / DEFAULT_CONFIG.simRes,
-            );
-        }
+  useEffect(() => {
+    for (const material of Object.values(shaderMaterials)) {
+      const aspectRatio = size.width / (size.height + 400);
+      material.uniforms.texelSize.value.set(
+        1 / (DEFAULT_CONFIG.simRes * aspectRatio),
+        1 / DEFAULT_CONFIG.simRes
+      );
+    }
 
-        return () => {
-            for (const material of Object.values(shaderMaterials)) {
-                material.dispose();
-            }
-        };
-    }, [shaderMaterials, size]);
+    return () => {
+      for (const material of Object.values(shaderMaterials)) {
+        material.dispose();
+      }
+    };
+  }, [shaderMaterials, size]);
 
-    return shaderMaterials;
+  return shaderMaterials;
 };

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

@@ -4,13 +4,22 @@ 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 }) => {
-  const ref = useRef(null);
-  const { nodes } = useGLTF("/lens-transformed.glb");
+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
@@ -20,7 +29,7 @@ const Lens = ({ children, damping = 0.2, ...props }) => {
       [0, 0, 15]
     );
     easing.damp3(
-      ref.current!.position,
+      ref.current.position,
       [
         (state.pointer.x * viewport.width) / 2,
         (state.pointer.y * viewport.height) / 2,

package/lib/components/ServiceHubsTeaserEffects/index.tsx

@@ -47,14 +47,17 @@ const ServiceHubsTeaserEffects = ({
               const background = colors[i % colors.length];
 
               return (
-                <div className={styles.tileWrapper} key={tile.id}>
+                <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>
-                </div>
+                </Link>
               );
             })}
           </div>

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

@@ -5,8 +5,8 @@ import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 import noise from "./noise";
 
-export function LightSource(props) {
-  const meshRef = useRef();
+export function LightSource(props: React.ComponentProps<"mesh">) {
+  const meshRef = useRef(null);
 
   // shared time uniform
   const time = useMemo(() => ({ value: 0 }), []);
@@ -15,38 +15,39 @@ export function LightSource(props) {
     const m = new THREE.MeshBasicMaterial({
       color: 0xf197f4,
       transparent: true,
-      onBeforeCompile: (shader) => {
-        shader.uniforms.time = time;
+    } as any);
 
-        shader.fragmentShader = `
-          uniform float time;
-          ${shader.fragmentShader}
+    (m as any).onBeforeCompile = (shader: any) => {
+      shader.uniforms.time = time;
+
+      shader.fragmentShader = `
+        uniform float time;
+        ${shader.fragmentShader}
+      `
+        .replace(
+          `void main() {`,
+          `
+          ${noise}
+          void main() {
         `
-          .replace(
-            `void main() {`,
-            `
-            ${noise}
-            void main() {
+        )
+        .replace(
+          `vec4 diffuseColor = vec4( diffuse, opacity );`,
           `
-          )
-          .replace(
-            `vec4 diffuseColor = vec4( diffuse, opacity );`,
-            `
-            vec2 uv = vUv - 0.5;
-            vec3 col = vec3(0.0);
+          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 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;
+          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);
-          `
-          );
-      },
-    });
+          col = mix(col, diffuse, f * n);
+          vec4 diffuseColor = vec4(col, opacity);
+        `
+        );
+    };
 
     m.defines = { USE_UV: "" };
     return m;

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.10",
+  "version": "0.2.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",