Offset

Screenshots

Signature effect

A giant headline whose letters breathe through a variable font's width and weight axes, printed twice with the hi-vis plate slipping out of register under your cursor

Changelog

1. v1.0.02026-09-30
   • HTML edition: a dependency-free conference site that opens straight from disk, printed in two spot colours out of register, with a settings block for every effect (the kinetic width-and-weight headline and its slipping hi-vis plate, the halftone speaker portraits, the live countdown, the speaker marquee, the pinned manifesto and the poster panel) and the ticket desk's VAT, hold time and currency in main.js.
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy, the twelve speakers, the three-day schedule, the ticket tiers, the workshops, the map's places, the manifesto and the poster's numbers in content/site.ts, the HTML edition's stylesheet split into one global file per section in app/styles/ and each effect's settings as typed props.
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, util.js, main.js and one file per effect in assets/js/effects/ (halftone, kinetic, countdown, marquee, manifesto, poster), each with a CONFIG block at the top.
   • Self-hosted fonts. Archivo (variable width and weight) and JetBrains Mono ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Brand tints follow the tokens. Translucent colours (hairlines, nav glass, hover washes, the colour-bar steps, shadows) are color-mix() of --ink, --paper, --blue and --hivis instead of raw rgba(). Only the paper-grain noise, the crosshair cursor and the moon icon keep their own colours.
   Show all notes

   • The focus outline is a token. --focus is --blue on paper (5.95:1) and the dark, blue and menu surfaces set it to --hivis. The ticket cards draw their ring inside the ticket, because the ticket's notched mask clipped the outer one, and the map pins get a two-tone ring so it reads on both the pale map and the dark buildings.
   • The hero and footer word is drawn from CSS. Each letter is an element whose glyph comes from data-c, with the page's headline in a visually hidden sentence, so the word can't be selected or announced letter by letter. --fw1 and --fw2 in tokens.css size it before kinetic.js measures it.
   • The countdown is one setting. CONFIG.start in assets/js/effects/countdown.js holds the date with its UTC offset; it counts from the visitor's clock, so it is right in every time zone. Screen readers get one sentence refreshed once a minute instead of a ticking number, and the digit slide no longer fades.
   • Contrast. The countdown's last label and the newsletter note are less transparent than in the concept, and the manifesto plates no longer overflow the stage.
   • Both forms have their own handler. The ticket desk (#tform) and the newsletter (#nlf) carry no data-form attribute, because kit.form would bind a second handler on top of theirs. Both run in demo mode: the ticket desk holds the tickets in the page only, and the newsletter flips to a confirmation.
   • Complete without JavaScript. Start states are hidden only under .js. Without script the word is fitted by CSS and sits still, the countdown is plain text, the marquee names wrap, the speaker cards flip on hover and focus and show a two-colour CSS dot pattern instead of a canvas portrait, all three schedule days are listed, the manifesto is one full paragraph, every FAQ answer is open and the map shows all three place cards. Controls that need script (the menu button, the schedule tabs and chips, the workshop arrows and seat buttons, the map's place list, the order panel, the newsletter form, the pause button, "Re-register plates", the clock) are hidden; the tickets become a price list with an email address to book by, and the newsletter an email line. Addresses use the placeholder offset27.example.
   • A failsafe for slow or blocked scripts. If main.js has not started after 2.6 seconds the head script adds ready and failsafe, which lifts the preloader and reveals every hidden block, heading and figure.
   • Reduced motion. The preloader is skipped, the manifesto isn't pinned and is fully set, the marquee names wrap instead of clipping, the word sits at a still width and weight, the countdown digits stop sliding, the poster's numbers show their final values and the sticker stands still. The page is shorter than the concept's reduced-motion page for that reason.
   • New pages and delivery details. Added 404.html ("This page is out of register") and privacy.html (in the same nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Event with performers and offers), a favicon, a touch icon, a web manifest and robots.txt.
   • The page idles when nothing moves. The shared animation loop stops when the page is still and wakes on scroll and resize, and the word and marquee keep it running only while they are on screen. The progress line only writes when it changes.
   • Copy and schedule agree. The event has three nights (Wed, Thu, Fri); the countdown counts to the 09:00 programme start, not the 08:00 doors; the workshop times and rooms match the schedule blocks, and the Plotter club is in the Thursday schedule.
   • Ticket desk. The confirmation takes focus so the hold is announced, the copy says it is a demo, and the hold is released with a message when the ten minutes run out.
   • The hero word restyles its eight letters (in both plates) every frame while the hero is on screen, and the footer word does the same while the footer is. They stop when off-screen. Set enabled: false in kinetic.js for a still word on slow devices.
   • The demo event, the twelve speakers and their talks, the schedule, the six workshops and their seat counts, the four ticket types and "282 tickets left", the partners, the hotel and its code, the venue and the organiser (Stichting Offset) are all made up. Replace them before launch.
   • The ticket desk takes no real bookings: "Reserve" swaps the panel for a ten-minute timer and sends nothing. Connect your ticket shop before you sell anything (see the README).
   • The JSON-LD Event (dates, performers, offers) is written by hand and does not update when you change the page. Keep it in step with the speakers, the tickets and the dates.
   • The partner deck button is a mailto: link that, in the demo (data-demo), only changes its label. The newsletter posts nowhere.
   • In the React edition the JSON-LD Event is built from the content (event, lineup.speakers, tickets.tiers and jsonLd), so it follows the dates, the speakers and the tiers; only the organiser, venue, coordinates and currency in site.jsonLd are typed. The HTML edition's is still written by hand.
   • In the React edition the schedule's day and track filters live in a small shared store (lib/schedule-store.ts), so the lineup's "In the schedule →" links switch the day and highlight the row. A speaker's talk must equal a session's title, and go must be that day's index.
   • In the React edition the ticket tiers, the sold bar and the nav's "tickets left" are computed from tickets.tiers and tickets.sales; the "from €145" button text and the fine print ("10 minutes", "1 March 2027") are still typed.
   • In the React edition the ticket desk and the newsletter have their own handlers (no kit Form), and the partner deck button is a mailto: link that only flips its label while partners.deck.demo is true. The map art and the workshop drawings are fixed SVG strings in content/map-art.ts and content/workshop-art.ts.

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Hearth

  Hospitality

  Hearth is a restaurant site cooked over open fire: an ember canvas and heat-haze hero, a nine-course menu drawn plate by plate, a night-long fire timeline and a seat-map booking flow with gift vouchers.

  Gloock / Work SansFrom $29