init-card-3d.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Card 3D</title> <link rel="stylesheet" href="https://use.typekit.net/yce6lwa.css"> <!-- force the webfont to actually load so canvas text can use it --> <style>.font-warm{font-family:'new-rubrik-edge';position:absolute;left:-9999px}</style> <style> html, body { margin: 0; height: 100%; background: var(--swatch-page-bg); overflow: hidden; font: 13px ui-monospace, monospace; color: #ccc; } #stage { position: absolute; inset: 0; } .bar { position: fixed; top: 10px; left: 10px; z-index: 10; display: flex; gap: 6px; align-items: center; } .bar input { width: 320px; background: var(--swatch-chrome-panel); color: #eee; border: 1px solid #444; border-radius: var(--radius-md, 6px); padding: 6px 8px; font: inherit; } .bar button { background: var(--swatch-chrome-panel); color: #eee; border: 1px solid #444; border-radius: var(--radius-md, 6px); padding: 6px 10px; cursor: pointer; } .bar button:hover { background: var(--swatch-chrome-panel-hover); } .hint { position: fixed; bottom: 10px; left: 10px; color: #666; } </style> </head> <body> <div class="bar"> <input id="id" placeholder="card Thing id" value="6f281b84-8744-458a-816a-5a3ab847fe5b"> <button id="go">load</button> <button id="spin">spin ⟳</button> <button id="txt">text: live</button> </div> <div id="stage"></div> <div class="hint">drag to rotate · scroll to zoom · front = SVG card, back = ♣ · text: baked (in PNG) vs live (canvas, real font, from DB)</div> <span class="font-warm">warm</span>
<script src="/init/chips/card-3d.js"></script> <script> var stage = document.getElementById('stage'); var handle = null, spinning = true, textMode = 'live'; function load() { if (handle) handle.dispose(); stage.innerHTML = ''; // Wait for the webfont so canvas text draws in New Rubrik, not a fallback. (document.fonts ? document.fonts.ready : Promise.resolve()).then(function () { handle = window.Card3D.mount(stage, document.getElementById('id').value.trim(), { autoRotate: spinning, text: textMode === 'live' ? 'live' : 'baked' }); }); } document.getElementById('txt').onclick = function () { textMode = textMode === 'live' ? 'baked' : 'live'; this.textContent = 'text: ' + textMode; load(); }; document.getElementById('go').onclick = load; document.getElementById('spin').onclick = function () { spinning = !spinning; load(); }; document.getElementById('id').addEventListener('keydown', function (e) { if (e.key === 'Enter') load(); }); load(); </script> </body> </html>