@wise/art 2.7.0 → 2.8.0

package/dist/index.js

@@ -1,162 +1,22 @@
 'use strict';
 
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
+var index = require('./index-c17944c0.js');
+require('react');
+require('react/jsx-runtime');
+require('clsx');
 
-const unknownFlagName = 'wise';
-const Flag = ({
-  code,
-  intrinsicSize = 64
-}) => {
-  const [fallback, setFallback] = react.useState(null);
-  react.useEffect(() => {
-    setFallback(null);
-  }, [code]);
-  const detailed = intrinsicSize >= 150;
-  const name = fallback !== 'unknown' ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}` : unknownFlagName;
-  return /*#__PURE__*/jsxRuntime.jsx("img", {
-    src: `https://wise.com/web-art/assets/flags/${name}.svg`,
-    alt: "",
-    width: intrinsicSize,
-    height: intrinsicSize,
-    onError: () => {
-      setFallback(prev => prev == null && detailed ? 'simple' : 'unknown');
-    }
-  });
-};
 
-exports.Sizes = void 0;
-(function (Sizes) {
-  Sizes["SMALL"] = "small";
-  Sizes["MEDIUM"] = "medium";
-  Sizes["LARGE"] = "large";
-})(exports.Sizes || (exports.Sizes = {}));
 
-const imageSizes = {
-  [exports.Sizes.SMALL]: 200,
-  [exports.Sizes.MEDIUM]: 300,
-  [exports.Sizes.LARGE]: 500
-};
-const Illustration = /*#__PURE__*/react.forwardRef(({
-  id,
-  name,
-  alt,
-  loading = 'eager',
-  className,
-  size = exports.Sizes.MEDIUM,
-  disablePadding = false
-}, ref) => {
-  const {
-    SMALL,
-    MEDIUM
-  } = exports.Sizes;
-  return name ? /*#__PURE__*/jsxRuntime.jsxs("picture", {
-    children: [size === exports.Sizes.LARGE || size === exports.Sizes.MEDIUM ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("source", {
-        width: imageSizes[SMALL],
-        height: imageSizes[SMALL],
-        media: "(max-width: 575px)",
-        srcSet: `${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`
-      }), size !== exports.Sizes.MEDIUM ? /*#__PURE__*/jsxRuntime.jsx("source", {
-        width: imageSizes[MEDIUM],
-        height: imageSizes[MEDIUM],
-        media: "(max-width: 992px)",
-        srcSet: `${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`
-      }) : null]
-    }) : null, /*#__PURE__*/jsxRuntime.jsx("img", {
-      id: id,
-      ref: ref,
-      alt: alt ?? name.replace('-', ' '),
-      "data-testid": `wds-${name}-illustration`,
-      className: clsx.clsx(`wds-illustration wds-illustration-${name}`, className, !disablePadding && 'wds-illustration-padding'),
-      loading: loading,
-      src: defineSrc(name, size, '1x'),
-      srcSet: `${defineSrc(name, size, '2x')} 2x`,
-      width: imageSizes[size],
-      height: imageSizes[size]
-    })]
-  }) : null;
+Object.defineProperty(exports, 'Assets', {
+	enumerable: true,
+	get: function () { return index.Assets; }
 });
