Skip to content

Commit 1985d5e

Browse files
henrynoowahhenrynoowah
committed
chore: updated spline to use spline-react library
1 parent fbfa5f5 commit 1985d5e

File tree

3 files changed

+82
-18
lines changed

3 files changed

+82
-18
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
},
1111
"dependencies": {
1212
"@heroicons/react": "^2.1.1",
13+
"@splinetool/react-spline": "^2.2.6",
14+
"@splinetool/runtime": "^1.2.6",
1315
"@uiw/react-md-editor": "^3.20.5",
1416
"eslint": "8.35.0",
1517
"eslint-config-next": "13.2.3",

‎src/app/(routes)/page.tsx

+26-15
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
import { NavItem } from '@/components/main/NavItem'
44
import { NavModal } from '@/components/main/NavModal'
55
import { CubeIcon, DocumentIcon, FaceSmileIcon } from '@heroicons/react/24/solid'
6+
import Spline from '@splinetool/react-spline'
7+
import { Application, SPEObject } from '@splinetool/runtime'
68
import { motion } from 'framer-motion'
79
import { Inter } from 'next/font/google'
8-
import { useState } from 'react'
10+
import { useRef, useState } from 'react'
911

1012
const inter = Inter({ variable: '--font-inter', subsets: ['latin'] })
1113

@@ -40,6 +42,8 @@ const navList = [
4042
}
4143
]
4244

45+
const SPLINE_SCENE = 'https://prod.spline.design/rcSs4mw7jnwh5xZG/scene.splinecode'
46+
4347
const Home = () => {
4448
const [selected, setSelected] = useState<string | null>(null)
4549

@@ -72,29 +76,36 @@ const Home = () => {
7276
}
7377
}
7478

