feat: replace the static images in the homepage features section with…

… Spline

packages/magickbase/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "1.0.4",
     "@splinetool/react-spline": "2.2.6",
-    "@splinetool/runtime": "0.9.490",
+    "@splinetool/runtime": "0.9.516",
     "@types/node": "20.8.6",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",

packages/neuron/package.json

@@ -21,6 +21,8 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^0.9.516",
     "@tanstack/react-query": "^4.29.12",
     "@trpc/client": "^10.28.2",
     "@trpc/next": "^10.28.2",

packages/neuron/src/pages/home/index.module.scss

@@ -152,8 +152,19 @@
     align-items: center;
     justify-content: space-between;
 
+    .spline {
+      // Because the canvas is hidden until it finishes loading, we need a placeholder width and height to prevent page jitter.
+      width: 400px;
+      height: 400px;
+
+      canvas {
+        width: 400px;
+        height: 400px;
+      }
+    }
+
     &:nth-child(even) {
-      > img {
+      .spline {
         order: 2;
       }
     }
@@ -180,10 +191,15 @@
       flex-direction: column;
       gap: 24px;
 
-      > img {
+      .spline {
         order: 2;
-        max-width: 300px;
-        height: auto;
+        width: 300px;
+        height: 300px;
+
+        canvas {
+          width: 300px;
+          height: 300px;
+        }
       }
 
       .textWrapper {

packages/neuron/src/pages/home/index.page.tsx

@@ -2,10 +2,12 @@ import { GetStaticProps, type NextPage } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Image, { StaticImageData } from 'next/image'
-import { ComponentProps, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'
+import { ComponentProps, FC, PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { UAParser } from 'ua-parser-js'
+import Spline from '@splinetool/react-spline'
+import { Application } from '@splinetool/runtime'
 import { Page } from '../../components/Page'
 import styles from './index.module.scss'
 import TopShadow from './top-shadow.svg'
@@ -14,9 +16,6 @@ import IconOval from './oval.svg'
 import IconGithub from './github.svg'
 import ImgNeuronOverviewEN from './neuron-overview-en.png'
 import ImgNeuronOverviewZH from './neuron-overview-zh.png'
-import ImgEasy from './easy.png'
-import ImgPrivate from './private.png'
-import ImgReliable from './reliable.png'
 import ImgNeuronLogo from './neuron-logo.png'
 import { ParsedAsset, Release, getAssetsFromNeuronRelease, getLatestRelease } from '../../utils'
 
@@ -30,6 +29,11 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
 
   const ImgNeuronOverview = getNeuronOverviewImg(locale)
 
+  const initFeatureSpline = useCallback((spline: Application) => {
+    spline.canvas.style.width = ''
+    spline.canvas.style.height = ''
+  }, [])
+
   return (
     <Page className={styles.page} contentWrapper={{ className: styles.contentWrapper }}>
       <TopShadow className={styles.topShadow} />
@@ -67,7 +71,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
 
       <div className={styles.features}>
         <div className={styles.feature}>
-          <Image src={ImgEasy} width={400} height={400} alt="Easy CKB wallet concept map" />
+          <Spline
+            className={styles.spline}
+            style={{ width: '', height: '' }}
+            scene="https://prod.spline.design/WulXRsTwZxwaILcy/scene.splinecode"
+            onLoad={initFeatureSpline}
+          />
           <div className={styles.textWrapper}>
             <div className={styles.title}>{t('Easy to use')}</div>
             <div className={styles.description}>
@@ -79,7 +88,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
         </div>
 
         <div className={styles.feature}>
-          <Image src={ImgPrivate} width={400} height={400} alt="Shields with a sci-fi feel" />
+          <Spline
+            className={styles.spline}
+            style={{ width: '', height: '' }}
+            scene="https://prod.spline.design/dODJjWBI8TGyDe3f/scene.splinecode"
+            onLoad={initFeatureSpline}
+          />
           <div className={styles.textWrapper}>
             <div className={styles.title}>{t('Private and Secure')}</div>
             <div className={styles.description}>
@@ -91,7 +105,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
         </div>
 
         <div className={styles.feature}>
-          <Image src={ImgReliable} width={400} height={400} alt="Frosted Glass Textured Statistical Statements" />
+          <Spline
+            className={styles.spline}
+            style={{ width: '', height: '' }}
+            scene="https://prod.spline.design/T6POKwH2p9nWnNm9/scene.splinecode"
+            onLoad={initFeatureSpline}
+          />
           <div className={styles.textWrapper}>
             <div className={styles.title}>{t('Reliable Support')}</div>
             <div className={styles.description}>

yarn.lock

@@ -2262,7 +2262,7 @@ __metadata:
   dependencies:
     "@radix-ui/react-dialog": 1.0.4
     "@splinetool/react-spline": 2.2.6
-    "@splinetool/runtime": 0.9.490
+    "@splinetool/runtime": 0.9.516
     "@types/node": 20.8.6
     "@types/react": 18.2.28
     "@types/react-dom": 18.2.13
@@ -2294,6 +2294,8 @@ __metadata:
     "@radix-ui/react-dropdown-menu": ^2.0.5
     "@radix-ui/react-popover": ^1.0.6
     "@radix-ui/react-tooltip": ^1.0.6
+    "@splinetool/react-spline": ^2.2.6
+    "@splinetool/runtime": ^0.9.516
     "@svgr/webpack": ^8.0.1
     "@tanstack/react-query": ^4.29.12
     "@trpc/client": ^10.28.2
@@ -3416,7 +3418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@splinetool/react-spline@npm:2.2.6":
+"@splinetool/react-spline@npm:2.2.6, @splinetool/react-spline@npm:^2.2.6":
   version: 2.2.6
   resolution: "@splinetool/react-spline@npm:2.2.6"
   dependencies:
@@ -3430,13 +3432,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@splinetool/runtime@npm:0.9.490":
-  version: 0.9.490
-  resolution: "@splinetool/runtime@npm:0.9.490"
+"@splinetool/runtime@npm:0.9.516, @splinetool/runtime@npm:^0.9.516":
+  version: 0.9.516
+  resolution: "@splinetool/runtime@npm:0.9.516"
   dependencies:
     on-change: ^4.0.0
     semver-compare: ^1.0.0
-  checksum: 66fdc1689e05fcf081c3f1562e92e9f8d2f0dda8f842be6ae0486e82b399d4d629ee92a847b23aea5179addf2334d123754472cef1b997c97746bb38fce93ce4
+  checksum: 88dff989b44aeda4faac59b3b69a2406e2ce96dd5608d21d9d3cdc67305ded33140e7d13847ef9ba7493c66e9363a3e87eafd004802cf287ca92ee5ac1b6543a
   languageName: node
   linkType: hard