-function defineSrc(illustration, size, descriptor) {
-  return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
-}
-
-/*
- *
- * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
- * See: `scripts/generate-i10s-metadata.mjs`
- *
- */
-exports.Assets = void 0;
-(function (Assets) {
-  Assets["BELL"] = "bell";
-  Assets["BRIEFCASE"] = "briefcase";
-  Assets["BUSINESS_CARD"] = "business-card";
-  Assets["CALENDAR"] = "calendar";
-  Assets["CHECK_MARK"] = "check-mark";
-  Assets["CLOSED_WINDOW"] = "closed-window";
-  Assets["COIN_PILE_DOWN"] = "coin-pile-down";
-  Assets["COIN_PILE_UP"] = "coin-pile-up";
-  Assets["CONFETTI"] = "confetti";
-  Assets["CONSTRUCTION_FENCE"] = "construction-fence";
-  Assets["CONVERT"] = "convert";
-  Assets["COOKIE"] = "cookie";
-  Assets["DIGITAL_CARD_2"] = "digital-card-2";
-  Assets["DIGITAL_CARD"] = "digital-card";
-  Assets["DOCUMENTS"] = "documents";
-  Assets["DOOR"] = "door";
-  Assets["ECO_CARD"] = "eco-card";
-  Assets["ELECTRIC_PLUG"] = "electric-plug";
-  Assets["EMAIL_SUCCESS"] = "email-success";
-  Assets["EMAIL"] = "email";
-  Assets["EXCLAMATION_MARK"] = "exclamation-mark";
-  Assets["FLAG"] = "flag";
-  Assets["FLOWER"] = "flower";
-  Assets["GEAR"] = "gear";
-  Assets["GLOBE"] = "globe";
-  Assets["GRAPH"] = "graph";
-  Assets["HEART_2"] = "heart-2";
-  Assets["HEART_3"] = "heart-3";
-  Assets["HEART_4"] = "heart-4";
-  Assets["HEART_5"] = "heart-5";
-  Assets["HEART"] = "heart";
-  Assets["HOUSE"] = "house";
-  Assets["ID_CARD"] = "id-card";
-  Assets["INFINITE"] = "infinite";
-  Assets["INVITE_LETTER"] = "invite-letter";
-  Assets["JARS"] = "jars";
-  Assets["KEY"] = "key";
-  Assets["LIGHT_BULB"] = "light-bulb";
-  Assets["LOCK"] = "lock";
-  Assets["MAGNIFYING_GLASS"] = "magnifying-glass";
-  Assets["MAP"] = "map";
-  Assets["MARBLE_CARD_BUSINESS"] = "marble-card-business";
-  Assets["MARBLE_CARD"] = "marble-card";
-  Assets["MARBLE"] = "marble";
-  Assets["MEGAPHONE"] = "megaphone";
-  Assets["MULTI_CURRENCY"] = "multi-currency";
-  Assets["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
-  Assets["PALM_TREE"] = "palm-tree";
-  Assets["PERCENTAGE"] = "percentage";
-  Assets["PERSONAL_CARD"] = "personal-card";
-  Assets["PHONES"] = "phones";
-  Assets["PIE_CHART"] = "pie-chart";
-  Assets["PLANE_2"] = "plane-2";
-  Assets["PLANE"] = "plane";
-  Assets["PUZZLE_PIECES"] = "puzzle-pieces";
-  Assets["QUESTION_MARK"] = "question-mark";
-  Assets["RECEIVE"] = "receive";
-  Assets["REMINDER_LETTER"] = "reminder-letter";
-  Assets["SAND_TIMER"] = "sand-timer";
-  Assets["SHOPPING_BAG"] = "shopping-bag";
-  Assets["SKIP_AUTHENTICATION"] = "skip-authentication";
-  Assets["SPEECH_BUBBLE"] = "speech-bubble";
-  Assets["TOOL"] = "tool";
-  Assets["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
-  Assets["WALLET"] = "wallet";
-})(exports.Assets || (exports.Assets = {}));
-
-exports.Flag = Flag;
-exports.Illustration = Illustration;
+exports.Flag = index.Flag;
+exports.Illustration = index.Illustration;
+exports.Illustration3D = index.Illustration3D;
+Object.defineProperty(exports, 'Sizes', {
+	enumerable: true,
+	get: function () { return index.Sizes; }
+});
+exports.isIllustrationSupport3D = index.isIllustrationSupport3D;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/flags/Flag.tsx","../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":[null,null,null,null],"names":["unknownFlagName","Flag","code","intrinsicSize","useEffect","setFallback","name","fallback","toLowerCase","detailed","_jsx","src","height","onError","Sizes","imageSizes","SMALL","MEDIUM","Illustration","forwardRef","id","alt","loading","className","size","disablePadding","ref","_jsxs","children","LARGE","_Fragment","width","media","srcSet","defineSrc","descriptor","Assets"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -22,6 +22,7 @@
   ],
   "scripts": {
     "setup": "yarn && yarn build",
+    "load-3d-i10s": "node ./scripts/load-3d-i10s.mjs",
     "load-i10s": "copyfiles -u 3 node_modules/wise-atoms/illustrations/**/*.png temp",
     "load-flags": "yarn load-country-flags && yarn load-currency-flags && yarn transform-flags && yarn convert-flags-svg-to-png",
     "load-country-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
@@ -32,7 +33,7 @@
     "generate-i10s-metadata": "node ./scripts/generate-i10s-metadata.mjs && eslint 'src/illustrations/metadata.ts' --fix",
     "bundle": "rm -rf dist && rollup --config --sourcemap && cpx src/illustrations/Illustration.css dist/",
     "cleanup": "rm -rf temp",
-    "build": "yarn load-i10s && yarn convert-i10s-png-to-webp && yarn generate-i10s-metadata && yarn load-flags && yarn bundle && yarn cleanup",
+    "build": "yarn load-i10s && yarn load-3d-i10s && yarn convert-i10s-png-to-webp && yarn generate-i10s-metadata && yarn load-flags && yarn bundle && yarn cleanup",
     "start": "storybook dev -p 3001",
     "dev": "yarn start",
     "test": "release-to-github-with-changelog-pre-release-checks",
@@ -41,7 +42,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "clsx": "^2.0.0"
+    "clsx": "^2.0.0",
+    "three": "^0.154.0",
+    "@react-three/fiber": "^8.13.5",
+    "@react-three/drei": "^9.78.2"
   },
   "devDependencies": {
     "@babel/core": "^7.22.15",
@@ -64,6 +68,7 @@
     "@types/jsdom": "^21.1.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/three": "^0.154.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "copyfiles": "^2.4.1",
     "cpx": "^1.5.0",
@@ -71,6 +76,7 @@
     "glob": "^8.1.0",
     "imagemin": "^8.0.1",
     "imagemin-webp": "^7.0.0",
+    "gltf-pipeline": "^4.1.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "jsdom": "~21.1.2",
@@ -83,7 +89,7 @@
     "ts-node": "10.9.1",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",
-    "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#bb7a63aa66453af9c77e754586381ac5b996a176"
+    "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#c2683d557cf6f7b4f6226ea8f0e67bc797e7fb2e"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/common.ts

@@ -4,6 +4,12 @@ export enum Sizes {
   LARGE = 'large',
 }
 
+export const ImageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
 export type LargeSize = 'large';
 export type MediumSize = 'medium';
 export type SmallSize = 'small';

package/src/illustrations/Illustration.css

@@ -6,3 +6,22 @@ img.wds-illustration {
 .wds-illustration-padding {
   padding: 24px;
 }
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/src/illustrations3d/Illustration3D.stories.tsx

@@ -0,0 +1,88 @@
+/* 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 Fallback = () => {
+  // @ts-expect-error navigator has connection property
+  const originalNavigator = window.navigator.connection;
+  // mock slow internet connection
+  // @ts-expect-error navigator has connection property
+  window.navigator.connection = { effectiveType: 'slow-2g' };
+
+  useEffect(() => {
+    // cleanup mock on unmount
+    // @ts-expect-error navigator has connection property
+    return () => (window.navigator.connection = originalNavigator);
+  }, [originalNavigator]);
+
+  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,133 @@
+/* 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';
+
+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,
+      )}
+    >
+      {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(() => import('./Scene'));
+  switch (name) {
+    case Assets.LOCK: {
+      Model = lazy(() => import('./models/Lock'));
+      break;
+    }
+    case Assets.GLOBE: {
+      Model = lazy(() => import('./models/Globe'));
+      break;
+    }
+    case Assets.CONFETTI: {
+      Model = lazy(() => import('./models/Confetti'));
+      break;
+    }
+    case Assets.CHECK_MARK: {
+      Model = lazy(() => import('./models/CheckMark'));
+      break;
+    }
+    case Assets.FLOWER: {
+      Model = lazy(() => import('./models/Flower'));
+      break;
+    }
+    case Assets.PLANE: {
+      Model = lazy(() => import('./models/Plane'));
+      break;
+    }
+    case Assets.GRAPH: {
+      Model = lazy(() => import('./models/Graph'));
+      break;
+    }
+    case Assets.MARBLE: {
+      Model = lazy(() => import('./models/Marble'));
+      break;
+    }
+    case Assets.MARBLE_CARD: {
+      Model = lazy(() => import('./models/MarbleCard'));
+      break;
+    }
+    case Assets.MAGNIFYING_GLASS: {
+      Model = lazy(() => import('./models/MagnifyingGlass'));
+      break;
+    }
+    case Assets.JARS: {
+      Model = lazy(() => import('./models/Jars'));
+      break;
+    }
+    case Assets.MULTI_CURRENCY: {
+      Model = lazy(() => import('./models/MultiCurrency'));
+      break;
+    }
+  }
+  return (
+    <Scene assetName={name} size={size}>
+      <Model />
+    </Scene>
+  );
+}
+
+export default Illustration3D;

package/src/illustrations3d/Scene.tsx

@@ -0,0 +1,54 @@
+import { PerspectiveCamera } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import type { PropsWithChildren } from 'react';
+import { PCFShadowMap, LinearToneMapping, 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,
+  ].includes(assetName);
+  return (
+    <Canvas
+      onCreated={({ gl }) => {
+        gl.setClearColor(0x000000, 0);
+        gl.setSize(ImageSizes[size], ImageSizes[size]);
+        gl.clearDepth();
+      }}
+      gl={{
+        alpha: true,
+        antialias: true,
+        pixelRatio: window.devicePixelRatio * 1,
+        toneMapping: LinearToneMapping,
+        outputColorSpace: SRGBColorSpace,
+      }}
+      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.gltf'));
+  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.gltf'));
+
+  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.gltf'));
+
+  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;