79+
const botRef = useRef<SPEObject>()
80+
const splineRef = useRef<Application>()
81+
82+
const onLoad = (spline: Application) => {
83+
splineRef.current = spline
84+
const botObj = spline.findObjectByName('Character')
85+
botRef.current = botObj
86+
}
87+
88+
const triggerAnimation = () => {
89+
console.log(botRef)
90+
if (botRef.current) {
91+
botRef.current.scale
92+
console.log(botRef.current)
93+
}
94+
}
95+
7596
return (
7697
<main className={inter.variable}>
7798
<div className="w-full h-[100vh] flex justify-center relative overflow-hidden">
7899
{/* Background Component */}
79-
<div className="relative flex justify-center w-full h-full bg-gradient-to-tl bg-primary/80">
80-
{/* <div
81-
className="absolute w-full h-full
82-
flex justify-center items-center z-30"
83-
>
84-
<h1 className="text-[42px] font-semibold opacity whitespace-nowrap z-20 text-light">NoowaH</h1>
85-
</div> */}
86-
</div>
100+
<div className="relative flex justify-center w-full h-full bg-gradient-to-tl bg-primary/80"></div>
87101

88102
<div
89103
className="absolute w-full h-full
90-
flex justify-center items-center z-30 top-[120px]"
104+
flex justify-center items-center z-30"
91105
>
92-
<script async type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
93-
<spline-viewer
94-
loading-anim-type="spinner-small-dark"
95-
url="https://prod.spline.design/rcSs4mw7jnwh5xZG/scene.splinecode"
96-
/>
106+
<Spline scene={SPLINE_SCENE} onLoad={onLoad} />
97107
</div>
108+
98109
{navList.map((nav, i) => (
99110
<NavModal selected={selected === nav.name} {...nav} key={`nav-modal-${nav}-${i}`} />
100111
))}

‎yarn.lock

+54-3
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,22 @@
207207
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36"
208208
integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
209209

210+
"@splinetool/react-spline@^2.2.6":
211+
version "2.2.6"
212+
resolved "https://registry.yarnpkg.com/@splinetool/react-spline/-/react-spline-2.2.6.tgz#c48f634f352311b9da210978f88bd195d605ee8a"
213+
integrity sha512-y9L2VEbnC6FNZZu8XMmWM9YTTTWal6kJVfP05Amf0QqDNzCSumKsJxZyGUODvuCmiAvy0PfIfEsiVKnSxvhsDw==
214+
dependencies:
215+
lodash.debounce "^4.0.8"
216+
react-merge-refs "^2.0.1"
217+
218+
"@splinetool/runtime@^1.2.6":
219+
version "1.2.6"
220+
resolved "https://registry.yarnpkg.com/@splinetool/runtime/-/runtime-1.2.6.tgz#f615181062f98053e10cbfe5badbe1b0c57ca087"
221+
integrity sha512-XHx4ulpn/7TGhKELIQyrd9I/LJVsHNJLoVeIw6wDHMOvqkdiUohm9tZ6jCFOprjRp9r63tT+0K0yxrJvJSOTDw==
222+
dependencies:
223+
on-change "^4.0.0"
224+
semver-compare "^1.0.0"
225+
210226
"@swc/[email protected]":
211227
version "0.5.2"
212228
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
@@ -2123,6 +2139,11 @@ locate-path@^6.0.0:
21232139
dependencies:
21242140
p-locate "^5.0.0"
21252141

2142+
lodash.debounce@^4.0.8:
2143+
version "4.0.8"
2144+
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
2145+
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
2146+
21262147
lodash.merge@^4.6.2:
21272148
version "4.6.2"
21282149
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -2777,6 +2798,11 @@ object.values@^1.1.6, object.values@^1.1.7:
27772798
define-properties "^1.2.0"
27782799
es-abstract "^1.22.1"
27792800

2801+
on-change@^4.0.0:
2802+
version "4.0.2"
2803+
resolved "https://registry.yarnpkg.com/on-change/-/on-change-4.0.2.tgz#838129790f09dc2ed04284944bda6e82b92c10b8"
2804+
integrity sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==
2805+
27802806
once@^1.3.0:
27812807
version "1.4.0"
27822808
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -3053,6 +3079,11 @@ react-markdown@^8.0.5, react-markdown@~8.0.0:
30533079
unist-util-visit "^4.0.0"
30543080
vfile "^5.0.0"
30553081

3082+
react-merge-refs@^2.0.1:
3083+
version "2.1.1"
3084+
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.1.1.tgz#e46763f8f1b881c0226ee54a1a2a10ffefba0233"
3085+
integrity sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==
3086+
30563087
react-syntax-highlighter@^15.5.0:
30573088
version "15.5.0"
30583089
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
@@ -3376,6 +3407,11 @@ scheduler@^0.23.0:
33763407
dependencies:
33773408
loose-envify "^1.1.0"
33783409

3410+
semver-compare@^1.0.0:
3411+
version "1.0.0"
3412+
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
3413+
integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
3414+
33793415
semver@^6.3.1:
33803416
version "6.3.1"
33813417
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -3459,8 +3495,16 @@ streamsearch@^1.1.0:
34593495
resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
34603496
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
34613497

3462-
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
3463-
name string-width-cjs
3498+
"string-width-cjs@npm:string-width@^4.2.0":
3499+
version "4.2.3"
3500+
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
3501+
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
3502+
dependencies:
3503+
emoji-regex "^8.0.0"
3504+
is-fullwidth-code-point "^3.0.0"
3505+
strip-ansi "^6.0.1"
3506+
3507+
string-width@^4.1.0:
34643508
version "4.2.3"
34653509
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
34663510
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3528,7 +3572,14 @@ stringify-entities@^4.0.0:
35283572
character-entities-html4 "^2.0.0"
35293573
character-entities-legacy "^3.0.0"
35303574

3531-
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
3575+
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
3576+
version "6.0.1"
3577+
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
3578+
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
3579+
dependencies:
3580+
ansi-regex "^5.0.1"
3581+
3582+
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
35323583
version "6.0.1"
35333584
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
35343585
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

0 commit comments

Comments
 (0)