@wise/art 0.0.0-experimental-1d6d788

package/src/illustrations/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Illustration';
+export type { Props as IllustrationProps } from './Illustration';
+
+export { Assets } from './metadata';
+export type { IllustrationNames } from './metadata';

package/src/illustrations/metadata.ts

@@ -0,0 +1,13 @@
+/*
+  *
+  * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
+  * See: `scripts/generate-i10s-metadata.mjs`
+  *
+  */
+  
+  
+  export enum Assets {
+    WALLET = 'wallet',TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',TOOL = 'tool',TARGET_PLATFORM = 'target-platform',STOPWATCH_PLATFORM = 'stopwatch-platform',SPEECH_BUBBLE = 'speech-bubble',SKIP_AUTHENTICATION = 'skip-authentication',SHOPPING_BAG = 'shopping-bag',SATELLITE_PLATFORM = 'satellite-platform',SAND_TIMER_BUSINESS = 'sand-timer-business',SAND_TIMER = 'sand-timer',REMINDER_LETTER = 'reminder-letter',RECEIVE_BUSINESS = 'receive-business',RECEIVE = 'receive',QUESTION_MARK_BUSINESS = 'question-mark-business',QUESTION_MARK = 'question-mark',PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',PUZZLE_PIECES = 'puzzle-pieces',PLANE_BUSINESS = 'plane-business',PLANE_2 = 'plane-2',PLANE = 'plane',PIE_CHART_BUSINESS = 'pie-chart-business',PIE_CHART = 'pie-chart',PHONES = 'phones',PERSONAL_CARD = 'personal-card',PERCENTAGE_BUSINESS = 'percentage-business',PERCENTAGE = 'percentage',PALM_TREE = 'palm-tree',ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',MULTI_CURRENCY_BUSINESS = 'multi-currency-business',MULTI_CURRENCY = 'multi-currency',MEGAPHONE = 'megaphone',MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',MARBLE_CARD_BUSINESS = 'marble-card-business',MARBLE_CARD = 'marble-card',MARBLE_BUSINESS = 'marble-business',MARBLE = 'marble',MAP = 'map',MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',MAGNIFYING_GLASS = 'magnifying-glass',LOCK_PLATFORM = 'lock-platform',LOCK_BUSINESS = 'lock-business',LOCK = 'lock',LIGHT_BULB_BUSINESS = 'light-bulb-business',LIGHT_BULB = 'light-bulb',KEY_BUSINESS = 'key-business',KEY = 'key',JARS = 'jars',INVITE_LETTER = 'invite-letter',INTEREST = 'interest',INFINITE = 'infinite',ID_CARD = 'id-card',HOUSE = 'house',HEART_5 = 'heart-5',HEART_4 = 'heart-4',HEART_3 = 'heart-3',HEART_2 = 'heart-2',HEART = 'heart',HEADSET_BUSINESS = 'headset-business',HEADSET = 'headset',GRAPH_BUSINESS = 'graph-business',GRAPH = 'graph',GLOBE = 'globe',GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',GEAR_BUSINESS = 'gear-business',GEAR = 'gear',FLOWER = 'flower',FLAG = 'flag',EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',EXCLAMATION_MARK = 'exclamation-mark',EMAIL_SUCCESS_BUSINESS = 'email-success-business',EMAIL_SUCCESS = 'email-success',EMAIL = 'email',ELECTRIC_PLUG = 'electric-plug',ECO_CARD = 'eco-card',DOOR = 'door',DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',DOCUMENTS = 'documents',DIGITAL_CARD_BUSINESS = 'digital-card-business',DIGITAL_CARD_2 = 'digital-card-2',DIGITAL_CARD = 'digital-card',COOKIE = 'cookie',CONVERT_BUSINESS = 'convert-business',CONVERT = 'convert',CONSTRUCTION_FENCE = 'construction-fence',CONFETTI_BUSINESS = 'confetti-business',CONFETTI = 'confetti',COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',COIN_PILE_UP = 'coin-pile-up',COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',COIN_PILE_DOWN = 'coin-pile-down',CLOSED_WINDOW = 'closed-window',CHECK_MARK_BUSINESS = 'check-mark-business',CHECK_MARK = 'check-mark',CALENDAR_BUSINESS = 'calendar-business',CALENDAR = 'calendar',CALCULATOR_BUSINESS = 'calculator-business',BUSINESS_CARD_BUSINESS = 'business-card-business',BUSINESS_CARD = 'business-card',BRIEFCASE_BUSINESS = 'briefcase-business',BRIEFCASE = 'briefcase',BELL_BUSINESS = 'bell-business',BELL = 'bell',BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',BACKPACK = 'backpack',APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',API_INTEGRATIONS_BUSINESS = 'api-integrations-business'
+  }
+  
+  export type IllustrationNames = 'wallet' | 'two-invite-letters-opened' | 'tool' | 'target-platform' | 'stopwatch-platform' | 'speech-bubble' | 'skip-authentication' | 'shopping-bag' | 'satellite-platform' | 'sand-timer-business' | 'sand-timer' | 'reminder-letter' | 'receive-business' | 'receive' | 'question-mark-business' | 'question-mark' | 'puzzle-pieces-business' | 'puzzle-pieces' | 'plane-business' | 'plane-2' | 'plane' | 'pie-chart-business' | 'pie-chart' | 'phones' | 'personal-card' | 'percentage-business' | 'percentage' | 'palm-tree' | 'one-invite-letter-opened' | 'multi-currency-business' | 'multi-currency' | 'megaphone' | 'marble-card-flag-only-business' | 'marble-card-flag-only' | 'marble-card-business-flag-only' | 'marble-card-business' | 'marble-card' | 'marble-business' | 'marble' | 'map' | 'magnifying-glass-business' | 'magnifying-glass' | 'lock-platform' | 'lock-business' | 'lock' | 'light-bulb-business' | 'light-bulb' | 'key-business' | 'key' | 'jars' | 'invite-letter' | 'interest' | 'infinite' | 'id-card' | 'house' | 'heart-5' | 'heart-4' | 'heart-3' | 'heart-2' | 'heart' | 'headset-business' | 'headset' | 'graph-business' | 'graph' | 'globe' | 'get-paid-with-card-business' | 'gear-business' | 'gear' | 'flower' | 'flag' | 'exclamation-mark-business' | 'exclamation-mark' | 'email-success-business' | 'email-success' | 'email' | 'electric-plug' | 'eco-card' | 'door' | 'documents-folder-business' | 'documents' | 'digital-card-business' | 'digital-card-2' | 'digital-card' | 'cookie' | 'convert-business' | 'convert' | 'construction-fence' | 'confetti-business' | 'confetti' | 'coin-pile-up-business' | 'coin-pile-up' | 'coin-pile-down-business' | 'coin-pile-down' | 'closed-window' | 'check-mark-business' | 'check-mark' | 'calendar-business' | 'calendar' | 'calculator-business' | 'business-card-business' | 'business-card' | 'briefcase-business' | 'briefcase' | 'bell-business' | 'bell' | 'batch-payments-business' | 'backpack' | 'app-marketplace-business' | 'api-integrations-business'

