@wise/art 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/README.md +47 -0
  2. package/dist/CheckMark-6516e382.js +39 -0
  3. package/dist/CheckMark-6516e382.js.map +1 -0
  4. package/dist/CheckMark-7e2e6863.esm.js +37 -0
  5. package/dist/CheckMark-7e2e6863.esm.js.map +1 -0
  6. package/dist/Confetti-71f18588.js +36 -0
  7. package/dist/Confetti-71f18588.js.map +1 -0
  8. package/dist/Confetti-f1f0c4a5.esm.js +34 -0
  9. package/dist/Confetti-f1f0c4a5.esm.js.map +1 -0
  10. package/dist/Flower-2325e8ba.js +29 -0
  11. package/dist/Flower-2325e8ba.js.map +1 -0
  12. package/dist/Flower-8a17d7a6.esm.js +27 -0
  13. package/dist/Flower-8a17d7a6.esm.js.map +1 -0
  14. package/dist/Globe-601b1eb5.esm.js +43 -0
  15. package/dist/Globe-601b1eb5.esm.js.map +1 -0
  16. package/dist/Globe-93237bd2.js +45 -0
  17. package/dist/Globe-93237bd2.js.map +1 -0
  18. package/dist/Graph-536a6847.js +33 -0
  19. package/dist/Graph-536a6847.js.map +1 -0
  20. package/dist/Graph-e766a791.esm.js +31 -0
  21. package/dist/Graph-e766a791.esm.js.map +1 -0
  22. package/dist/Illustration.css +19 -0
  23. package/dist/Jars-9afb6e8b.esm.js +50 -0
  24. package/dist/Jars-9afb6e8b.esm.js.map +1 -0
  25. package/dist/Jars-fcb1e2b1.js +52 -0
  26. package/dist/Jars-fcb1e2b1.js.map +1 -0
  27. package/dist/Lock-2365c3f9.esm.js +41 -0
  28. package/dist/Lock-2365c3f9.esm.js.map +1 -0
  29. package/dist/Lock-e5c89aa2.js +43 -0
  30. package/dist/Lock-e5c89aa2.js.map +1 -0
  31. package/dist/MagnifyingGlass-92351fd6.js +32 -0
  32. package/dist/MagnifyingGlass-92351fd6.js.map +1 -0
  33. package/dist/MagnifyingGlass-92fbedda.esm.js +30 -0
  34. package/dist/MagnifyingGlass-92fbedda.esm.js.map +1 -0
  35. package/dist/Marble-0f2d6f38.js +44 -0
  36. package/dist/Marble-0f2d6f38.js.map +1 -0
  37. package/dist/Marble-91d300a3.esm.js +42 -0
  38. package/dist/Marble-91d300a3.esm.js.map +1 -0
  39. package/dist/MarbleCard-690b2b8e.esm.js +45 -0
  40. package/dist/MarbleCard-690b2b8e.esm.js.map +1 -0
  41. package/dist/MarbleCard-ed7536dc.js +47 -0
  42. package/dist/MarbleCard-ed7536dc.js.map +1 -0
  43. package/dist/MultiCurrency-0456db19.js +63 -0
  44. package/dist/MultiCurrency-0456db19.js.map +1 -0
  45. package/dist/MultiCurrency-1b491db5.esm.js +61 -0
  46. package/dist/MultiCurrency-1b491db5.esm.js.map +1 -0
  47. package/dist/Plane-b6340ff4.js +39 -0
  48. package/dist/Plane-b6340ff4.js.map +1 -0
  49. package/dist/Plane-d631e81c.esm.js +37 -0
  50. package/dist/Plane-d631e81c.esm.js.map +1 -0
  51. package/dist/Scene-45fbe252.js +48 -0
  52. package/dist/Scene-45fbe252.js.map +1 -0
  53. package/dist/Scene-783029f4.esm.js +46 -0
  54. package/dist/Scene-783029f4.esm.js.map +1 -0
  55. package/dist/common.d.ts +5 -0
  56. package/dist/common.d.ts.map +1 -1
  57. package/dist/illustrations3d/Illustration3D.d.ts +11 -0
  58. package/dist/illustrations3d/Illustration3D.d.ts.map +1 -0
  59. package/dist/illustrations3d/Scene.d.ts +10 -0
  60. package/dist/illustrations3d/Scene.d.ts.map +1 -0
  61. package/dist/illustrations3d/index.d.ts +5 -0
  62. package/dist/illustrations3d/index.d.ts.map +1 -0
  63. package/dist/illustrations3d/models/CheckMark.d.ts +4 -0
  64. package/dist/illustrations3d/models/CheckMark.d.ts.map +1 -0
  65. package/dist/illustrations3d/models/Confetti.d.ts +4 -0
  66. package/dist/illustrations3d/models/Confetti.d.ts.map +1 -0
  67. package/dist/illustrations3d/models/Flower.d.ts +4 -0
  68. package/dist/illustrations3d/models/Flower.d.ts.map +1 -0
  69. package/dist/illustrations3d/models/Globe.d.ts +4 -0
  70. package/dist/illustrations3d/models/Globe.d.ts.map +1 -0
  71. package/dist/illustrations3d/models/Graph.d.ts +4 -0
  72. package/dist/illustrations3d/models/Graph.d.ts.map +1 -0
  73. package/dist/illustrations3d/models/Jars.d.ts +4 -0
  74. package/dist/illustrations3d/models/Jars.d.ts.map +1 -0
  75. package/dist/illustrations3d/models/Lock.d.ts +4 -0
  76. package/dist/illustrations3d/models/Lock.d.ts.map +1 -0
  77. package/dist/illustrations3d/models/MagnifyingGlass.d.ts +4 -0
  78. package/dist/illustrations3d/models/MagnifyingGlass.d.ts.map +1 -0
  79. package/dist/illustrations3d/models/Marble.d.ts +4 -0
  80. package/dist/illustrations3d/models/Marble.d.ts.map +1 -0
  81. package/dist/illustrations3d/models/MarbleCard.d.ts +4 -0
  82. package/dist/illustrations3d/models/MarbleCard.d.ts.map +1 -0
  83. package/dist/illustrations3d/models/MultiCurrency.d.ts +4 -0
  84. package/dist/illustrations3d/models/MultiCurrency.d.ts.map +1 -0
  85. package/dist/illustrations3d/models/Plane.d.ts +4 -0
  86. package/dist/illustrations3d/models/Plane.d.ts.map +1 -0
  87. package/dist/illustrations3d/utils.d.ts +9 -0
  88. package/dist/illustrations3d/utils.d.ts.map +1 -0
  89. package/dist/index-3b6277fc.esm.js +325 -0
  90. package/dist/index-3b6277fc.esm.js.map +1 -0
  91. package/dist/index-c17944c0.js +332 -0
  92. package/dist/index-c17944c0.js.map +1 -0
  93. package/dist/index.d.ts +3 -0
  94. package/dist/index.d.ts.map +1 -1
  95. package/dist/index.esm.js +4 -158
  96. package/dist/index.esm.js.map +1 -1
  97. package/dist/index.js +15 -155
  98. package/dist/index.js.map +1 -1
  99. package/package.json +10 -4
  100. package/src/common.ts +6 -0
  101. package/src/illustrations/Illustration.css +19 -0
  102. package/src/illustrations3d/Illustration3D.stories.tsx +88 -0
  103. package/src/illustrations3d/Illustration3D.tsx +133 -0
  104. package/src/illustrations3d/Scene.tsx +54 -0
  105. package/src/illustrations3d/index.ts +6 -0
  106. package/src/illustrations3d/models/CheckMark.tsx +30 -0
  107. package/src/illustrations3d/models/Confetti.tsx +29 -0
  108. package/src/illustrations3d/models/Flower.tsx +24 -0
  109. package/src/illustrations3d/models/Globe.tsx +41 -0
  110. package/src/illustrations3d/models/Graph.tsx +26 -0
  111. package/src/illustrations3d/models/Jars.tsx +47 -0
  112. package/src/illustrations3d/models/Lock.tsx +38 -0
  113. package/src/illustrations3d/models/MagnifyingGlass.tsx +30 -0
  114. package/src/illustrations3d/models/Marble.tsx +47 -0
  115. package/src/illustrations3d/models/MarbleCard.tsx +50 -0
  116. package/src/illustrations3d/models/MultiCurrency.tsx +58 -0
  117. package/src/illustrations3d/models/Plane.tsx +33 -0
  118. package/src/illustrations3d/utils.ts +68 -0
  119. package/src/index.ts +5 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Lock-e5c89aa2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var three = require('three');
