mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
1 line
36 KiB
JSON
1 line
36 KiB
JSON
{"html":"<!doctype html>\n<html\n lang=\"en\"\n data-composition-variables='[\n { \"id\": \"botName\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Assistant name\", \"description\": \"Title in the chat header.\", \"default\": \"Assistant\" },\n { \"id\": \"userMessage\", \"type\": \"string\", \"role\": \"content\", \"label\": \"User message\", \"description\": \"The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing.\", \"default\": \"How do I turn my HTML into real video?\" },\n { \"id\": \"answer1\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Answer paragraph 1\", \"description\": \"First streamed paragraph.\", \"default\": \"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.\" },\n { \"id\": \"answer2\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Answer paragraph 2\", \"description\": \"Short second beat.\", \"default\": \"It is markup, not magic.\" },\n { \"id\": \"answer3\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Answer paragraph 3\", \"description\": \"Lead-in to the list.\", \"default\": \"What you get out of the box:\" },\n { \"id\": \"bullet1\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Bullet 1\", \"description\": \"First list item.\", \"default\": \"A catalog of motion primitives you install and own\" },\n { \"id\": \"bullet2\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Bullet 2\", \"description\": \"Second list item.\", \"default\": \"GSAP timelines that seek to any frame\" },\n { \"id\": \"bullet3\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Bullet 3\", \"description\": \"Third list item.\", \"default\": \"4K renders from a single CLI command\" },\n { \"id\": \"ecHeadline\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card headline\", \"description\": \"Closing card headline. A | breaks the line.\", \"default\": \"It's not magic.|It's HTML.\" },\n { \"id\": \"ecSub\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card subline\", \"description\": \"Supporting sentence on the closing card.\", \"default\": \"Open-source video rendering — write HTML, ship pixel-perfect video.\" },\n { \"id\": \"ecCta\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card CTA\", \"description\": \"Label on the closing card button.\", \"default\": \"Try HyperFrames\" },\n { \"id\": \"ecFooter\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card footer\", \"description\": \"Letter-spaced line at the very bottom.\", \"default\": \"HYPERFRAMES.HEYGEN.COM\" }\n ]'\n>\n <head><base href=\"/public/catalog/items/ai-chat-reveal/\">\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=1080, height=1920\" />\n <title>AI Chat Reveal</title>\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html,\n body {\n width: 1080px;\n height: 1920px;\n overflow: hidden;\n background: #000;\n }\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n }\n /* The measured 750x1624 device UI is scaled uniformly into a standard\n 1080x1920 portrait canvas so its keyboard geometry stays pixel-true. */\n #acr-root {\n position: relative;\n width: 1080px;\n height: 1920px;\n overflow: hidden;\n }\n .clip {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n #acr-chat {\n background: #fdfdfd;\n }\n .acr-stage {\n position: absolute;\n left: 96.6502px;\n top: 0;\n width: 750px;\n height: 1624px;\n transform: scale(1.18226601);\n transform-origin: top left;\n }\n #acr-chat-bg {\n position: absolute;\n inset: 0;\n background: #fdfdfd;\n }\n\n /* status bar */\n #acr-statusbar {\n position: absolute;\n top: 14px;\n left: 0;\n right: 0;\n height: 44px;\n }\n #acr-clock {\n position: absolute;\n left: 39px;\n top: 9px;\n font-size: 22px;\n font-weight: 600;\n letter-spacing: 2.4px;\n font-variant-numeric: tabular-nums;\n color: #0d0d0d;\n }\n #acr-sicons {\n position: absolute;\n right: 26px;\n top: 8px;\n display: flex;\n gap: 9px;\n align-items: center;\n }\n\n /* header */\n #acr-header {\n position: absolute;\n top: 64px;\n left: 0;\n right: 0;\n height: 52px;\n }\n #acr-hleft {\n position: absolute;\n left: 28px;\n top: 12px;\n }\n #acr-htitle {\n position: absolute;\n left: 0;\n right: 48px;\n text-align: center;\n top: 13px;\n font-size: 22px;\n font-weight: 600;\n color: #0d0d0d;\n }\n .acr-hicons {\n position: absolute;\n right: 28px;\n top: 14px;\n display: flex;\n gap: 26px;\n align-items: center;\n }\n #acr-hicons-b {\n visibility: hidden;\n opacity: 0;\n }\n\n /* user bubble */\n #acr-bubble {\n position: absolute;\n top: 129px;\n right: 32px;\n max-width: 544px;\n background: #f3f3f3;\n border-radius: 34px;\n padding: 20px 30px;\n font-size: 27px;\n line-height: 38.6px;\n color: #111;\n letter-spacing: 1.25px;\n visibility: hidden;\n opacity: 0;\n }\n\n /* answer */\n #acr-answer {\n position: absolute;\n top: 267px;\n left: 33px;\n width: 662px;\n font-size: 27px;\n line-height: 38.6px;\n color: #141414;\n letter-spacing: 1.25px;\n }\n #acr-answer .acr-ap {\n margin: 0 0 15.5px 0;\n }\n #acr-answer .acr-ali {\n display: flex;\n margin: 0 0 6.5px 0;\n }\n #acr-answer .acr-mark {\n width: 30px;\n flex: 0 0 30px;\n text-align: center;\n font-size: 18px;\n line-height: 38.6px;\n }\n #acr-answer .acr-alitext {\n flex: 1;\n }\n .acr-w {\n opacity: 0;\n }\n #acr-dot {\n position: absolute;\n left: 32px;\n top: 279px;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #646464;\n visibility: hidden;\n opacity: 0;\n }\n\n /* composer (rest dock; rides keyboard via transform) */\n #acr-composer {\n position: absolute;\n left: 30px;\n right: 30px;\n bottom: 31px;\n }\n #acr-pill {\n position: relative;\n width: 100%;\n min-height: 81px;\n background: #fff;\n border: 2px solid #ececec;\n border-radius: 41px;\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);\n display: flex;\n align-items: center;\n padding: 13px 160px 13px 78px;\n }\n #acr-plusi {\n position: absolute;\n left: 30px;\n top: 50%;\n transform: translateY(-50%);\n }\n #acr-ph {\n position: absolute;\n left: 78px;\n top: 50%;\n transform: translateY(-50%);\n color: #767676;\n font-size: 28px;\n letter-spacing: 1.25px;\n }\n #acr-ctextwrap {\n width: 100%;\n min-height: 38px;\n }\n #acr-ctext {\n font-size: 29px;\n line-height: 38px;\n color: #0d0d0d;\n letter-spacing: 1.25px;\n visibility: hidden;\n opacity: 0;\n }\n #acr-caret {\n display: inline-block;\n width: 3px;\n height: 30px;\n margin-left: 2px;\n border-radius: 1.5px;\n background: #0d0d0d;\n vertical-align: -4px;\n visibility: hidden;\n opacity: 0;\n }\n #acr-cmic {\n position: absolute;\n right: 80px;\n top: 50%;\n transform: translateY(-50%);\n }\n .acr-cbtn {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n width: 52px;\n height: 52px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n }\n #acr-btn-send-grey {\n background: #ececec;\n }\n #acr-btn-send-black {\n background: #0d0d0d;\n visibility: hidden;\n opacity: 0;\n }\n #acr-btn-stop {\n background: #0d0d0d;\n visibility: hidden;\n opacity: 0;\n }\n #acr-btn-stop .acr-sq {\n width: 19px;\n height: 19px;\n border-radius: 5px;\n background: #fff;\n }\n\n /* keyboard: geometry and #d2d5e0 ground measured from the reference */\n #acr-keyboard {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 750px;\n height: 482px;\n background: #d2d5e0;\n }\n #acr-suggest {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 74px;\n display: flex;\n }\n #acr-suggest .acr-sug {\n flex: 1;\n display: grid;\n place-items: center;\n font-size: 29px;\n color: #0d0d0d;\n position: relative;\n }\n #acr-suggest .acr-sug + .acr-sug::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 16px;\n bottom: 16px;\n width: 1.5px;\n background: #bcbabf;\n }\n .acr-key {\n position: absolute;\n height: 74px;\n background: #fdfdfd;\n border-radius: 10px;\n box-shadow: 0 2px 0 #8b8a8f;\n display: grid;\n place-items: center;\n font-size: 32px;\n color: #000;\n }\n .acr-gkey {\n background: #aeacaf;\n }\n .acr-num,\n .acr-spc {\n font-size: 27px;\n }\n .acr-kbstrip {\n position: absolute;\n bottom: 10px;\n left: 0;\n right: 0;\n height: 52px;\n }\n .acr-kglobe {\n position: absolute;\n left: 48px;\n top: 21px;\n }\n .acr-kmic {\n position: absolute;\n right: 52px;\n top: 23px;\n }\n\n /* end card: the HyperFrames closing card, on the family's dark ground */\n #acr-endcard-inner {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, #14110e 0%, #221b13 100%);\n opacity: 0;\n }\n #acr-eclogo {\n position: absolute;\n left: 255px;\n top: 112px;\n width: 240px;\n height: 72px;\n }\n #acr-ecstar {\n position: absolute;\n left: 610px;\n top: 230px;\n }\n #acr-ecvideo {\n position: absolute;\n left: 222px;\n top: 336px;\n width: 283px;\n height: 454px;\n border-radius: 36px;\n background: linear-gradient(165deg, #0f3a2c 0%, #0a9c6b 78%, #3ce6ac 100%);\n box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);\n }\n #acr-ecvideo .acr-play {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 108px;\n height: 108px;\n border-radius: 50%;\n background: rgba(253, 253, 253, 0.94);\n display: grid;\n place-items: center;\n }\n #acr-echead {\n position: absolute;\n top: 946px;\n left: 0;\n right: 0;\n text-align: center;\n font-weight: 700;\n font-size: 57px;\n line-height: 58px;\n color: #f7ece5;\n letter-spacing: 0.5px;\n }\n #acr-ecsub {\n position: absolute;\n top: 1084px;\n left: 65px;\n right: 65px;\n text-align: center;\n font-weight: 500;\n font-size: 31px;\n line-height: 40px;\n color: #cfc4b8;\n }\n #acr-eccta {\n position: absolute;\n left: 160px;\n top: 1406px;\n width: 429px;\n height: 87px;\n background: #3ce6ac;\n border-radius: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 22px;\n }\n #acr-eccta .acr-lbl {\n color: #0d0d0d;\n font-weight: 700;\n font-size: 33px;\n letter-spacing: 0.3px;\n }\n #acr-ecfoot {\n position: absolute;\n top: 1536px;\n left: 0;\n right: 0;\n text-align: center;\n font-weight: 700;\n font-size: 25px;\n letter-spacing: 4px;\n color: #3ce6ac;\n }\n </style>\n </head>\n <body>\n <div\n id=\"acr-root\"\n data-composition-id=\"ai-chat-reveal\"\n data-start=\"0\"\n data-width=\"1080\"\n data-height=\"1920\"\n data-duration=\"19.3333\"\n >\n <section id=\"acr-chat\" class=\"clip\" data-start=\"0\" data-duration=\"16.9\" data-track-index=\"1\">\n <div class=\"acr-stage\">\n <div id=\"acr-chat-bg\"></div>\n\n <div id=\"acr-statusbar\">\n <div id=\"acr-clock\">11:42</div>\n <div id=\"acr-sicons\">\n <svg width=\"30\" height=\"20\" viewBox=\"0 0 20 12\" fill=\"#0d0d0d\">\n <rect x=\"0\" y=\"7\" width=\"3\" height=\"4\" rx=\"1\" />\n <rect x=\"5\" y=\"5\" width=\"3\" height=\"6\" rx=\"1\" />\n <rect x=\"10\" y=\"2.6\" width=\"3\" height=\"8.4\" rx=\"1\" />\n <rect x=\"15\" y=\"0.5\" width=\"3\" height=\"10.5\" rx=\"1\" /></svg\n ><svg\n width=\"30\"\n height=\"21\"\n viewBox=\"0 0 22 15\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"2.2\"\n stroke-linecap=\"round\"\n >\n <path d=\"M2 5 C7 -0.5 15 -0.5 20 5\" fill=\"none\" />\n <path d=\"M5.5 8.6 C9 5 13 5 16.5 8.6\" />\n <path d=\"M9.2 12 C10.4 11 11.6 11 12.8 12\" /></svg\n ><svg width=\"46\" height=\"22\" viewBox=\"0 0 30 14\" fill=\"none\">\n <rect\n x=\"0.8\"\n y=\"0.8\"\n width=\"25\"\n height=\"12.4\"\n rx=\"3.6\"\n stroke=\"#0d0d0d\"\n stroke-opacity=\"0.32\"\n stroke-width=\"1.2\"\n />\n <rect x=\"2.4\" y=\"2.4\" width=\"22.4\" height=\"9.2\" rx=\"2.4\" fill=\"#0d0d0d\" />\n <path d=\"M28 4.6 v4.8 a2.4 2.4 0 0 0 0 -4.8\" fill=\"#0d0d0d\" fill-opacity=\"0.45\" />\n </svg>\n </div>\n </div>\n\n <div id=\"acr-header\">\n <div id=\"acr-hleft\">\n <svg\n width=\"29\"\n height=\"29\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"1.9\"\n stroke-linecap=\"round\"\n >\n <path d=\"M4 8 H20 M4 15 H12\" />\n </svg>\n </div>\n <div id=\"acr-htitle\">Assistant</div>\n <div class=\"acr-hicons\" id=\"acr-hicons-a\">\n <svg\n width=\"28\"\n height=\"28\"\n viewBox=\"0 0 26 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"1.7\"\n stroke-linecap=\"round\"\n >\n <circle cx=\"10\" cy=\"8\" r=\"4\" />\n <path d=\"M3 21 C3 16 6.5 14 10 14 C13.5 14 17 16 17 21\" />\n <path d=\"M20 6 V12 M17 9 H23\" /></svg\n ><svg\n width=\"26\"\n height=\"26\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"1.7\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"2.4 3.4\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n </svg>\n </div>\n <div class=\"acr-hicons\" id=\"acr-hicons-b\">\n <svg\n width=\"23\"\n height=\"23\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"1.7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 20 L5 15.5 L16.5 4 C17.6 2.9 19.4 2.9 20.5 4 C21.6 5.1 21.6 6.9 20.5 8 L9 19.5 L4 20 Z\"\n /></svg\n ><svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"#0d0d0d\">\n <circle cx=\"5\" cy=\"12\" r=\"1.7\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.7\" />\n <circle cx=\"19\" cy=\"12\" r=\"1.7\" />\n </svg>\n </div>\n </div>\n\n <div id=\"acr-bubble\">How do I turn my HTML into real video?</div>\n\n <div id=\"acr-dot\"></div>\n <div id=\"acr-answer\" data-layout-allow-occlusion></div>\n\n <div id=\"acr-composer\">\n <div id=\"acr-pill\">\n <div id=\"acr-plusi\">\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"1.9\"\n stroke-linecap=\"round\"\n >\n <path d=\"M12 5 V19 M5 12 H19\" />\n </svg>\n </div>\n <div id=\"acr-ph\" data-layout-allow-overlap data-layout-allow-occlusion>\n Ask anything\n </div>\n <div id=\"acr-ctextwrap\"><span id=\"acr-ctext\"></span><span id=\"acr-caret\"></span></div>\n <div id=\"acr-cmic\">\n <svg\n width=\"15\"\n height=\"22\"\n viewBox=\"0 0 24 34\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n <rect x=\"8\" y=\"2\" width=\"8\" height=\"16\" rx=\"4\" fill=\"#0d0d0d\" stroke=\"none\" />\n <path d=\"M4 14 a8 8 0 0 0 16 0 M12 22 V28 M7 31 H17\" stroke-width=\"2.2\" />\n </svg>\n </div>\n <div class=\"acr-cbtn\" id=\"acr-btn-send-grey\">\n <svg\n width=\"26\"\n height=\"26\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#b6b6b6\"\n stroke-width=\"2.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M12 19 V6 M6.5 11 L12 5.5 L17.5 11\" />\n </svg>\n </div>\n <div class=\"acr-cbtn\" id=\"acr-btn-send-black\">\n <svg\n width=\"26\"\n height=\"26\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#fff\"\n stroke-width=\"2.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M12 19 V6 M6.5 11 L12 5.5 L17.5 11\" />\n </svg>\n </div>\n <div class=\"acr-cbtn\" id=\"acr-btn-stop\"><div class=\"acr-sq\"></div></div>\n </div>\n </div>\n\n <div id=\"acr-keyboard\">\n <div id=\"acr-suggest\">\n <div class=\"acr-sug\">How</div>\n <div class=\"acr-sug\">Can</div>\n <div class=\"acr-sug\">My</div>\n </div>\n <div id=\"acr-keys\"></div>\n <div class=\"acr-kbstrip\">\n <span class=\"acr-kglobe\"\n ><svg\n width=\"30\"\n height=\"30\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#000\"\n stroke-width=\"2.6\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"9.6\" />\n <path\n d=\"M2.4 12 H21.6 M12 2.4 C7.8 6.8 7.8 17.2 12 21.6 C16.2 17.2 16.2 6.8 12 2.4 M4 7 H20 M4 17 H20\"\n stroke-width=\"2.2\"\n /></svg></span\n ><span class=\"acr-kmic\"\n ><svg\n width=\"16\"\n height=\"25\"\n viewBox=\"0 0 24 34\"\n preserveAspectRatio=\"none\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"3.9\"\n stroke-linecap=\"round\"\n >\n <rect\n x=\"5.5\"\n y=\"1\"\n width=\"13\"\n height=\"17.5\"\n rx=\"6.5\"\n fill=\"#0d0d0d\"\n stroke=\"none\"\n />\n <path d=\"M2.5 14 a9.5 9.5 0 0 0 19 0 M12 23.5 V28.5 M5.5 32 H18.5\" /></svg\n ></span>\n </div>\n </div>\n </div>\n </section>\n\n <section\n id=\"acr-endcard\"\n class=\"clip\"\n data-start=\"15.8\"\n data-duration=\"3.5333\"\n data-track-index=\"2\"\n >\n <div id=\"acr-endcard-inner\">\n <div class=\"acr-stage\">\n <img id=\"acr-eclogo\" src=\"/public/catalog/assets/f9f942c43b465616.svg\" alt=\"HyperFrames\" />\n <svg id=\"acr-ecstar\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\">\n <g stroke=\"#2f6b57\" stroke-width=\"8.5\" stroke-linecap=\"round\">\n <line x1=\"47\" y1=\"40\" x2=\"77\" y2=\"40\" />\n <line x1=\"46.5\" y1=\"42.7\" x2=\"74.2\" y2=\"54.2\" />\n <line x1=\"44.9\" y1=\"44.9\" x2=\"66.2\" y2=\"66.2\" />\n <line x1=\"42.7\" y1=\"46.5\" x2=\"54.2\" y2=\"74.2\" />\n <line x1=\"40\" y1=\"47\" x2=\"40\" y2=\"77\" />\n <line x1=\"37.3\" y1=\"46.5\" x2=\"25.8\" y2=\"74.2\" />\n <line x1=\"35.1\" y1=\"44.9\" x2=\"13.8\" y2=\"66.2\" />\n <line x1=\"33.5\" y1=\"42.7\" x2=\"5.8\" y2=\"54.2\" />\n <line x1=\"33\" y1=\"40\" x2=\"3\" y2=\"40\" />\n <line x1=\"33.5\" y1=\"37.3\" x2=\"5.8\" y2=\"25.8\" />\n <line x1=\"35.1\" y1=\"35.1\" x2=\"13.8\" y2=\"13.8\" />\n <line x1=\"37.3\" y1=\"33.5\" x2=\"25.8\" y2=\"5.8\" />\n <line x1=\"40\" y1=\"33\" x2=\"40\" y2=\"3\" />\n <line x1=\"42.7\" y1=\"33.5\" x2=\"54.2\" y2=\"5.8\" />\n <line x1=\"44.9\" y1=\"35.1\" x2=\"66.2\" y2=\"13.8\" />\n <line x1=\"46.5\" y1=\"37.3\" x2=\"74.2\" y2=\"25.8\" />\n </g>\n </svg>\n <div id=\"acr-ecvideo\">\n <div class=\"acr-play\">\n <svg width=\"40\" height=\"46\" viewBox=\"0 0 44 48\" fill=\"none\">\n <path\n d=\"M40.5 20.6 C43.2 22.1 43.2 25.9 40.5 27.4 L6.2 46.6 C3.5 48.1 0.2 46.2 0.2 43.2 L0.2 4.8 C0.2 1.8 3.5 -0.1 6.2 1.4 Z\"\n fill=\"#0d0d0d\"\n />\n </svg>\n </div>\n </div>\n <div id=\"acr-echead\">It's not magic.<br />It's HTML.</div>\n <div id=\"acr-ecsub\">\n Open-source video rendering — write HTML, ship pixel-perfect video.\n </div>\n <div id=\"acr-eccta\">\n <span class=\"acr-lbl\">Try HyperFrames</span\n ><svg\n width=\"30\"\n height=\"34\"\n viewBox=\"0 0 16 24\"\n fill=\"none\"\n stroke=\"#0d0d0d\"\n stroke-width=\"2.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M4 3 L13 12 L4 21\" />\n </svg>\n </div>\n <div id=\"acr-ecfoot\">HYPERFRAMES.HEYGEN.COM</div>\n </div>\n </div>\n </section>\n </div>\n\n <script>\n (function () {\n \"use strict\";\n\n /* -------- variables -------- */\n var vars =\n window.__hyperframes && typeof window.__hyperframes.getVariables === \"function\"\n ? window.__hyperframes.getVariables()\n : {};\n\n function text(value, fallback, max) {\n if (typeof value !== \"string\") return fallback;\n var t = value.trim();\n if (!t) return fallback;\n return t.length > max ? t.slice(0, max) : t;\n }\n\n var botName = text(vars.botName, \"Assistant\", 24);\n var userMessage = text(vars.userMessage, \"How do I turn my HTML into real video?\", 60);\n var answer1 = text(\n vars.answer1,\n \"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.\",\n 220,\n );\n var answer2 = text(vars.answer2, \"It is markup, not magic.\", 120);\n var answer3 = text(vars.answer3, \"What you get out of the box:\", 120);\n var bullets = [\n text(vars.bullet1, \"A catalog of motion primitives you install and own\", 90),\n text(vars.bullet2, \"GSAP timelines that seek to any frame\", 90),\n text(vars.bullet3, \"4K renders from a single CLI command\", 90),\n ];\n\n document.getElementById(\"acr-htitle\").textContent = botName;\n document.getElementById(\"acr-bubble\").textContent = userMessage;\n document.getElementById(\"acr-echead\").innerHTML = \"\";\n text(vars.ecHeadline, \"It's not magic.|It's HTML.\", 60)\n .split(\"|\")\n .forEach(function (line, i) {\n var head = document.getElementById(\"acr-echead\");\n if (i > 0) head.appendChild(document.createElement(\"br\"));\n head.appendChild(document.createTextNode(line));\n });\n document.getElementById(\"acr-ecsub\").textContent = text(\n vars.ecSub,\n \"Open-source video rendering — write HTML, ship pixel-perfect video.\",\n 140,\n );\n document.querySelector(\"#acr-eccta .acr-lbl\").textContent = text(\n vars.ecCta,\n \"Try HyperFrames\",\n 30,\n );\n document.getElementById(\"acr-ecfoot\").textContent = text(\n vars.ecFooter,\n \"HYPERFRAMES.HEYGEN.COM\",\n 40,\n );\n\n /* -------- build the answer DOM: paragraphs of word spans, then bullets -------- */\n var answerEl = document.getElementById(\"acr-answer\");\n var wordEls = [];\n function addPara(str) {\n var p = document.createElement(\"p\");\n p.className = \"acr-ap\";\n str.split(/\\s+/).forEach(function (word, i) {\n if (i > 0) p.appendChild(document.createTextNode(\" \"));\n var s = document.createElement(\"span\");\n s.className = \"acr-w\";\n s.textContent = word;\n p.appendChild(s);\n wordEls.push(s);\n });\n answerEl.appendChild(p);\n }\n addPara(answer1);\n addPara(answer2);\n addPara(answer3);\n bullets.forEach(function (b) {\n var row = document.createElement(\"div\");\n row.className = \"acr-ali\";\n var mark = document.createElement(\"span\");\n mark.className = \"acr-mark acr-w\";\n mark.textContent = \"•\";\n row.appendChild(mark);\n wordEls.push(mark);\n var body = document.createElement(\"div\");\n body.className = \"acr-alitext\";\n b.split(/\\s+/).forEach(function (word, i) {\n if (i > 0) body.appendChild(document.createTextNode(\" \"));\n var s = document.createElement(\"span\");\n s.className = \"acr-w\";\n s.textContent = word;\n body.appendChild(s);\n wordEls.push(s);\n });\n row.appendChild(body);\n answerEl.appendChild(row);\n });\n\n /* -------- build the keyboard: measured key geometry -------- */\n var keysEl = document.getElementById(\"acr-keys\");\n var ROWS = [\n { top: 83, left: 13, letters: \"qwertyuiop\" },\n { top: 173, left: 48, letters: \"asdfghjkl\" },\n { top: 263, left: 123, letters: \"zxcvbnm\" },\n ];\n ROWS.forEach(function (row) {\n row.letters.split(\"\").forEach(function (ch, i) {\n var k = document.createElement(\"div\");\n k.className = \"acr-key\";\n k.style.left = row.left + i * 73.7 + \"px\";\n k.style.top = row.top + \"px\";\n k.style.width = \"62px\";\n k.textContent = ch;\n keysEl.appendChild(k);\n });\n });\n [\n {\n left: 13,\n top: 263,\n width: 97,\n cls: \" acr-gkey\",\n html: '<svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.6\" stroke-linejoin=\"round\"><path d=\"M12 4 L4.5 12 H8.5 V17 H15.5 V12 H19.5 Z\"/></svg>',\n },\n {\n left: 640,\n top: 263,\n width: 98,\n cls: \" acr-gkey\",\n html: '<svg width=\"31\" height=\"24\" viewBox=\"0 0 28 20\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\"><path d=\"M9 2 H26 V18 H9 L1.5 10 Z\"/><path d=\"M13 6.5 L20 13.5 M20 6.5 L13 13.5\"/></svg>',\n },\n { left: 13, top: 353, width: 97, cls: \" acr-gkey acr-num\", html: \"123\" },\n {\n left: 118,\n top: 353,\n width: 86,\n cls: \"\",\n html: '<svg width=\"27\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"9\" cy=\"10\" r=\"0.6\" fill=\"#000\"/><circle cx=\"15\" cy=\"10\" r=\"0.6\" fill=\"#000\"/><path d=\"M8 14.5 C9.5 16.5 14.5 16.5 16 14.5\"/></svg>',\n },\n { left: 217, top: 353, width: 389, cls: \" acr-spc\", html: \"space\" },\n {\n left: 614,\n top: 353,\n width: 124,\n cls: \" acr-gkey\",\n html: '<svg width=\"27\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 5 V11 H6\"/><path d=\"M9.5 7.5 L6 11 L9.5 14.5\"/></svg>',\n },\n ].forEach(function (spec) {\n var k = document.createElement(\"div\");\n k.className = \"acr-key\" + spec.cls;\n k.style.left = spec.left + \"px\";\n k.style.top = spec.top + \"px\";\n k.style.width = spec.width + \"px\";\n k.innerHTML = spec.html;\n keysEl.appendChild(k);\n });\n\n /* -------- timeline -------- */\n window.__timelines = window.__timelines || {};\n var tl = gsap.timeline({ paused: true });\n\n /* keystroke and token rhythms, measured from the reference and cycled */\n var KEY_GAPS = [\n 0.1, 0.033, 0.2, 0.133, 0.2, 0.033, 0.067, 0.033, 0.1, 0.067, 0.033, 0.067, 0.067, 0.067,\n 0.133, 0.067, 0.033, 0.067, 0.1, 0.1, 0.067, 0.133, 0.1, 0.033, 0.1, 0.033, 0.167, 0.033,\n 0.1, 0.1, 0.067, 0.133, 0.033, 0.067, 0.1, 0.033, 0.1, 0.067,\n ];\n var WORD_GAPS = [\n 0.167, 0.1, 0.0, 0.367, 0.0, 0.167, 0.133, 0.1, 0.1, 0.133, 0.167, 0.133, 0.0, 0.233,\n 0.167, 0.1, 0.0, 0.133, 0.133, 0.1, 0.167, 0.133, 0.1, 0.133, 0.167, 0.1, 0.133, 0.1,\n 0.133,\n ];\n\n /* keyboard rises, composer rides it (verbatim anchors) */\n tl.fromTo(\"#acr-keyboard\", { y: 482 }, { y: 0, duration: 0.2667, ease: \"power2.out\" }, 0.2);\n tl.fromTo(\n \"#acr-composer\",\n { y: 0 },\n { y: -497, duration: 0.2667, ease: \"power2.out\" },\n 0.2,\n );\n\n /* typing: two characters land on the first beat, then the measured gaps */\n tl.set(\"#acr-ctext\", { textContent: \"\", autoAlpha: 0 }, 0.001);\n var TYPE_START = 0.8637;\n tl.set(\"#acr-ctext\", { autoAlpha: 1 }, TYPE_START);\n tl.set(\"#acr-ph\", { autoAlpha: 0 }, TYPE_START);\n tl.set(\"#acr-btn-send-grey\", { autoAlpha: 0 }, TYPE_START);\n tl.set(\"#acr-btn-send-black\", { autoAlpha: 1 }, TYPE_START);\n var t = TYPE_START;\n for (var n = 2; n <= userMessage.length; n += 1) {\n tl.set(\"#acr-ctext\", { textContent: userMessage.slice(0, n) }, t);\n t += KEY_GAPS[(n - 2) % KEY_GAPS.length];\n }\n var typeEnd = t;\n /* caret blinks on a steady half-second while typing */\n tl.set(\"#acr-caret\", { autoAlpha: 0 }, 0.001);\n for (var c = TYPE_START, on = true; c < typeEnd; c += 0.5333, on = !on) {\n tl.set(\"#acr-caret\", { autoAlpha: on ? 1 : 0 }, c);\n }\n\n /* send: bubble pops, keyboard drops, stream begins */\n var SEND = typeEnd + 0.1667;\n tl.set(\"#acr-caret\", { autoAlpha: 0 }, SEND);\n tl.set(\"#acr-ctext\", { textContent: \"\" }, SEND);\n tl.set(\"#acr-ph\", { autoAlpha: 1 }, SEND);\n tl.set(\"#acr-btn-send-black\", { autoAlpha: 0 }, SEND);\n tl.set(\"#acr-btn-stop\", { autoAlpha: 1 }, SEND);\n tl.fromTo(\n \"#acr-bubble\",\n { autoAlpha: 0 },\n { autoAlpha: 1, duration: 0.1667, ease: \"power1.out\" },\n SEND - 0.03,\n );\n tl.set(\"#acr-hicons-a\", { autoAlpha: 0 }, SEND);\n tl.set(\"#acr-hicons-b\", { autoAlpha: 1 }, SEND);\n tl.to(\"#acr-keyboard\", { y: 482, duration: 0.2667, ease: \"power1.inOut\" }, SEND - 0.03);\n tl.to(\"#acr-composer\", { y: 0, duration: 0.2667, ease: \"power1.inOut\" }, SEND - 0.03);\n\n /* thinking dot: the measured alpha ramp, then it yields to the words */\n var DOT_RAMP = [\n 0.488, 0.53, 0.53, 0.56, 0.608, 0.687, 0.729, 0.771, 0.813, 0.867, 0.904, 0.988, 1,\n ];\n var dotStart = SEND + 0.4333;\n tl.set(\"#acr-dot\", { autoAlpha: 0 }, 0.001);\n DOT_RAMP.forEach(function (a, i) {\n tl.set(\"#acr-dot\", { autoAlpha: a }, dotStart + i * 0.0333);\n });\n tl.set(\"#acr-dot\", { autoAlpha: 0 }, dotStart + 0.5667);\n\n /* the stream: measured token rhythm, fresh grey inking to full colour */\n var w = dotStart + 0.6333;\n wordEls.forEach(function (el, i) {\n if (i > 0) w += WORD_GAPS[i % WORD_GAPS.length];\n tl.set(el, { opacity: 1 }, w);\n tl.fromTo(\n el,\n { color: \"#767676\" },\n { color: \"#141414\", duration: 0.2667, ease: \"none\" },\n w,\n );\n });\n\n /* stream ends: stop button returns to send */\n tl.set(\"#acr-btn-stop\", { autoAlpha: 0 }, w + 0.4667);\n tl.set(\"#acr-btn-send-black\", { autoAlpha: 1 }, w + 0.4667);\n\n /* end card */\n tl.set(\"#acr-endcard-inner\", { opacity: 0 }, 0.001);\n tl.fromTo(\n \"#acr-endcard-inner\",\n { opacity: 0 },\n { opacity: 1, duration: 0.3167, ease: \"none\" },\n 15.8333,\n );\n\n window.__timelines[\"ai-chat-reveal\"] = tl;\n })();\n </script>\n </body>\n</html>\n"} |