Ashlar

Screenshots

Signature effect

Five material slabs that widen into the exterior of each house, a terrace photograph you turn by dragging or with a bearing dial, and an introduction letter that writes itself as you fill in the form

Changelog

1. v1.0.02026-10-07
   • HTML edition: a dependency-free real-estate site that opens straight from disk, with five material slabs that open into exterior photographs, an image band, a register of houses with a photo gallery, facts and a drawn site plan for each, a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, four office cards with live local times, and an introduction form that writes a letter as you type, with a settings block for every effect.
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with the houses, offices, copy and the terrace-view data in content/site.ts.
   • 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, main.js and one file per effect in assets/js/effects/ (slabs, register, terrace-view, letter), each with a CONFIG block at the top.
   • Self-hosted fonts. Libre Caslon Display and Figtree ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Local, optimised photographs. The 21 photographs are in assets/img/ as WebP at web sizes (exterior 1440 × 960, interior 1200 × 800, material 720 × 960, views 1916 × 821, band 1600 × 900; about 2.5 MB in all, down from 3.5 MB) with width and height, and lazy loading below the first screen. The unused -s thumbnails were dropped.
   Show all notes

   • The houses are in the markup. The concept rendered the slabs, the register rows, the details, the offices, the chips and the footer list with script. They are now plain HTML, so the page reads complete without JavaScript (all five houses listed in full) and the register can be edited in place. The terrace-view data (bearings, marks, descriptions) moved to a JSON block (id="views") in index.html.
   • Site plans are inline SVG with classes, coloured from tokens (--water, --pool, --contour, --lapis, --ink); the contour lines are drawn once and shared by all five plans.
   • Tokens. Every colour, size, shadow, duration and easing is a token in tokens.css; brand tints (the header's glass, the plan boundary wash, the letter's underline) are color-mix() of tokens.
   • Contrast. --mute (labels, captions, row details) is darker, #595F5B instead of #6F7470 (5.8:1 on chalk, 4.7:1 on stone); the footer's quietest text is #8D918D instead of #7F837F; "Your name" in the letter is darker. With the original values axe reported over 60 contrast failures.
   • Accessibility. The footer's column titles are labels, not headings (the concept skipped a heading level); the slabs are a group of links, not a list of role="listitem" links; the terrace photograph is role="img" with a description of the view; the focus ring on the night band is the light lapis; the form marks the field that failed with aria-invalid; a visible skip link; the failsafe class shows every hidden block if the script is slow or blocked.
   • The method timeline's ticks. The concept's tick rules counted the line's fill element as a child, so the first tick was never left-aligned and the mobile layout hid the wrong ticks ("Median offer" and "Keys, median" overlapped at 390px). The first tick is now left-aligned, and below 860px the second and fourth ticks (Day 15 and Day 66) are hidden.
   • Reduced motion is live. The slabs, the terrace drift, the register fade and the statement check the preference through kit.reducedMotion(); the letter's seal animation is removed.
   • A real form. The introduction form has data-success, data-error and data-invalid messages ({name} is the visitor's first name) and an optional data-endpoint: set it and the fields are posted to your form service. Without it the form is a demo and nothing is sent.
   • Copy. "A concept: houses, places and people are illustrative" is now "A demo site: …", the thank-you says "(Demo: nothing was sent.)", and the footer links to privacy.html. Everything else is as in the concept.
   • Deep links. index.html#house-3 opens the third house in the register and the terrace view, and scrolls to it.
   • New pages and delivery details. Added 404.html and privacy.html (same header and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD RealEstateAgent with the four offices), a favicon, a touch icon, a social image, a web manifest and robots.txt.
   • Terrace marks. The bearing stops short of the photograph's edges, but a mark counted as seen only within 9° of the bearing, so a few side marks could never be highlighted or announced. Marks are now measured from the nearest reachable bearing, so every mark of every house can be reached.
   • Terrace view. Choosing another house starts at its centre and stops a turn still in progress; the dial lets go on pointercancel and lostpointercapture; the terrace photograph loads eagerly (lazy loading never fired inside the moving strip, so the photo stayed blank) and fades in once loaded, tracked on the element itself; the React edition clears the loading state if a photograph fails, hides "Drag to turn" on the first touch even with drift off, and moves the photograph and needle by refs while drifting instead of re-rendering every frame.
   • Slabs. Tab opens a slab and Enter follows its link to the register (both editions); a first tap on touch still only opens it. React's "already open" flag is per slab.
   • Register. The fade is 450 ms (fadeMs, matching --dur-fade); the details block no longer announces itself with aria-live.
   • Letter. The letter's sentences are introduction.letter in site.ts (React) and in letter.js CONFIG (HTML) as templates; the form's error message is built from site.email; aria-invalid clears as soon as the visitor types in the field.
   • React site plans use the same hand-drawn contour lines as the HTML edition.
   • The photographs are AI-generated. The 21 demo photographs were generated for this template (they show invented houses) and are included so the demo looks finished. Replace them with your own before launch, and don't present generated images as photographs of real properties.
   • The demo content is made up. The five houses, their places, prices, plans and views, the four advisors and offices, the company name ("Ashlar Private Office") and the addresses (ashlar.example, hello@ashlar.example) are all invented. Replace them before launch, including the JSON-LD block.
   • The five houses are a list in six places (hero slabs, register rows, detail blocks, terrace picker and JSON, letter chips, footer list). The README's "Add a house" walks through it.
   • The page needs no script to read. Without JavaScript all five houses are listed, the slabs and the letter keep their starting state, and the controls that need script are hidden.
   • Moving a section into another site is not documented for this edition: the register, the terrace view and the letter depend on each other and on the page's state classes.

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
• 

  Cistern

  Product

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