Build notes / 02

Inside
OFFSET.

An independent type festival where letters refuse to sit still. The signature technique is variable-font pointer choreography.

01

Use a real variable font

Anybody is requested from Google Fonts with continuous width 75–125 and weight 100–900 axes. Each character is a span, while the containing word supplies a single accessible label.

02

Let distance set the weight

For each pointer move, measure the distance to each letter’s center. Weight is max(180, 900 − distance × 2). Width is max(75, 115 − distance × 0.07). A short CSS transition softens the changes.

03

Keep a stable poster

The flex row distributes the six characters across the poster. Font size scales with viewport width and line height stays at 0.87. The dark information band anchors the otherwise unstable display.

04

Offer deliberate control

Shuffle uses a deterministic modular sequence; Reset removes inline axis values. Both are native keyboard-operable buttons. Reduced motion disables pointer choreography and rotation, while explicit shuffle remains available.

Reproduce the site

  1. Download the complete source below and keep its name index.html.
  2. Open it through a static server. From its directory, run python3 -m http.server 8000, then visit http://localhost:8000. There is no install or build step.
  3. The stylesheet lives in the head. The rendering and interaction code lives in the final script. Adjust one parameter at a time and compare the result at desktop and 375 px widths.
  4. Google Fonts requires a network connection. All visible artwork is computed locally. Native system fallbacks preserve readable text if fonts fail.
  5. Enable your operating system’s reduced-motion setting and repeat the interaction. Use browser developer tools to check errors, overflow, and frame timing before publishing.
Download complete HTML ↓
The complete rendering and interaction code
const letters=[...document.querySelectorAll('.word span')],reduce=matchMedia('(prefers-reduced-motion: reduce)');let edition=1;document.querySelector('.poster').addEventListener('pointermove',e=>{if(reduce.matches)return;letters.forEach(el=>{const r=el.getBoundingClientRect(),distance=Math.abs(e.clientX-r.x-r.width/2);el.style.setProperty('--weight',Math.max(180,900-distance*2));el.style.setProperty('--width',Math.max(75,115-distance*.07));el.style.setProperty('--rot',((e.clientY-r.y)/r.height-.5)*8+'deg')})});document.querySelector('#shuffle').onclick=()=>{letters.forEach((el,i)=>{el.style.setProperty('--weight',200+((edition*173+i*239)%700));el.style.setProperty('--width',80+((edition*13+i*11)%35));el.style.setProperty('--rot',reduce.matches?'0deg':((i+edition)%3-1)*5+'deg')});document.querySelector('#mode').textContent='Composition '+String(++edition).padStart(2,'0')};document.querySelector('#reset').onclick=()=>{letters.forEach(el=>el.removeAttribute('style'));document.querySelector('#mode').textContent='Composition 01';edition=1}
The complete visual system
:root{--body:'DM Mono',monospace}body{background:#c7ff63;color:#182215;font-family:var(--body)}header{padding:25px 3vw;display:flex;justify-content:space-between;border-bottom:2px solid;font-size:12px;text-transform:uppercase}.poster{padding:2vw 3vw}.eyebrow{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin:20px 0}.word{font-family:'Anybody';font-size:clamp(90px,18.7vw,320px);font-weight:750;font-stretch:100%;line-height:.87;letter-spacing:-.085em;margin:4vw 0;display:flex;justify-content:space-between;max-width:100%;user-select:none}.word span{display:block;font-variation-settings:'wght' var(--weight,750),'wdth' var(--width,90);transition:font-variation-settings .25s;transform:rotate(var(--rot,0deg));transform-origin:center}.black-band{background:#182215;color:#c7ff63;padding:20px 3vw;display:flex;justify-content:space-between;font-size:14px;gap:20px}.bottom{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:4vw;padding:55px 3vw 70px}.bottom h1{font:500 45px/1 'Anybody';letter-spacing:-.05em;margin:0}.bottom p{font-size:14px;margin:0;max-width:42ch}.controls{display:flex;flex-direction:column;gap:15px}button{border:2px solid;background:transparent;padding:16px;text-transform:uppercase;font-size:13px}button:hover{background:#182215;color:#c7ff63}.edition{font:700 80px/1 'Anybody';letter-spacing:-.08em}.colophon{border-top:2px solid}@media(max-width:600px){.word{font-size:18vw;margin:50px 0 60px}.bottom{grid-template-columns:1fr;padding:35px 5vw}.bottom h1{font-size:38px}.edition{display:none}.black-band{font-size:12px;flex-wrap:wrap}.eyebrow{font-size:12px}.poster{min-height:40vh;display:flex;flex-direction:column;justify-content:center}}

Original fictional design study. No stock photography, model files, image textures, or sample audio.