@wise/art 2.7.0 → 2.8.1-beta.1

package/src/illustrations3d/models/Globe.tsx

@@ -0,0 +1,41 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { TextureLoader, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Globe = () => {
+  const { scene } = useGLTF(defineSrc('globe.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('globe-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const planet = scene.getObjectByName('Globe');
+  const orbit = scene.getObjectByName('Coins_Axis_Rotation_Animate');
+
+  scene.traverse((child) => {
+    if (child.name.startsWith('Coin_')) {
+      const mesh = child;
+
+      const material = mesh.material;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+    }
+  });
+
+  useFrame(() => {
+    orbit.rotation.y += 0.002;
+
+    planet.material.map.offset.x += -0.0002;
+  });
+
+  return (
+    <>
+      <primitive position={[0, -10, 0]} scale={1.3} object={scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Globe;

package/src/illustrations3d/models/Graph.tsx

@@ -0,0 +1,26 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Graph = () => {
+  const model = useGLTF(defineSrc(`graph.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('graph-light.json'));
+
+  useFrame(() => {
+    const { offset } = model.materials['Standard '].map;
+    offset.x += -0.0015;
+    offset.y += 0.0015;
+  });
+
+  return (
+    <>
+      <primitive scale={1.3} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Graph;

package/src/illustrations3d/models/Jars.tsx

@@ -0,0 +1,47 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { TextureLoader, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Jars = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('jars.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('jars-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const jars = [];
+
+  model.scene.traverse((child) => {
+    if (child.name.startsWith('Coin_')) {
+      child.material.bumpMap = wiseLogo;
+
+      child.material.bumpMap.flipY = false;
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+    if (child.name.startsWith('Jar_')) {
+      jars.push(child);
+    }
+  });
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play();
+
+    jars.forEach((jar) => {
+      jar.material.map.offset.x += 0.001;
+      jar.material.map.offset.y += 0.0;
+    });
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.3} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Jars;

package/src/illustrations3d/models/Lock.tsx

@@ -0,0 +1,38 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { LoopOnce, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Lock = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('lock.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('lock-light.json'));
+
+  model.scene.traverse((node) => {
+    if (node.isMesh) {
+      node.castShadow = true;
+      node.receiveShadow = true;
+    }
+  });
+
+  const { clips, mixer } = useAnimations(model.animations, ref);
+  let frame = 0;
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+    model.scene.position.y = Math.sin(frame++ * 0.04) * 0.2;
+
+    model.materials.Standard.map.offset.x += -0.001;
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.4} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Lock;

package/src/illustrations3d/models/MagnifyingGlass.tsx

@@ -0,0 +1,30 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MagnifyingGlass = () => {
+  const model = useGLTF(defineSrc(`magnifying-glass.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('magnifying-glass-light.json'));
+
+  const lens = model.scene.getObjectByName('Optimised_lens');
+
+  useFrame(() => {
+    lens.material.transparent = true;
+
+    lens.material.opacity = 0.8;
+
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0006;
+  });
+
+  return (
+    <>
+      <primitive scale={1.5} position={[0, -12, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MagnifyingGlass;

package/src/illustrations3d/models/Marble.tsx

@@ -0,0 +1,47 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Marble = () => {
+  const model = useGLTF(defineSrc('marble.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('marble-light.json'));
+
+  const sphere = model.scene.getObjectByName('Sphere1');
+  sphere.material.depthTest = true;
+
+  const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
+  stripeBottom.material.depthTest = false;
+  stripeBottom.renderOrder = 1;
+
+  const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeLeft.material.depthTest = false;
+  stripeLeft.renderOrder = 2;
+
+  const stripeRight = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeRight.material.depthTest = false;
+  stripeRight.renderOrder = 3;
+
+  const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
+  stripeTop.material.depthTest = false;
+  stripeTop.renderOrder = 4;
+
+  const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(
+    (object) => object.material.map,
+  );
+
+  useFrame(() => {
+    animatedMaps.forEach((map) => (map.offset.y += -0.0015));
+  });
+
+  return (
+    <>
+      <primitive scale={1.4} position={[0, -11, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Marble;

package/src/illustrations3d/models/MarbleCard.tsx

@@ -0,0 +1,50 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MarbleCard = () => {
+  const model = useGLTF(defineSrc('marble-card.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('marble-card-light.json'));
+  const sphere = model.scene.getObjectByName('Sphere1');
+  sphere.material.depthTest = true;
+
+  const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
+  stripeBottom.material.depthTest = false;
+  stripeBottom.renderOrder = 1;
+
+  const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeLeft.material.depthTest = false;
+  stripeLeft.renderOrder = 2;
+
+  const stripeRight = model.scene.getObjectByName('Strip_Right_(2nd)');
+  stripeRight.material.depthTest = false;
+  stripeRight.renderOrder = 3;
+
+  const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
+  stripeTop.material.depthTest = false;
+  stripeTop.renderOrder = 4;
+
+  const card = model.scene.getObjectByName('Plane');
+  card.material.depthTest = false;
+  card.material.metalness = 0;
+
+  const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(
+    (object) => object.material.map,
+  );
+
+  useFrame(() => {
+    animatedMaps.forEach((map) => (map.offset.y += -0.0015));
+  });
+
+  return (
+    <>
+      <primitive scale={1.4} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MarbleCard;

package/src/illustrations3d/models/MultiCurrency.tsx

@@ -0,0 +1,58 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, TextureLoader, Color } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MultiCurrency = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc(`multi-currency.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('multi-currency-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+
+  const animatedMaps = [];
+
+  model.scene.traverse((child) => {
+    if (child.name.includes('Note')) {
+      child.castShadow = true;
+      child.receiveShadow = true;
+    }
+
+    if (child.name.startsWith('Coin_') && child.isMesh) {
+      const { material } = child;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      material.bumpScale = 1;
+      material.color = new Color(0.49, 0.49, 0.49);
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+
+    if (child.name.startsWith('NoteBase_') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+
+    if (child.name.includes('Wise') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+  });
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    animatedMaps.forEach((animatedMap) => {
+      animatedMap.offset.x += 0.001;
+    });
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} position={[-0.5, -10, 0]} scale={1.3} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MultiCurrency;

package/src/illustrations3d/models/Plane.tsx

@@ -0,0 +1,33 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Plane = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('plane.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('plane-light.json'));
+  const plane = model.scene.getObjectByName('Plane_6_update');
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.y += 0.018;
+
+    plane.position.x = 0.45;
+
+    plane.position.y = 7.5;
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.3} position={[0, -7, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Plane;

package/src/illustrations3d/utils.ts

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+
+import type { IllustrationNames } from '../illustrations/metadata';
+
+export function useBattery() {
+  const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });
+
+  useEffect(() => {
+    const getBatteryData = async () => {
+      // @ts-expect-error .getBattery exists in Navigator interface
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      const battery = await navigator.getBattery();
+
+      setBatteryData({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        level: battery?.level,
+      });
+    };
+    // Check if the browser supports the Battery API
+    if ('getBattery' in navigator) {
+      void getBatteryData();
+    }
+  }, []);
+
+  return batteryData;
+}
+
+export function isBatteryLow(batteryLevel: number): boolean {
+  return batteryLevel < 0.2;
+}
+
+export function isConnectionSlow(): boolean {
+  // @ts-expect-error .connection prop exists in Navigator interface
+  const { connection } = window.navigator;
+  if (connection === undefined) {
+    return false;
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||
+    // @ts-expect-error Property 'connection' does exist on type 'Navigator'
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    navigator?.connection?.saveData === true
+  );
+}
+
+export function defineSrc(asset: string): string {
+  return `https://wise.com/web-art/assets/illustrations3d/${asset}`;
+}
+
+const illustration3DNames = [
+  'lock',
+  'globe',
+  'confetti',
+  'check-mark',
+  'flower',
+  'graph',
+  'jars',
+  'magnifying-glass',
+  'marble',
+  'marble-card',
+  'multi-currency',
+  'plane',
+];
+
+export function isIllustrationSupport3D(asset: IllustrationNames): boolean {
+  return illustration3DNames.includes(asset);
+}

package/src/index.ts

@@ -1,7 +1,12 @@
 export { Flag } from './flags';
 export { default as Illustration } from './illustrations';
+export { default as Illustration3D } from './illustrations3d';
+
 export { Assets } from './illustrations';
 export { Sizes } from './common';
 
 export type { FlagProps } from './flags';
 export type { IllustrationNames, IllustrationProps } from './illustrations';
+export type { Illustration3DNames, Illustration3DProps } from './illustrations3d';
+
+export { isIllustrationSupport3D } from './illustrations3d';