2c:null 2d:["$","title",null,{"children":"GT Flexa Variable Font Experiment | Radamés Ajna | Observable"}] 32: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 }); }33:[{"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}] 30:{"id":"3d4169c7e5ed0549","slug":"gt-flexa-variable-font-experiment","title":"GT Flexa Variable Font Experiment","thumbnail":"a565f1e1b3679b21356406887bf077a1e046db0c56b00d782b8c66896875002c","access_level":"public","create_time":"$D2021-01-11T22:55:19.291Z","update_time":"$D2021-02-08T07:12:02.738Z","view_time":null,"first_public_time":"$D2021-01-31T19:03:15.811Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":1501,"publish_version":1501,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"e6ac3b1fb1f272eb","slug":"experiments","title":"Experiments","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1227,"value":"viewof word = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1439,"value":"md`#### Letters Grid\n\nThe transition is done via css\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1358,"value":"viewof elas.update(wght, fwidth, italic)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":753,"value":"viewof wght = new Input(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"viewof italic = new Input(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"viewof fwidth = new Input(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1338,"value":"md`### load font style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1336,"value":"flexaStyle = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1472,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"import { Input, bind } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"import { handAt } from '3f60199713113376'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"