code-to-framer

// The sandbox parses a file as an ES module only when it sees an `import`; without
// one, `export default` throws "unsupported keyword: export". This page needs no
// libraries, so we take one bound import purely to select module mode.
import htm from "htm";
void htm;
 
// code-to-framer — a QuikRun snippet showcasing ONE sexy, dependency-free
// component with copy buttons that emit the right payload for Framer, Webflow,
// or plain HTML. The component (".ctf-*") is pure HTML + scoped CSS — no build,
// no runtime — so it pastes in identically anywhere. The page chrome is ".g-*".
 
const COMPONENT_HTML = `<style>
  .ctf-root{--brand:#E6FF55;--ink:#0b0b0c;display:flex;justify-content:center;padding:8px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .ctf-card{position:relative;width:400px;max-width:100%;border-radius:22px}
  .ctf-card::before{content:"";position:absolute;inset:-2px;border-radius:24px;background:conic-gradient(from 0deg,var(--brand),#7c3aed,#22d3ee,var(--brand));filter:blur(16px);opacity:.5;z-index:0;animation:ctf-spin 6s linear infinite}
  .ctf-inner{position:relative;z-index:1;border-radius:22px;background:radial-gradient(130% 120% at 50% 0%,#161619 0%,#0b0b0c 62%);border:1px solid rgba(255,255,255,.08);padding:32px 30px 28px;overflow:hidden;box-shadow:0 30px 60px -22px rgba(0,0,0,.75)}
  .ctf-aurora{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(60px);opacity:.32;z-index:0}
  .ctf-a1{background:var(--brand);top:-130px;left:-90px;animation:ctf-drift1 9s ease-in-out infinite}
  .ctf-a2{background:#7c3aed;bottom:-150px;right:-70px;animation:ctf-drift2 11s ease-in-out infinite}
  .ctf-meteor{position:absolute;top:-8%;width:120px;height:1px;background:linear-gradient(90deg,#fff,transparent);opacity:0;transform:rotate(35deg);z-index:1;animation:ctf-meteor 4.2s linear infinite}
  .ctf-m1{left:18%;animation-delay:.3s}
  .ctf-m2{left:52%;animation-delay:1.7s}
  .ctf-m3{left:82%;animation-delay:2.9s}
  .ctf-body{position:relative;z-index:2}
  .ctf-badge{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;color:var(--brand);border:1px solid rgba(230,255,85,.25);background:rgba(230,255,85,.06);padding:5px 11px;border-radius:999px}
  .ctf-ascii{margin:18px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.25;color:var(--brand);white-space:pre;text-shadow:0 0 12px rgba(230,255,85,.55)}
  .ctf-title{margin:16px 0 0;font-size:29px;line-height:1.08;font-weight:700;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#8f8f97,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ctf-shimmer 4s linear infinite}
  .ctf-sub{margin:12px 0 0;font-size:14px;line-height:1.55;color:#9a9aa2}
  .ctf-cta{margin-top:22px;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;font-weight:600;font-size:14px;color:var(--ink);background:var(--brand);border-radius:12px;padding:12px 20px;text-decoration:none}
  .ctf-cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:ctf-sheen 3.4s ease-in-out infinite}
  @keyframes ctf-spin{to{transform:rotate(360deg)}}
  @keyframes ctf-shimmer{to{background-position:200% center}}
  @keyframes ctf-sheen{0%,55%{left:-60%}100%{left:150%}}
  @keyframes ctf-drift1{50%{transform:translate(40px,32px)}}
  @keyframes ctf-drift2{50%{transform:translate(-32px,-22px)}}
  @keyframes ctf-meteor{0%{transform:translateY(-10px) rotate(35deg);opacity:0}12%{opacity:.6}100%{transform:translateY(360px) rotate(35deg);opacity:0}}
  @media (prefers-reduced-motion:reduce){.ctf-card::before,.ctf-aurora,.ctf-meteor,.ctf-title,.ctf-cta::after{animation:none}}
</style>
<div class="ctf-root">
  <div class="ctf-card">
    <div class="ctf-inner">
      <div class="ctf-aurora ctf-a1"></div>
      <div class="ctf-aurora ctf-a2"></div>
      <span class="ctf-meteor ctf-m1"></span>
      <span class="ctf-meteor ctf-m2"></span>
      <span class="ctf-meteor ctf-m3"></span>
      <div class="ctf-body">
        <span class="ctf-badge">&#10022; FEATURED</span>
        <pre class="ctf-ascii">&#9581;&#9472;&#9673;&#9472;&#9673;&#9472;&#9582;
&#9474;  &#9663;&#9663;  &#9474;
&#9584;&#9472;&#9472;&#9516;&#9472;&#9472;&#9583;</pre>
        <h3 class="ctf-title">Build things<br/>people screenshot.</h3>
        <p class="ctf-sub">A drop-in card that looks identical in Framer, Webflow, or raw HTML. Zero dependencies, pure CSS motion.</p>
        <a class="ctf-cta" href="#">Get started &#8594;</a>
      </div>
    </div>
  </div>
</div>`;
 