package/src/illustrations3d/Illustration3D.stories.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import React, { useEffect } from 'react';
+
+import { Sizes } from '../common';
+import { Assets } from '../illustrations/metadata';
+
+import Illustration3D from './Illustration3D';
+
+export default {
+  title: '3D Illustrations',
+};
+
+export const Confetti = () => {
+  return (
+    <>
+      <Illustration3D name={Assets.CONFETTI} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Globe = () => {
+  return (
+    <>
+      <Illustration3D name={Assets.GLOBE} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Lock = () => {
+  return <Illustration3D name={Assets.LOCK} size={Sizes.LARGE} />;
+};
+
+export const CheckMark = () => {
+  return <Illustration3D name={Assets.CHECK_MARK} size={Sizes.LARGE} />;
+};
+
+export const Flower = () => {
+  return <Illustration3D name={Assets.FLOWER} size={Sizes.LARGE} />;
+};
+
+export const Plane = () => {
+  return <Illustration3D name={Assets.PLANE} size={Sizes.LARGE} />;
+};
+
+export const Graph = () => {
+  return <Illustration3D name={Assets.GRAPH} size={Sizes.LARGE} />;
+};
+
+export const Marble = () => {
+  return <Illustration3D name={Assets.MARBLE} size={Sizes.LARGE} />;
+};
+
+export const MarbleCard = () => {
+  return <Illustration3D name={Assets.MARBLE_CARD} size={Sizes.LARGE} />;
+};
+
+export const MagnifyingGlass = () => {
+  return <Illustration3D name={Assets.MAGNIFYING_GLASS} size={Sizes.LARGE} />;
+};
+
+export const Jars = () => {
+  return <Illustration3D name={Assets.JARS} size={Sizes.LARGE} />;
+};
+
+export const MultiCurrency = () => {
+  return <Illustration3D name={Assets.MULTI_CURRENCY} size={Sizes.LARGE} />;
+};
+
+export const Interest = () => {
+  return <Illustration3D name={Assets.INTEREST} />;
+};
+
+interface NetworkInformation extends EventTarget {
+  effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
+}
+export const Fallback = () => {
+  // @ts-expect-error navigator has connection property
+  const originalConnection = window.navigator.connection as NetworkInformation;
+
+  useEffect(() => {
+    const setConnection = (value?: NetworkInformation['effectiveType']) => {
+      Object.defineProperty(window.navigator, 'connection', {
+        value: value ? { effectiveType: value } : originalConnection,
+        configurable: true,
+      });
+    };
+
+    setConnection('slow-2g');
+
+    return () => {
+      setConnection();
+    };
+  }, [originalConnection]);
+
+  return (
+    <>
+      <Illustration3D name={Assets.LOCK} />
+      <p>Mock slow internet connection so it fallback to static illustration</p>
+    </>
+  );
+};

package/src/illustrations3d/Illustration3D.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable fp/no-mutation */
+import { clsx } from 'clsx';
+import { lazy, Suspense, useEffect, useState, LazyExoticComponent } from 'react';
+
+import { LargeSize, MediumSize, SmallSize, Sizes } from '../common';
+import Illustration, { Assets } from '../illustrations';
+
+import { useBattery, isConnectionSlow, isBatteryLow } from './utils';
+
+export type Illustration3DNames =
+  | 'lock'
+  | 'globe'
+  | 'confetti'
+  | 'check-mark'
+  | 'flower'
+  | 'graph'
+  | 'jars'
+  | 'magnifying-glass'
+  | 'marble'
+  | 'marble-card'
+  | 'multi-currency'
+  | 'plane'
+  | 'interest';
+
+export type Props = {
+  name: Illustration3DNames;
+  size?: SmallSize | MediumSize | LargeSize;
+  className?: string;
+};
+
+enum RenderMode {
+  INIT,
+  FALLBACK,
+  ASSET_3D,
+}
+
+const Illustration3D = ({ name, size = Sizes.MEDIUM, className }: Props) => {
+  const [renderMode, setRenderMode] = useState<RenderMode>(RenderMode.INIT);
+  const [inintrinsicSize, setInintrinsicSize] = useState<Props['size']>(size);
+  const batteryData = useBattery();
+
+  useEffect(() => {
+    setRenderMode(
+      isConnectionSlow() || isBatteryLow(batteryData.level)
+        ? RenderMode.FALLBACK
+        : RenderMode.ASSET_3D,
+    );
+    const isMobile: boolean =
+      (typeof window !== undefined && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;
+    if (isMobile) {
+      setInintrinsicSize(Sizes.SMALL);
+    }
+  }, [batteryData]);
+
+  return (
+    <div
+      className={clsx(
+        'wds-illustration-3d',
+        `wds-illustration-3d-${name}`,
+        `wds-illustration-3d-${inintrinsicSize as string}`,
+        className,
+      )}
+      aria-hidden
+    >
+      {renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (
+        <Suspense fallback={null}>{getModel({ name, size: inintrinsicSize })}</Suspense>
+      ) : (
+        <Illustration name={name} size={size} alt="" />
+      )}
+    </div>
+  );
+};
+
+function getModel({ name, size }: Props) {
+  // @ts-expect-error unknown generic
+  let Model: LazyExoticComponent = <></>;
+  const Scene = lazy(async () => import('./Scene'));
+  switch (name) {
+    case Assets.LOCK: {
+      Model = lazy(async () => import('./models/Lock'));
+      break;
+    }
+    case Assets.GLOBE: {
+      Model = lazy(async () => import('./models/Globe'));
+      break;
+    }
+    case Assets.CONFETTI: {
+      Model = lazy(async () => import('./models/Confetti'));
+      break;
+    }
+    case Assets.CHECK_MARK: {
+      Model = lazy(async () => import('./models/CheckMark'));
+      break;
+    }
+    case Assets.FLOWER: {
+      Model = lazy(async () => import('./models/Flower'));
+      break;
+    }
+    case Assets.PLANE: {
+      Model = lazy(async () => import('./models/Plane'));
+      break;
+    }
+    case Assets.GRAPH: {
+      Model = lazy(async () => import('./models/Graph'));
+      break;
+    }
+    case Assets.MARBLE: {
+      Model = lazy(async () => import('./models/Marble'));
+      break;
+    }
+    case Assets.MARBLE_CARD: {
+      Model = lazy(async () => import('./models/MarbleCard'));
+      break;
+    }
+    case Assets.MAGNIFYING_GLASS: {
+      Model = lazy(async () => import('./models/MagnifyingGlass'));
+      break;
+    }
+    case Assets.JARS: {
+      Model = lazy(async () => import('./models/Jars'));
+      break;
+    }
+    case Assets.MULTI_CURRENCY: {
+      Model = lazy(async () => import('./models/MultiCurrency'));
+      break;
+    }
+    case Assets.INTEREST: {
+      Model = lazy(async () => import('./models/Interest'));
+      break;
+    }
+  }
+  return (
+    <Scene assetName={name} size={size}>
+      <Model />
+    </Scene>
+  );
+}
+
+export default Illustration3D;

package/src/illustrations3d/Scene.tsx

@@ -0,0 +1,62 @@
+import { PerspectiveCamera } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import type { PropsWithChildren } from 'react';
+import { ACESFilmicToneMapping, LinearSRGBColorSpace, LinearToneMapping, PCFShadowMap, SRGBColorSpace } from 'three';
+
+import { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';
+import { Assets } from '../illustrations/metadata';
+
+import type { Illustration3DNames } from './Illustration3D';
+
+export type Props = PropsWithChildren<{
+  assetName: Illustration3DNames;
+  size?: SmallSize | MediumSize | LargeSize;
+}>;
+
+const Scene = ({ children, assetName, size = Sizes.MEDIUM }: Props) => {
+  const castShadows: boolean = [
+    Assets.LOCK as string,
+    Assets.MULTI_CURRENCY as string,
+    Assets.MAGNIFYING_GLASS as string,
+    Assets.INTEREST as string,
+  ].includes(assetName);
+  /**
+   * @deprecated this is a temporary variable until we migrate all models to v2 (DS-6879)
+   */
+  const isV2 = [Assets.INTEREST as string].includes(assetName);
+  return (
+    <Canvas
+      onCreated={({ gl }) => {
+        gl.setClearColor(0x000000, 0);
+        gl.setSize(ImageSizes[size], ImageSizes[size]);
+        gl.clearDepth();
+        // eslint-disable-next-line functional/immutable-data, no-param-reassign
+        gl.useLegacyLights = !isV2;
+      }}
+      gl={{
+        alpha: true,
+        antialias: !isV2,
+        pixelRatio: window.devicePixelRatio * 1,
+        toneMapping: isV2 ? ACESFilmicToneMapping : LinearToneMapping,
+        outputColorSpace: isV2 ? LinearSRGBColorSpace : SRGBColorSpace,
+        toneMappingExposure: 1.1,
+      }}
+      shadows={{
+        type: PCFShadowMap,
+        enabled: castShadows,
+      }}
+    >
+      <PerspectiveCamera
+        makeDefault
+        far={1000000000000}
+        near={0.1}
+        fov={10.29}
+        aspect={window.innerWidth / window.innerHeight}
+        position={[0, 0, 100]}
+      />
+      {children}
+    </Canvas>
+  );
+};
+
+export default Scene;

package/src/illustrations3d/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Illustration3D';
+export type { Props as Illustration3DProps } from './Illustration3D';
+
+export type { Illustration3DNames } from './Illustration3D';
+
+export { isIllustrationSupport3D } from './utils';

package/src/illustrations3d/models/CheckMark.tsx

@@ -0,0 +1,30 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+
+import { defineSrc } from '../utils';
+
+const CheckMark = () => {
+  const modelRef = useRef();
+  const model = useGLTF(defineSrc('check-mark.glb'));
+  const { animations, scene } = model;
+
+  const lights = useLoader(ObjectLoader, defineSrc('check-mark-light.json'));
+
+  const { mixer, clips } = useAnimations(animations, modelRef);
+  useFrame(() => {
+    model.materials['Standard'].map.offset.x += -0.0025;
+
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+
+  return (
+    <>
+      <primitive ref={modelRef} scale={1.4} object={scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default CheckMark;

package/src/illustrations3d/models/Confetti.tsx

@@ -0,0 +1,29 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Confetti = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('confetti.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('confetti-light.json'));
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0015;
+
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.5} position={[0, 1.5, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Confetti;

package/src/illustrations3d/models/Flower.tsx

@@ -0,0 +1,24 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Flower = () => {
+  const model = useGLTF(defineSrc('flower.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('flower-light.json'));
+
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.001;
+  });
+
+  return (
+    <>
+      <primitive scale={1.3} position={[0, -9, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Flower;

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.glb'));
+
+  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.glb'));
+
+  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/Interest.tsx

@@ -0,0 +1,42 @@
+import { useAnimations,useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { LoopRepeat, MeshStandardMaterial, ObjectLoader, TextureLoader, Vector2 } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Interest = () => {
+  const ref = useRef();
+  const { scene, animations } = useGLTF(defineSrc('interest.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('interest-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('file-interest-2.webp'));
+
+  scene.traverse((child) => {
+    if (child.name.startsWith('coin') && child.isMesh) {
+      child.material.map.flipY = true;
+      child.material.map.repeat.set(0.25, 0.25);
+      child.material.map.offset.set(0.85, -0.03);
+      child.material.map.needsUpdate = true;
+      child.material = new MeshStandardMaterial({
+          map: child.material.map,
+          normalMap: wiseLogo,
+          normalScale: new Vector2(1.3, 1.3)
+      });
+    }
+  });
+
+  const { mixer, clips } = useAnimations(animations, ref);
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play().setLoop(LoopRepeat, Infinity);
+  });
+
+  return (
+    <>
+      <primitive ref={ref} position={[0, -1, 0]} scale={1.45} object={scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Interest;

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.glb'));
+  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.glb'));
+
+  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.glb'));
+
+  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;