Spline Scene

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [SplineComponent, setSplineComponent] = useState(null); const [error, setError] = useState(null); const [isDarkBackground, setIsDarkBackground] = useState(false); useEffect(() => { // Load the Spline component dynamically import("https://esm.sh/@splinetool/react-spline@2.2.6") .then((module) => { setSplineComponent(() => module.default); }) .catch((err) => { console.error("Failed to load Spline:", err); setError("Failed to load Spline component"); }); // Define a consistent 4-second cycle for background transitions const cycleDuration = 7000; const timer = setInterval(() => { setIsDarkBackground((prev) => !prev); }, cycleDuration); return () => clearInterval(timer); }, []); if (error) { return

Error: {error}

; } if (!SplineComponent) { return

Loading Spline...

; } return (

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

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; } #root, #root > div { width: 100%; height: 100%; } .light-bg { background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%); transition: background 4s ease; } .dark-bg { background: linear-gradient(135deg, #000000 0%, #1a237e 100%); transition: background 4s ease; } `; export default server;

Spline

Version 0