const PAYLOADS = {
  html:
    "<!-- Glow Card - paste anywhere. Pure HTML + CSS, zero dependencies. -->\n" +
    COMPONENT_HTML,
  webflow:
    "<!-- Webflow: drop an Embed element (Add panel > Components > Embed) and paste this. -->\n" +
    COMPONENT_HTML,
  framer: [
    "// Framer: Insert > Code > New Component, then paste this file.",
    "// No props needed - resize the layer to taste.",
    "",
    "/**",
    " * @framerSupportedLayoutWidth any-prefer-fixed",
    " * @framerSupportedLayoutHeight any-prefer-fixed",
    " */",
    "exp" + "ort default function GlowCard() {",
    "    const __html = `",
    COMPONENT_HTML,
    "`;",
    "    return (",
    "        <div",
    '            style={{ width: "100%", height: "100%" }}',
    "            dangerouslySetInnerHTML={{ __html }}",
    "        />",
    "    );",
    "}",
  ].join("\n"),
};
 
const GALLERY_CSS = `
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:#070708;color:#e7e7ea;-webkit-font-smoothing:antialiased;min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .g-bg{position:fixed;inset:0;z-index:0;
    background:
      radial-gradient(60% 50% at 50% 0%,rgba(230,255,85,.06),transparent 70%),
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/32px 32px,
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/32px 32px,
      #070708;
    -webkit-mask-image:radial-gradient(80% 80% at 50% 18%,#000,transparent);
    mask-image:radial-gradient(80% 80% at 50% 18%,#000,transparent)}
  .g-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:72px 24px 48px}
  .g-brand{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.14em;color:#9a9aa2;text-transform:uppercase}
  .g-brand span{color:#E6FF55}
  .g-h1{margin:16px 0 0;font-size:clamp(30px,5vw,48px);line-height:1.05;font-weight:700;letter-spacing:-.03em}
  .g-h1 em{font-style:normal;color:#E6FF55}
  .g-tag{margin:14px 0 0;max-width:600px;font-size:16px;line-height:1.6;color:#9a9aa2}
  .g-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;align-items:stretch}
  @media (max-width:900px){.g-grid{grid-template-columns:1fr}}
  .g-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px;padding:36px;border-radius:20px;border:1px solid rgba(255,255,255,.08);overflow:hidden;
    background:radial-gradient(120% 100% at 50% 0%,#121214,#0a0a0b 70%)}
  .g-stage::before{content:"";position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:18px 18px}
  .g-panel{display:flex;flex-direction:column;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#0c0c0e;overflow:hidden}
  .g-tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid rgba(255,255,255,.06)}
  .g-tab{flex:1;padding:9px 12px;border:none;border-radius:10px;background:transparent;color:#9a9aa2;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
  .g-tab:hover{color:#e7e7ea;background:rgba(255,255,255,.04)}
  .g-tab.is-active{color:#0b0b0c;background:#E6FF55}
  .g-file{display:flex;justify-content:space-between;padding:13px 16px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#6f6f77}
  .g-code{margin:0;padding:4px 16px 16px;overflow:auto;flex:1;max-height:300px}
  .g-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;color:#c7c7cf;white-space:pre}
  .g-copy{margin:12px;padding:13px;border:none;border-radius:12px;background:#E6FF55;color:#0b0b0c;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;box-shadow:0 8px 24px -8px rgba(230,255,85,.55)}
  .g-copy:hover{transform:translateY(-1px);filter:brightness(1.05)}
  .g-copy:active{transform:translateY(0)}
  .g-foot{margin-top:40px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#6f6f77;text-align:center}
  .g-foot a{color:#9a9aa2;text-decoration:none}
  .g-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:10;padding:10px 18px;border-radius:999px;background:#E6FF55;color:#0b0b0c;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 30px -8px rgba(230,255,85,.6)}
  .g-toast.is-show{opacity:1;transform:translate(-50%,0)}
`;
 
