foundry-component-library 0.2.8 → 0.2.10

package/lib/components/Awards/index.tsx

@@ -1,12 +1,25 @@
 "use client";
-import { useRef } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage } from "../../types";
-import useDrag from "../../hooks/useDrag";
 import WavyText from "../TextAnimations/WavyText";
 import { motion } from "framer-motion";
 
+// Infinite marquee animation settings
+const marqueeVariants = {
+  animate: {
+    x: [0, -"100%"],
+    transition: {
+      x: {
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 20,
+        ease: "linear",
+      },
+    },
+  },
+};
+
 const Awards = ({
   heading,
   awards,
@@ -22,49 +35,41 @@ const Awards = ({
   }[];
   Image: NextImage;
 }) => {
-  const sectionRef = useRef(null);
-  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
-    useDrag(sectionRef);
+  if (!awards) return null;
 
-  if (!awards) return;
+  // Duplicate awards to create seamless looping
+  const marqueeItems = [...awards, ...awards];
 
   return (
     <motion.div
       className={styles.awards}
       initial={{ opacity: 0, y: -5 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{
-        duration: 1,
-      }}
-    >
+      transition={{ duration: 1 }}>
       <Container>
         {heading && <WavyText className={styles.heading} text={heading} />}
       </Container>
       <Container noMobilePadding>
-        <div
-          ref={sectionRef}
-          className={styles.items}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-          style={dragStyle as React.CSSProperties}
-        >
-          {awards.map((award, i) => {
-            const { image, heading, text } = award;
-
-            if (!image) return;
+        <div className={styles.marqueeWrapper}>
+          <motion.div
+            className={styles.marquee}
+            variants={marqueeVariants}
+            animate="animate">
+            {marqueeItems.map((award, i) => {
+              const { image, heading, text } = award;
+              if (!image) return null;
 
-            return (
-              <div key={image.sourceUrl + i} className={styles.award}>
-                <div className={styles.image}>
-                  {image && <Image src={image?.sourceUrl} alt="" fill />}
+              return (
+                <div key={image.sourceUrl + i} className={styles.award}>
+                  <div className={styles.image}>
+                    {image && <Image src={image.sourceUrl} alt="" fill />}
+                  </div>
+                  {heading && <div className={styles.text}>{heading}</div>}
+                  {text && <div className={styles.client}>{text}</div>}
                 </div>
-                {heading && <div className={styles.text}>{heading}</div>}
-                {text && <div className={styles.client}>{text}</div>}
-              </div>
-            );
-          })}
+              );
+            })}
+          </motion.div>
         </div>
       </Container>
     </motion.div>

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

@@ -21,14 +21,29 @@
   }
 }
 
-.items {
+/* NEW — wrapper that clips the scrolling track */
+.marqueeWrapper {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+/* NEW — marquee track */
+.marquee {
   display: flex;
+  gap: 48px;
+  width: max-content;
+  animation: marquee 20s linear infinite;
 
   @media #{$QUERY-sm} {
     gap: 24px;
+    animation-duration: 16s;
   }
 }
 
+/* Remove if using marquee (track should scroll) */
+/* .items { display: flex; } */
+
 .award {
   width: 20%;
   text-align: center;
@@ -85,3 +100,13 @@
     font-size: 16px;
   }
 }
+
+/* NEW — marquee animation: scroll half the track (because items are duplicated) */
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}

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,94 @@
+"use client";
+
+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 { LightSource } from "./rays/LightSource";
+import {
+  EffectComposer,
+  EffectPass,
+  GodRaysEffect,
+  RenderPass,
+} from "postprocessing";
+
+function Slab({ url }) {
+  const gltf = useGLTF(url);
+  const slabRef = useRef();
+  const { camera, scene, gl } = useThree();
+
+  // GodRays light
+  const lightRef = useRef();
+  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.isMesh) {
+        obj.material = new MeshBasicMaterial({
+          color: 0x491b11,
+          side: DoubleSide,
+        });
+      }
+    });
+
+    slabRef.current.add(slab);
+
+    // Setup postprocessing
+    const composer = new EffectComposer(gl);
+    composer.addPass(new RenderPass(scene, camera));
+
+    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,35 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Instance } from "@react-three/drei";
+
+const Bubble = ({ factor, speed, xFactor, yFactor, zFactor }) => {
+  const ref = useRef();
+
+  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,44 @@
+import { MathUtils } 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(null);
+
+  useFrame(
+    (state, delta) =>
+      void (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} />;
+});