Kvist

Screenshots

Signature effect

The question tree: pick the question on your desk and it draws out into three parts and six hypotheses, each with its first test; tick what sounds likely and the question and ticks travel into the contact form. Built from radios, checkboxes and :has(), with an SVG connector layer measured from the real layout

Changelog

1. v1.0.12026-10-21
   • The first screen paints without waiting for JavaScript. The hero, the first blocks under it, and the first two rows of each index list now fade up from CSS on load, instead of waiting for the scroll observer. Blocks further down still reveal on scroll. Mobile Lighthouse went from 86–98 to 92–98 (HTML) and from 82–93 to 87–93 (React).
   • Smaller engagement photos where they are shown small. Each 2000-px photo has a 1000-px copy (<name>-1000.webp), picked with srcset and sizes. The first photo on the engagements and partners indexes loads eagerly.
   • Privacy and 404 are the same in both editions. Privacy is set in rows like the inner pages: This site, Enquiries, The question tree (what stays in the browser) and Your rights. The 404 has two buttons, Back to Kvist and Engagements.
   • React: Privacy sits in the footer's small print, as in the HTML edition, instead of in the Pages list. The two editions now have the same page heights and layout on all 17 pages at 1440 and 390 px.
2. v1.0.02026-10-20
   • HTML edition: a dependency-free website for a small operations-strategy consultancy, which opens straight from disk. Home opens on a plain headline and the question tree: four questions, each opening into three parts and six hypotheses with the first test, connector lines drawn from the real layout on wide screens and an indented outline on phones. Hypotheses the visitor ticks are counted and listed above the enquiry form, and the question and ticks are sent with it. Below it: three engagements told as consulting answers, each with a numbered SVG exhibit (a margin bridge, a line, a range) and a photo, a table of six more, the five clauses of the engagement letter, three priced ways to engage, four partners with the question each always asks, three notes and the enquiry form.
   • Pages: Home, four index pages (engagements with a practice filter that works without JavaScript, how we work, partners, notes), three engagement pages with a static tree showing a verdict on every hypothesis, four partner pages, three notes, 404 and privacy (17 HTML files; engagements/, partners/ and notes/ in HTML).
   • The question tree and the exhibits can be moved into another site: the README has tested steps and a scoped assets/css/embed.css. They were checked on a plain host page with clashing styles and class names, in Chrome at desktop and phone width.
   • Fonts are self-hosted: Source Serif 4 (with its optical-size axis), IBM Plex Sans and IBM Plex Sans Condensed, with their licences (SIL Open Font License). No request goes to a third party.
   • Structured data (ProfessionalService, Article, Person, BlogPosting), social tags, a favicon, a web manifest, robots.txt and a noindex 404.
   • One page became seventeen files. The concept was 22-kvist.html plus 14 pages in concepts/kvist/. The edition has the same pages, with the detail pages in engagements/, partners/ and notes/, plus 404.html and privacy.html (same header and footer), and a Privacy link in the small print of every footer.
   Show all notes

   • Self-hosted fonts. The concept loaded the three families from Google Fonts; they now ship in assets/fonts/.
   • Tokens. Colours, radius, easing and every duration are tokens in tokens.css, grouped and commented, with Brand — start here first. Inline colours in the charts (fill, stroke) and the other inline styles are classes; only the --i index on animated bars stays inline.
   • Scripts are split. The concept was one kvist.js. The scripts are now main.js plus effects/tree.js with a CONFIG block at the top (connector offsets, stagger, wide-screen query, the words in the tally and summary). Reveals use the kit's kit.reveal, so a failed observer can no longer leave a block invisible; the reveal class is .is-in instead of .in.
   • The form is generic. It has data-endpoint and four message attributes (data-demo, data-success, data-error, data-invalid) and posts JSON including question and likely; the concept only said thank you. The tree summary shows hypotheses as text, never as markup.
   • Unchanged: page heights, layout and the tree's behaviour match the concept at 1440 and 390 on every page.

Questions

Related

• 

  Ashlar

  Real estate

  • HTML
  • React
  • Framer

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with an index of houses beside one house sheet (photo switch, facts, and buttons to the house page and the introduction form), a page per house (facts, photographs in a lightbox, a longer story and the advisor who shows it), a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $19
• 

  Aurel

  Brand

  • HTML
  • React

  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 $19
• 

  Cistern

  Product

  • HTML
  • React

  Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.

  Jost / Inter TightFrom $19