const payloadJSON = JSON.stringify(PAYLOADS).replace(/</g, "\\u003c");
 
const SCRIPT = `
  const P = ${payloadJSON};
  const FILE = { html:"component.html", framer:"GlowCard.tsx", webflow:"embed.html" };
  const NAME = { html:"HTML", framer:"Framer", webflow:"Webflow" };
  const codeEl = document.getElementById("g-code");
  const nameEl = document.getElementById("g-name");
  const sizeEl = document.getElementById("g-size");
  const copyEl = document.getElementById("g-copy");
  const toastEl = document.getElementById("g-toast");
  const tabs = Array.prototype.slice.call(document.querySelectorAll(".g-tab"));
  let active = "html", toastTimer;
  function bytes(s){ const n = new Blob([s]).size; return n < 1024 ? n + " B" : (n/1024).toFixed(1) + " KB"; }
  function render(){
    const code = P[active];
    codeEl.textContent = code;
    nameEl.textContent = FILE[active];
    sizeEl.textContent = bytes(code);
    copyEl.textContent = "Copy for " + NAME[active];
    tabs.forEach(function(t){ t.classList.toggle("is-active", t.dataset.t === active); });
  }
  tabs.forEach(function(t){ t.addEventListener("click", function(){ active = t.dataset.t; render(); }); });
  copyEl.addEventListener("click", async function(){
    try { await navigator.clipboard.writeText(P[active]); }
    catch(e){ const ta = document.createElement("textarea"); ta.value = P[active]; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); }
    toastEl.textContent = "Copied " + NAME[active] + " \\u2713";
    toastEl.classList.add("is-show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function(){ toastEl.classList.remove("is-show"); }, 1800);
  });
  render();
`;
 
const PAGE = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>code &#8594; framer &middot; copy-paste components</title>
  <meta name="description" content="One sexy component - copy it into Framer, Webflow, or plain HTML. Pixel-identical, zero setup." />
  <meta property="og:title" content="code &#8594; framer" />
  <meta property="og:description" content="Copy a sexy, dependency-free component into Framer, Webflow, or plain HTML." />
  <style>${GALLERY_CSS}</style>
</head>
<body>
  <div class="g-bg"></div>
  <main class="g-wrap">
    <header class="g-head">
      <div class="g-brand">code <span>&#8594;</span> framer</div>
      <h1 class="g-h1">Components you can just <em>paste</em>.</h1>
      <p class="g-tag">One drop-in card. Copy it into Framer, Webflow, or raw HTML &mdash; pixel-identical, zero setup, pure CSS motion.</p>
    </header>
 
    <section class="g-grid">
      <div class="g-stage">${COMPONENT_HTML}</div>
 
      <aside class="g-panel">
        <div class="g-tabs">
          <button class="g-tab is-active" data-t="html">HTML</button>
          <button class="g-tab" data-t="framer">Framer</button>
          <button class="g-tab" data-t="webflow">Webflow</button>
        </div>
        <div class="g-file"><span id="g-name">component.html</span><span id="g-size">0 B</span></div>
        <pre class="g-code"><code id="g-code"></code></pre>
        <button class="g-copy" id="g-copy">Copy for HTML</button>
      </aside>
    </section>
 
    <footer class="g-foot">Built on QuikRun &middot; <a href="https://quik.run">quik.run</a></footer>
  </main>
  <div class="g-toast" id="g-toast"></div>
  <script>${SCRIPT}</script>
</body>
</html>`;
 
export default async function handler() {
  return new Response(PAGE, {
    status: 200,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
}