31:T4e0,viewof elas = { const s = html` ${word}`; const el = html`

${handAt(0, 0, "20px")}${s}`; set(el, { ismouseover: false }); function update(wght, width, italic) { s.style.cssText = ` font-variation-settings: "wdth" ${width},"wght" ${wght}, "ital" ${italic}; `; } el.addEventListener("touchmove", e => e.preventDefault()); // prevent scrolling el.addEventListener("pointermove", e => { const { width, height } = s.getBoundingClientRect(); const box = el.getBoundingClientRect(); const x = e.layerX / box.width; const y = e.layerY / box.height; set(viewof wght, (100 + y * 700) >> 0); set(viewof fwidth, (x * 200) >> 0); set(viewof italic, (y * 200) >> 0); set(el, { ismouseover: true }); }); el.addEventListener("pointerout", e => { set(el, { ismouseover: false }); }); yield Object.assign(el, { update }); }32:[{"id":"55a6631b863a1a4e51ed54601ba82f6f1807f0b41f078524d18191e64b8afdd4a043c6697f7dab4491a06b4b4f9df758b275ddb838a49af1fb840c2c9e9a8462","href":"https://static.observableusercontent.com/files/55a6631b863a1a4e51ed54601ba82f6f1807f0b41f078524d18191e64b8afdd4a043c6697f7dab4491a06b4b4f9df758b275ddb838a49af1fb840c2c9e9a8462","name":"GT Flexa VAR Trial.ttf","type":"font/ttf","lastModified":1610409870496.253,"size":281832},{"id":"e14d124ce7a4619e4c5bad2f01db5b753ce4303f0e2a80c4d6295b23ad13b37ab9f30d1482e5b970c771385521be8452d17c86745449cafa402d11816c5c3390","href":"https://static.observableusercontent.com/files/e14d124ce7a4619e4c5bad2f01db5b753ce4303f0e2a80c4d6295b23ad13b37ab9f30d1482e5b970c771385521be8452d17c86745449cafa402d11816c5c3390","name":"GT Flexa VAR Trial.woff2","type":"font/woff2","lastModified":1610409587779.73,"size":96436}] 2f:{"title":"GT Flexa Variable Font Experiment","cells":[{"id":0,"value":"md`# GT Flexa Variable Font Experiment\n\n\nUsing [GT Flexa](https://gt-flexa.com/) font trial version.\n\nMore variable fonts here https://v-fonts.com/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"viewof we = {\n const el = html`${bind(\n html``,\n viewof wght\n )} Weight ${bind(html`'`, viewof wght)}`;\n el.value = { clicked: false };\n el.onpointerdown = () => {\n set(el, { clicked: true });\n };\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"viewof it = {\n const el = html`${bind(\n html``,\n viewof italic\n )} Italic ${bind(html``, viewof italic)}`;\n el.value = { clicked: false };\n el.onpointerdown = () => {\n set(el, { clicked: true });\n };\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"viewof wdth = {\n const el = html`${bind(\n html``,\n viewof fwidth\n )} Width ${bind(html``, viewof fwidth)}`;\n\n el.value = { clicked: false };\n\n el.onpointerdown = () => {\n set(el, { clicked: true });\n };\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"viewof word = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"md`#### Letters Grid\n\nThe transition is done via css\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"{\n const side = 5;\n const n = side * side;\n const maxw = width / side; // measure in vws\n const spans = Array(n)\n .fill()\n .map((e, i) => html`${String.fromCodePoint((97 + i) >> 0)}`);\n const el = html`\n\n

${spans}`;\n while (true) {\n spans.forEach(span => {\n span.style.cssText = `\n font-variation-settings: \"wdth\" ${Math.random() * 200},\"wght\" ${100 +\n Math.random() * 700}, \"ital\" ${Math.random() * 200};\n line-height: 2rem;\n font-size: ${Math.random() * 15}vw;\n `;\n });\n yield el;\n await Promises.delay(1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"viewof elas.update(wght, fwidth, italic)","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"updateLoop = {\n if (elas.ismouseover || we.clicked || it.clicked || wdth.clicked) {\n return yield \"stopped\";\n }\n while (true) {\n set(viewof wght, (100 + (0.5 + 0.5 * Math.sin(now / 500)) * 700) >> 0);\n set(viewof italic, ((0.5 + 0.5 * Math.cos(now / 1000)) * 200) >> 0);\n set(viewof fwidth, ((0.5 + 0.5 * Math.cos(now / 500)) * 200) >> 0);\n yield \"running\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof wght = new Input(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"viewof italic = new Input(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1175,"value":"viewof fwidth = new Input(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1338,"value":"md`### load font style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"flexaStyle = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"import { Input, bind } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"import { handAt } from '3f60199713113376'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}