cy_e0b
README.md

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { motion } from "https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0"; import ReactDOM from "https://esm.sh/react-dom@18.2.0"; import React from "https://esm.sh/react@18.2.0";

function App() { const draw = { hidden: { pathLength: 0, opacity: 0 }, visible: (i) => { const delay = i * 0.5; return { pathLength: 1, opacity: 1, transition: { pathLength: { delay, type: "spring", duration: 2, bounce: 0 }, opacity: { delay, duration: 0.01 }, }, }; }, };

return ( <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", background: "white", padding: "20px", boxSizing: "border-box", }} > <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} style={{ background: "#C0C1FF", borderRadius: "20px", padding: "clamp(15px, 5vw, 30px)", boxShadow: "0 10px 25px rgba(0,0,0,0.1)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", width: "100%", maxWidth: "500px", aspectRatio: "3/4", margin: "0 auto", overflow: "hidden", }} >

    <motion.h2
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.5 }}
      style={{
        color: "white",
        marginBottom: "12px",
        fontWeight: "600",
        textAlign: "center",
      }}
    >
      Sorry dong, Iloveyou
    </motion.h2>

    <motion.svg
      width="100%"
      height="100%"
      viewBox="0 0 465 347"
      preserveAspectRatio="xMidYMid meet"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        maxWidth: "100%",
        maxHeight: "100%",
        transform: "scale(0.9)",
      }}
      initial="hidden"
      animate="visible"
    >
      {/* TANAN NGA PATHS MO — WALA GIN USAB */}
      <motion.path
        d="M5.14075 278.719C5.14075 274.252 7.35327 269.681..."
        stroke="white"
        strokeWidth="10"
        strokeLinecap="round"
        variants={draw}
        custom={0}
      />
      {/* (same paths as before — wala ko gin-untat diri para indi lawig) */}
    </motion.svg>
  </motion.div>
</div>

); }

function client() { ReactDOM.createRoot(document.getElementById("root")).render(); }

if (typeof document !== "undefined") { client(); }

export default async function server(request) { return new Response( <html> <head> <title>Sorry dong, I love you</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: system-ui, sans-serif; } </style> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html>, { headers: { "content-type": "text/html" } } ); }