6
+ var index = require('./index-c17944c0.js');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ require('react');
9
+ require('clsx');
10
+
11
+ const MagnifyingGlass = () => {
12
+ const model = drei.useGLTF(index.defineSrc(`magnifying-glass.gltf`));
13
+ const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('magnifying-glass-light.json'));
14
+ const lens = model.scene.getObjectByName('Optimised_lens');
15
+ fiber.useFrame(() => {
16
+ lens.material.transparent = true;
17
+ lens.material.opacity = 0.8;
18
+ model.materials['Tapestry WebGL'].map.offset.x += -0.0006;
19
+ });
20
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
21
+ children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
22
+ scale: 1.5,
23
+ position: [0, -12, 0],
24
+ object: model.scene
25
+ }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
26
+ object: lights
27
+ })]
28
+ });
29
+ };
30
+
31
+ exports.default = MagnifyingGlass;
32
+ //# sourceMappingURL=MagnifyingGlass-92351fd6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MagnifyingGlass-92351fd6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,30 @@
1
+ import { useGLTF } from '@react-three/drei';
2
+ import { useLoader, useFrame } from '@react-three/fiber';
3
+ import { ObjectLoader } from 'three';
4
+ import { d as defineSrc } from './index-3b6277fc.esm.js';
5
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
+ import 'react';
7
+ import 'clsx';
8
+
9
+ const MagnifyingGlass = () => {
10
+ const model = useGLTF(defineSrc(`magnifying-glass.gltf`));
11
+ const lights = useLoader(ObjectLoader, defineSrc('magnifying-glass-light.json'));
12
+ const lens = model.scene.getObjectByName('Optimised_lens');
13
+ useFrame(() => {
14
+ lens.material.transparent = true;
15
+ lens.material.opacity = 0.8;
16
+ model.materials['Tapestry WebGL'].map.offset.x += -0.0006;
17
+ });
18
+ return /*#__PURE__*/jsxs(Fragment, {
19
+ children: [/*#__PURE__*/jsx("primitive", {
20
+ scale: 1.5,
21
+ position: [0, -12, 0],
22
+ object: model.scene
23
+ }), /*#__PURE__*/jsx("primitive", {
24
+ object: lights
25
+ })]
26
+ });
27
+ };
28
+
29
+ export { MagnifyingGlass as default };
30
+ //# sourceMappingURL=MagnifyingGlass-92fbedda.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MagnifyingGlass-92fbedda.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var three = require('three');
6
+ var index = require('./index-c17944c0.js');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ require('react');
9
+ require('clsx');
10
+
11
+ const Marble = () => {
12
+ const model = drei.useGLTF(index.defineSrc('marble.gltf'));
13
+ const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('marble-light.json'));
14
+ const sphere = model.scene.getObjectByName('Sphere1');
15
+ sphere.material.depthTest = true;
16
+ const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
17
+ stripeBottom.material.depthTest = false;
18
+ stripeBottom.renderOrder = 1;
19
+ const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
20
+ stripeLeft.material.depthTest = false;
21
+ stripeLeft.renderOrder = 2;
22
+ const stripeRight = model.scene.getObjectByName('Strip_Left_(3rd)');
23
+ stripeRight.material.depthTest = false;
24
+ stripeRight.renderOrder = 3;
25
+ const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
26
+ stripeTop.material.depthTest = false;
27
+ stripeTop.renderOrder = 4;
28
+ const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(object => object.material.map);
29
+ fiber.useFrame(() => {
30
+ animatedMaps.forEach(map => map.offset.y += -0.0015);
31
+ });
32
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
33
+ children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
34
+ scale: 1.4,
35
+ position: [0, -11, 0],
36
+ object: model.scene
37
+ }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
38
+ object: lights
39
+ })]
40
+ });
41
+ };
42
+
43
+ exports.default = Marble;
44
+ //# sourceMappingURL=Marble-0f2d6f38.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Marble-0f2d6f38.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,42 @@
1
+ import { useGLTF } from '@react-three/drei';
2
+ import { useLoader, useFrame } from '@react-three/fiber';
3
+ import { ObjectLoader } from 'three';
4
+ import { d as defineSrc } from './index-3b6277fc.esm.js';
5
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
+ import 'react';
7
+ import 'clsx';
8
+
9
+ const Marble = () => {
10
+ const model = useGLTF(defineSrc('marble.gltf'));
11
+ const lights = useLoader(ObjectLoader, defineSrc('marble-light.json'));
12
+ const sphere = model.scene.getObjectByName('Sphere1');
13
+ sphere.material.depthTest = true;
14
+ const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
15
+ stripeBottom.material.depthTest = false;
16
+ stripeBottom.renderOrder = 1;
17
+ const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
18
+ stripeLeft.material.depthTest = false;
19
+ stripeLeft.renderOrder = 2;
20
+ const stripeRight = model.scene.getObjectByName('Strip_Left_(3rd)');
21
+ stripeRight.material.depthTest = false;
22
+ stripeRight.renderOrder = 3;
23
+ const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
24
+ stripeTop.material.depthTest = false;
25
+ stripeTop.renderOrder = 4;
26
+ const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(object => object.material.map);
27
+ useFrame(() => {
28
+ animatedMaps.forEach(map => map.offset.y += -0.0015);
29
+ });
30
+ return /*#__PURE__*/jsxs(Fragment, {
31
+ children: [/*#__PURE__*/jsx("primitive", {
32
+ scale: 1.4,
33
+ position: [0, -11, 0],
34
+ object: model.scene
35
+ }), /*#__PURE__*/jsx("primitive", {
36
+ object: lights
37
+ })]
38
+ });
39
+ };
40
+
41
+ export { Marble as default };
42
+ //# sourceMappingURL=Marble-91d300a3.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Marble-91d300a3.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,45 @@
1
+ import { useGLTF } from '@react-three/drei';
2
+ import { useLoader, useFrame } from '@react-three/fiber';
3
+ import { ObjectLoader } from 'three';
4
+ import { d as defineSrc } from './index-3b6277fc.esm.js';
5
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
+ import 'react';
7
+ import 'clsx';
8
+
9
+ const MarbleCard = () => {
10
+ const model = useGLTF(defineSrc('marble-card.gltf'));
11
+ const lights = useLoader(ObjectLoader, defineSrc('marble-card-light.json'));
12
+ const sphere = model.scene.getObjectByName('Sphere1');
13
+ sphere.material.depthTest = true;
14
+ const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
15
+ stripeBottom.material.depthTest = false;
16
+ stripeBottom.renderOrder = 1;
17
+ const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
18
+ stripeLeft.material.depthTest = false;
19
+ stripeLeft.renderOrder = 2;
20
+ const stripeRight = model.scene.getObjectByName('Strip_Right_(2nd)');
21
+ stripeRight.material.depthTest = false;
22
+ stripeRight.renderOrder = 3;
23
+ const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
24
+ stripeTop.material.depthTest = false;
25
+ stripeTop.renderOrder = 4;
26
+ const card = model.scene.getObjectByName('Plane');
27
+ card.material.depthTest = false;
28
+ card.material.metalness = 0;
29
+ const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(object => object.material.map);
30
+ useFrame(() => {
31
+ animatedMaps.forEach(map => map.offset.y += -0.0015);
32
+ });
33
+ return /*#__PURE__*/jsxs(Fragment, {
34
+ children: [/*#__PURE__*/jsx("primitive", {
35
+ scale: 1.4,
36
+ position: [0, -10, 0],
37
+ object: model.scene
38
+ }), /*#__PURE__*/jsx("primitive", {
39
+ object: lights
40
+ })]
41
+ });
42
+ };
43
+
44
+ export { MarbleCard as default };
45
+ //# sourceMappingURL=MarbleCard-690b2b8e.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MarbleCard-690b2b8e.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,47 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var three = require('three');
6
+ var index = require('./index-c17944c0.js');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ require('react');
9
+ require('clsx');
10
+
11
+ const MarbleCard = () => {
12
+ const model = drei.useGLTF(index.defineSrc('marble-card.gltf'));
13
+ const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('marble-card-light.json'));
14
+ const sphere = model.scene.getObjectByName('Sphere1');
15
+ sphere.material.depthTest = true;
16
+ const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
17
+ stripeBottom.material.depthTest = false;
18
+ stripeBottom.renderOrder = 1;
19
+ const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
20
+ stripeLeft.material.depthTest = false;
21
+ stripeLeft.renderOrder = 2;
22
+ const stripeRight = model.scene.getObjectByName('Strip_Right_(2nd)');
23
+ stripeRight.material.depthTest = false;
24
+ stripeRight.renderOrder = 3;
25
+ const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
26
+ stripeTop.material.depthTest = false;
27
+ stripeTop.renderOrder = 4;
28
+ const card = model.scene.getObjectByName('Plane');
29
+ card.material.depthTest = false;
30
+ card.material.metalness = 0;
31
+ const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(object => object.material.map);
32
+ fiber.useFrame(() => {
33
+ animatedMaps.forEach(map => map.offset.y += -0.0015);
34
+ });
35
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
36
+ children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
37
+ scale: 1.4,
38
+ position: [0, -10, 0],
39
+ object: model.scene
40
+ }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
41
+ object: lights
42
+ })]
43
+ });
44
+ };
45
+
46
+ exports.default = MarbleCard;
47
+ //# sourceMappingURL=MarbleCard-ed7536dc.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MarbleCard-ed7536dc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,63 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var react = require('react');
6
+ var three = require('three');
7
+ var index = require('./index-c17944c0.js');
8
+ var jsxRuntime = require('react/jsx-runtime');
9
+ require('clsx');
10
+
11
+ const MultiCurrency = () => {
12
+ const ref = react.useRef();
13
+ const model = drei.useGLTF(index.defineSrc(`multi-currency.gltf`));
14
+ const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('multi-currency-light.json'));
15
+ const wiseLogo = fiber.useLoader(three.TextureLoader, index.defineSrc('wise-flag-map-bump.jpg'));
16
+ const animatedMaps = [];
17
+ model.scene.traverse(child => {
18
+ if (child.name.includes('Note')) {
19
+ child.castShadow = true;
20
+ child.receiveShadow = true;
21
+ }
22
+ if (child.name.startsWith('Coin_') && child.isMesh) {
23
+ const {
24
+ material
25
+ } = child;
26
+ material.bumpMap = wiseLogo;
27
+ material.bumpMap.flipY = false;
28
+ material.bumpScale = 1;
29
+ material.color = new three.Color(0.49, 0.49, 0.49);
30
+ child.castShadow = false;
31
+ child.receiveShadow = false;
32
+ }
33
+ if (child.name.startsWith('NoteBase_') && child.isMesh) {
34
+ animatedMaps.push(child.material.map);
35
+ }
36
+ if (child.name.includes('Wise') && child.isMesh) {
37
+ animatedMaps.push(child.material.map);
38
+ }
39
+ });
40
+ const {
41
+ mixer,
42
+ clips
43
+ } = drei.useAnimations(model.animations, ref);
44
+ fiber.useFrame(() => {
45
+ animatedMaps.forEach(animatedMap => {
46
+ animatedMap.offset.x += 0.001;
47
+ });
48
+ mixer.clipAction(clips[0]).play();
49
+ });
50
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
51
+ children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
52
+ ref: ref,
53
+ position: [-0.5, -10, 0],
54
+ scale: 1.3,
55
+ object: model.scene
56
+ }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
57
+ object: lights
58
+ })]
59
+ });
60
+ };
61
+
62
+ exports.default = MultiCurrency;
63
+ //# sourceMappingURL=MultiCurrency-0456db19.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiCurrency-0456db19.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,61 @@
1
+ import { useGLTF, useAnimations } from '@react-three/drei';
2
+ import { useLoader, useFrame } from '@react-three/fiber';
3
+ import { useRef } from 'react';
4
+ import { ObjectLoader, TextureLoader, Color } from 'three';
5
+ import { d as defineSrc } from './index-3b6277fc.esm.js';
6
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
7
+ import 'clsx';
8
+
9
+ const MultiCurrency = () => {
10
+ const ref = useRef();
11
+ const model = useGLTF(defineSrc(`multi-currency.gltf`));
12
+ const lights = useLoader(ObjectLoader, defineSrc('multi-currency-light.json'));
13
+ const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
14
+ const animatedMaps = [];
15
+ model.scene.traverse(child => {
16
+ if (child.name.includes('Note')) {
17
+ child.castShadow = true;
18
+ child.receiveShadow = true;
19
+ }
20
+ if (child.name.startsWith('Coin_') && child.isMesh) {
21
+ const {
22
+ material
23
+ } = child;
24
+ material.bumpMap = wiseLogo;
25
+ material.bumpMap.flipY = false;
26
+ material.bumpScale = 1;
27
+ material.color = new Color(0.49, 0.49, 0.49);
28
+ child.castShadow = false;
29
+ child.receiveShadow = false;
30
+ }
31
+ if (child.name.startsWith('NoteBase_') && child.isMesh) {
32
+ animatedMaps.push(child.material.map);
33
+ }
34
+ if (child.name.includes('Wise') && child.isMesh) {
35
+ animatedMaps.push(child.material.map);
36
+ }
37
+ });
38
+ const {
39
+ mixer,
40
+ clips
41
+ } = useAnimations(model.animations, ref);
42
+ useFrame(() => {
43
+ animatedMaps.forEach(animatedMap => {
44
+ animatedMap.offset.x += 0.001;
45
+ });
46
+ mixer.clipAction(clips[0]).play();
47
+ });
48
+ return /*#__PURE__*/jsxs(Fragment, {
49
+ children: [/*#__PURE__*/jsx("primitive", {
50
+ ref: ref,
51
+ position: [-0.5, -10, 0],
52
+ scale: 1.3,
53
+ object: model.scene
54
+ }), /*#__PURE__*/jsx("primitive", {
55
+ object: lights
56
+ })]
57
+ });
58
+ };
59
+
60
+ export { MultiCurrency as default };
61
+ //# sourceMappingURL=MultiCurrency-1b491db5.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiCurrency-1b491db5.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,39 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var react = require('react');
6
+ var three = require('three');
7
+ var index = require('./index-c17944c0.js');
8
+ var jsxRuntime = require('react/jsx-runtime');
9
+ require('clsx');
10
+
11
+ const Plane = () => {
12
+ const ref = react.useRef();
13
+ const model = drei.useGLTF(index.defineSrc('plane.gltf'));
14
+ const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('plane-light.json'));
15
+ const plane = model.scene.getObjectByName('Plane_6_update');
16
+ const {
17
+ mixer,
18
+ clips
19
+ } = drei.useAnimations(model.animations, ref);
20
+ fiber.useFrame(() => {
21
+ model.materials['Tapestry WebGL'].map.offset.y += 0.018;
22
+ plane.position.x = 0.45;
23
+ plane.position.y = 7.5;
24
+ mixer.clipAction(clips[0]).play();
25
+ });
26
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
27
+ children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
28
+ ref: ref,
29
+ scale: 1.3,
30
+ position: [0, -7, 0],
31
+ object: model.scene
32
+ }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
33
+ object: lights
34
+ })]
35
+ });
36
+ };
37
+
38
+ exports.default = Plane;
39
+ //# sourceMappingURL=Plane-b6340ff4.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Plane-b6340ff4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,37 @@
1
+ import { useGLTF, useAnimations } from '@react-three/drei';
2
+ import { useLoader, useFrame } from '@react-three/fiber';
3
+ import { useRef } from 'react';
4
+ import { ObjectLoader } from 'three';
5
+ import { d as defineSrc } from './index-3b6277fc.esm.js';
6
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
7
+ import 'clsx';
8
+
9
+ const Plane = () => {
10
+ const ref = useRef();
11
+ const model = useGLTF(defineSrc('plane.gltf'));
12
+ const lights = useLoader(ObjectLoader, defineSrc('plane-light.json'));
13
+ const plane = model.scene.getObjectByName('Plane_6_update');
14
+ const {
15
+ mixer,
16
+ clips
17
+ } = useAnimations(model.animations, ref);
18
+ useFrame(() => {
19
+ model.materials['Tapestry WebGL'].map.offset.y += 0.018;
20
+ plane.position.x = 0.45;
21
+ plane.position.y = 7.5;
22
+ mixer.clipAction(clips[0]).play();
23
+ });
24
+ return /*#__PURE__*/jsxs(Fragment, {
25
+ children: [/*#__PURE__*/jsx("primitive", {
26
+ ref: ref,
27
+ scale: 1.3,
28
+ position: [0, -7, 0],
29
+ object: model.scene
30
+ }), /*#__PURE__*/jsx("primitive", {
31
+ object: lights
32
+ })]
33
+ });
34
+ };
35
+
36
+ export { Plane as default };
37
+ //# sourceMappingURL=Plane-d631e81c.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Plane-d631e81c.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,48 @@
1
+ 'use strict';
2
+
3
+ var drei = require('@react-three/drei');
4
+ var fiber = require('@react-three/fiber');
5
+ var three = require('three');
6
+ var index = require('./index-c17944c0.js');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ require('react');
9
+ require('clsx');
10
+
11
+ const Scene = ({
12
+ children,
13
+ assetName,
14
+ size = index.Sizes.MEDIUM
15
+ }) => {
16
+ const castShadows = [index.Assets.LOCK, index.Assets.MULTI_CURRENCY, index.Assets.MAGNIFYING_GLASS].includes(assetName);
17
+ return /*#__PURE__*/jsxRuntime.jsxs(fiber.Canvas, {
18
+ onCreated: ({
19
+ gl
20
+ }) => {
21
+ gl.setClearColor(0x000000, 0);
22
+ gl.setSize(index.ImageSizes[size], index.ImageSizes[size]);
23
+ gl.clearDepth();
24
+ },
25
+ gl: {
26
+ alpha: true,
27
+ antialias: true,
28
+ pixelRatio: window.devicePixelRatio * 1,
29
+ toneMapping: three.LinearToneMapping,
30
+ outputColorSpace: three.SRGBColorSpace
31
+ },
32
+ shadows: {
33
+ type: three.PCFShadowMap,
34
+ enabled: castShadows
35
+ },
36
+ children: [/*#__PURE__*/jsxRuntime.jsx(drei.PerspectiveCamera, {
37
+ makeDefault: true,
38
+ far: 1000000000000,
39
+ near: 0.1,
40
+ fov: 10.29,
41
+ aspect: window.innerWidth / window.innerHeight,
42
+ position: [0, 0, 100]
43
+ }), children]
44
+ });
45
+ };
46
+
47
+ exports.default = Scene;
48
+ //# sourceMappingURL=Scene-45fbe252.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scene-45fbe252.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":[null],"names":["Scene","children","assetName","Sizes","MEDIUM","castShadows","Assets","LOCK","MULTI_CURRENCY"],"mappings":";;;;;;;;;;AAYEA,MAAAA,KAAO,GAAAA,CAAA;EAAAC,QAAsB;EAAAC,SAAG;SAASC,WAAC,CAAAC,MAAAA;AAAA,CAAA,KAAA;AACzC,EAAA,MAAAC,WAAA,GAAA,CAEHC,YAAM,CAAAC,IAAK,EAsCXD,YAAA,CAAeE,cAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,46 @@
1
+ import { PerspectiveCamera } from '@react-three/drei';
2
+ import { Canvas } from '@react-three/fiber';
3
+ import { LinearToneMapping, SRGBColorSpace, PCFShadowMap } from 'three';
4
+ import { A as Assets, I as ImageSizes, S as Sizes } from './index-3b6277fc.esm.js';
5
+ import { jsxs, jsx } from 'react/jsx-runtime';
6
+ import 'react';
7
+ import 'clsx';
8
+
9
+ const Scene = ({
10
+ children,
11
+ assetName,
12
+ size = Sizes.MEDIUM
13
+ }) => {
14
+ const castShadows = [Assets.LOCK, Assets.MULTI_CURRENCY, Assets.MAGNIFYING_GLASS].includes(assetName);
15
+ return /*#__PURE__*/jsxs(Canvas, {
16
+ onCreated: ({
17
+ gl
18
+ }) => {
19
+ gl.setClearColor(0x000000, 0);
20
+ gl.setSize(ImageSizes[size], ImageSizes[size]);
21
+ gl.clearDepth();
22
+ },
23
+ gl: {
24
+ alpha: true,
25
+ antialias: true,
26
+ pixelRatio: window.devicePixelRatio * 1,
27
+ toneMapping: LinearToneMapping,
28
+ outputColorSpace: SRGBColorSpace
29
+ },
30
+ shadows: {
31
+ type: PCFShadowMap,
32
+ enabled: castShadows
33
+ },
34
+ children: [/*#__PURE__*/jsx(PerspectiveCamera, {
35
+ makeDefault: true,
36
+ far: 1000000000000,
37
+ near: 0.1,
38
+ fov: 10.29,
39
+ aspect: window.innerWidth / window.innerHeight,
40
+ position: [0, 0, 100]
41
+ }), children]
42
+ });
43
+ };
44
+
45
+ export { Scene as default };
46
+ //# sourceMappingURL=Scene-783029f4.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scene-783029f4.esm.js","sources":["../src/illustrations3d/Scene.tsx"],"sourcesContent":[null],"names":["Scene","children","assetName","Sizes","MEDIUM","castShadows","Assets","LOCK","MULTI_CURRENCY"],"mappings":";;;;;;;;AAYEA,MAAAA,KAAO,GAAAA,CAAA;EAAAC,QAAsB;EAAAC,SAAG;SAASC,KAAC,CAAAC,MAAAA;AAAA,CAAA,KAAA;AACzC,EAAA,MAAAC,WAAA,GAAA,CAEHC,MAAM,CAAAC,IAAK,EAsCXD,MAAA,CAAeE,cAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/common.d.ts CHANGED
@@ -3,6 +3,11 @@ export declare enum Sizes {
3
3
  MEDIUM = "medium",
4
4
  LARGE = "large"
5
5
  }
