Spline Scene

[{"_1":2,"_310":-5,"_311":-5},"loaderData",{"_3":4,"_91":92,"_282":283,"_309":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_277":-5,"_278":-5,"_279":280,"_131":132,"_139":99,"_100":101,"_98":99,"_118":-7,"_50":51,"_281":26},"type","val","author","94d57792-53b4-4b86-8fc7-7f363da856a2",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":117,"_118":119,"_120":26,"_121":122,"_123":124,"_125":31,"_126":31,"_127":31,"_128":31,"_129":-5,"_20":130,"_135":-5,"_136":-7,"_137":138,"_139":99,"_140":141},"name","Spline","valNameId","c4371a96-72d6-11ef-b54a-de64eea55b61","parentFolderId","isOwned","privacy","public","readme","# Spline ","valType","http","currentVersion","35a7e6aa-7355-11ef-bb92-de64eea55b61","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [SplineComponent, setSplineComponent] = useState(null);\n const [error, setError] = useState(null);\n const [isDarkBackground, setIsDarkBackground] = useState(false);\n\n useEffect(() => {\n // Load the Spline component dynamically\n import(\"https://esm.sh/@splinetool/react-spline@2.2.6\")\n .then((module) => {\n setSplineComponent(() => module.default);\n })\n .catch((err) => {\n console.error(\"Failed to load Spline:\", err);\n setError(\"Failed to load Spline component\");\n });\n\n // Define a consistent 4-second cycle for background transitions\n const cycleDuration = 7000;\n\n const timer = setInterval(() => {\n setIsDarkBackground((prev) => !prev);\n }, cycleDuration);\n\n return () => clearInterval(timer);\n }, []);\n\n if (error) {\n return

Error: {error}

;\n }\n\n if (!SplineComponent) {\n return

Loading Spline...

;\n }\n\n return (\n

\n {\n console.error(\"Spline error:\", err);\n setError(\"Error rendering Spline scene\");\n }}\n />\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n Spline Scene\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n padding: 0;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n}\n\n#root, #root > div {\n width: 100%;\n height: 100%;\n}\n\n.light-bg {\n background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);\n transition: background 4s ease;\n}\n\n.dark-bg {\n background: linear-gradient(135deg, #000000 0%, #1a237e 100%);\n transition: background 4s ease;\n}\n`;\n\nexport default server;","createdAt",["D",1726399528136],"version",34,"currentUserHasLiked","likeCount",4,"forkCount",1,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_131":132,"_133":134},"handle","muhammad_owais_warsi","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ya2ZIR28xT3FNdWtGNGlEem82bEhIREprOVMifQ","forkedVal","interval","slug","muhammad_owais_warsi/Spline","description","versions",[142,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,264,268,271,274],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1726399528136],{"_118":146,"_143":-5,"_116":147,"_113":148},33,["D",1726399527743],"356c06f8-7355-11ef-8d4c-de64eea55b61",{"_118":150,"_143":-5,"_116":151,"_113":152},32,["D",1726399499847],"24cb4ba6-7355-11ef-950b-de64eea55b61",{"_118":154,"_143":-5,"_116":155,"_113":156},31,["D",1726399499803],"24c4a936-7355-11ef-aa2d-de64eea55b61",{"_118":158,"_143":-5,"_116":159,"_113":160},30,["D",1726399342297],"c6e321a8-7354-11ef-af16-de64eea55b61",{"_118":162,"_143":-5,"_116":163,"_113":164},29,["D",1726388150941],"b851a4da-733a-11ef-88b6-de64eea55b61",{"_118":166,"_143":-5,"_116":167,"_113":168},28,["D",1726388134467],"ae7fe21e-733a-11ef-9c4e-de64eea55b61",{"_118":170,"_143":-5,"_116":171,"_113":172},27,["D",1726388065164],"85312e68-733a-11ef-9c40-de64eea55b61",{"_118":174,"_143":-5,"_116":175,"_113":176},26,["D",1726348382647],"2091bf7e-72de-11ef-9d9c-de64eea55b61",{"_118":178,"_143":-5,"_116":179,"_113":180},25,["D",1726348060679],"60a93ff2-72dd-11ef-afc9-de64eea55b61",{"_118":182,"_143":-5,"_116":183,"_113":184},24,["D",1726347508688],"17a603fe-72dc-11ef-b522-de64eea55b61",{"_118":186,"_143":-5,"_116":187,"_113":188},23,["D",1726347486439],"0a632fbe-72dc-11ef-af93-de64eea55b61",{"_118":190,"_143":-5,"_116":191,"_113":192},22,["D",1726347452239],"f6009624-72db-11ef-b3a0-de64eea55b61",{"_118":194,"_143":-5,"_116":195,"_113":196},21,["D",1726347425250],"e5ea804c-72db-11ef-b0d0-de64eea55b61",{"_118":198,"_143":-5,"_116":199,"_113":200},20,["D",1726347395522],"d432416e-72db-11ef-8731-de64eea55b61",{"_118":202,"_143":-5,"_116":203,"_113":204},19,["D",1726347355087],"bc1869aa-72db-11ef-9306-de64eea55b61",{"_118":206,"_143":-5,"_116":207,"_113":208},18,["D",1726347323755],"a96ba79a-72db-11ef-bce8-de64eea55b61",{"_118":210,"_143":-5,"_116":211,"_113":212},17,["D",1726347283357],"9157497a-72db-11ef-84bf-de64eea55b61",{"_118":214,"_143":-5,"_116":215,"_113":216},16,["D",1726347261690],"846d1ece-72db-11ef-bbde-de64eea55b61",{"_118":218,"_143":-5,"_116":219,"_113":220},15,["D",1726347131034],"368cb0a2-72db-11ef-bdfa-de64eea55b61",{"_118":222,"_143":-5,"_116":223,"_113":224},14,["D",1726347103496],"2622ae92-72db-11ef-a333-de64eea55b61",{"_118":226,"_143":-5,"_116":227,"_113":228},13,["D",1726347046034],"03e2abd4-72db-11ef-bdfa-de64eea55b61",{"_118":230,"_143":-5,"_116":231,"_113":232},12,["D",1726346230425],"1dbea14a-72d9-11ef-8f1e-de64eea55b61",{"_118":234,"_143":-5,"_116":235,"_113":236},11,["D",1726346186007],"03450732-72d9-11ef-b575-de64eea55b61",{"_118":238,"_143":-5,"_116":239,"_113":240},10,["D",1726346030116],"a659de94-72d8-11ef-915d-de64eea55b61",{"_118":242,"_143":-5,"_116":243,"_113":244},9,["D",1726345964264],"7f19b340-72d8-11ef-8ae9-de64eea55b61",{"_118":246,"_143":-5,"_116":247,"_113":248},8,["D",1726345963976],"7eedbb00-72d8-11ef-b1cd-de64eea55b61",{"_118":250,"_143":-5,"_116":251,"_113":252},7,["D",1726345940535],"70f4e53c-72d8-11ef-b7a1-de64eea55b61",{"_118":254,"_143":-5,"_116":255,"_113":256},6,["D",1726345503121],"6c3cbc1e-72d7-11ef-b0be-de64eea55b61",{"_118":258,"_143":-5,"_116":259,"_113":260},5,["D",1726345482780],"601d0362-72d7-11ef-bbb7-de64eea55b61",{"_118":122,"_143":-5,"_116":262,"_113":263},["D",1726345339528],"0aba89c6-72d7-11ef-9882-de64eea55b61",{"_118":265,"_143":-5,"_116":266,"_113":267},3,["D",1726345306698],"f7290afe-72d6-11ef-b6e3-de64eea55b61",{"_118":90,"_143":-5,"_116":269,"_113":270},["D",1726345283015],"e90b34ec-72d6-11ef-827d-de64eea55b61",{"_118":124,"_143":-5,"_116":272,"_113":273},["D",1726345266720],"df54e83a-72d6-11ef-827d-de64eea55b61",{"_118":31,"_143":-5,"_116":275,"_113":276},["D",1726345221242],"c43972dc-72d6-11ef-b54a-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.forks",{"_284":285,"_305":124,"_306":138,"_307":31,"_94":308},"forksList",[286],{"_100":287,"_288":289},"c14e0724-7e19-11ef-ae2b-de64eea55b61","initialData",{"_98":99,"_95":290,"_100":287,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":291,"_112":26,"_113":291,"_114":115,"_116":292,"_118":31,"_120":26,"_121":31,"_125":31,"_126":31,"_127":31,"_123":31,"_128":31,"_129":-5,"_20":293,"_135":296,"_136":-7,"_139":99,"_298":-5,"_137":299,"_140":300},"eb0034d0-f76c-4785-b57d-089661f71f62","c168fba6-7e19-11ef-ae2b-de64eea55b61",["D",1727583455590],{"_131":294,"_133":295},"mrsnor","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybVZ4TjFmZ0dFR1ZtTXpscnNialhkbUVOSXEifQ",{"_113":111,"_131":132,"_98":99,"_118":119,"_297":-5},"prDisabledHint","latestEvaluation","mrsnor/Spline",[301],{"_116":302,"_118":31,"_303":304},["D",1727583455590],"n","1","forksCount","valname","page",{"_113":111,"_98":99,"_131":132,"_11":96,"_118":119,"_100":101,"_114":115,"_104":105,"_112":26,"_137":138},"routes/_app","actionData","errors"]