6
+ export declare const ImageSizes: {
7
+ small: number;
8
+ medium: number;
9
+ large: number;
10
+ };
6
11
  export type LargeSize = 'large';
7
12
  export type MediumSize = 'medium';
8
13
  export type SmallSize = 'small';
@@ -1 +1 @@
1
- {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../src/common.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAChC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAClC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../src/common.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,UAAU;;;;CAItB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAChC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAClC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { LargeSize, MediumSize, SmallSize } from '../common';
3
+ export type Illustration3DNames = 'lock' | 'globe' | 'confetti' | 'check-mark' | 'flower' | 'graph' | 'jars' | 'magnifying-glass' | 'marble' | 'marble-card' | 'multi-currency' | 'plane';
4
+ export type Props = {
5
+ name: Illustration3DNames;
6
+ size?: SmallSize | MediumSize | LargeSize;
7
+ className?: string;
8
+ };
9
+ declare const Illustration3D: ({ name, size, className }: Props) => import("react").JSX.Element;
10
+ export default Illustration3D;
11
+ //# sourceMappingURL=Illustration3D.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Illustration3D.d.ts","sourceRoot":"","sources":["../../src/illustrations3d/Illustration3D.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAS,MAAM,WAAW,CAAC;AAKpE,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GACN,OAAO,GACP,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,MAAM,GACN,kBAAkB,GAClB,QAAQ,GACR,aAAa,GACb,gBAAgB,GAChB,OAAO,CAAC;AAEZ,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,QAAA,MAAM,cAAc,8BAA8C,KAAK,gCAkCtE,CAAC;AA+DF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type { PropsWithChildren } from 'react';
2
+ import { LargeSize, MediumSize, SmallSize } from '../common';
3
+ import type { Illustration3DNames } from './Illustration3D';
4
+ export type Props = PropsWithChildren<{
5
+ assetName: Illustration3DNames;
6
+ size?: SmallSize | MediumSize | LargeSize;
7
+ }>;
8
+ declare const Scene: ({ children, assetName, size }: Props) => import("react").JSX.Element;
9
+ export default Scene;
10
+ //# sourceMappingURL=Scene.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scene.d.ts","sourceRoot":"","sources":["../../src/illustrations3d/Scene.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAc,SAAS,EAAE,UAAU,EAAS,SAAS,EAAE,MAAM,WAAW,CAAC;AAGhF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,MAAM,KAAK,GAAG,iBAAiB,CAAC;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CAC3C,CAAC,CAAC;AAEH,QAAA,MAAM,KAAK,kCAAkD,KAAK,gCAoCjE,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { default } from './Illustration3D';
2
+ export type { Props as Illustration3DProps } from './Illustration3D';
3
+ export type { Illustration3DNames } from './Illustration3D';
4
+ export { isIllustrationSupport3D } from './utils';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/illustrations3d/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAErE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ declare const CheckMark: () => import("react").JSX.Element;
3
+ export default CheckMark;
4
+ //# sourceMappingURL=CheckMark.d.ts.map