Halation

Screenshots

Signature effect

Photos shown through optics and chemistry: they fade in, pull into focus, and dim to dark and develop back up between the hours, as WebGPU shaders over the real <img>, with a CSS fallback for each effect

Changelog

1. v1.0.02026-10-12
   • HTML edition: a dependency-free photographer's portfolio that opens straight from disk, with a hero whose photo fades in from the dark, an hours viewer that steps through twenty photos in the order of the clock, four series that pull each frame into focus as you scroll past a turning lens scale, a frame view that opens any frame whole, a page for each series with nine frames and the story behind them, three commissions with prices, availability by month with booking links, an About section with the portrait in a strip of 35mm film, and an enquiry form. The photos are shown by WebGPU shaders over the real images where the browser and host allow it (served over https or from localhost), with a CSS fallback for each effect, and a settings block for every effect.
   • React edition: the same Home, series pages (app/series/[slug], built with generateStaticParams), 404 and Privacy as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with the copy in content/site.ts and the shaders bundle in public/vendor/.
   • Pages: home, four series pages, 404, privacy.
   • Series pages added. The concept was one page. The HTML edition now has a page for each series at series/<name>/index.html: the title, a short story, all nine frames (the lens scale and the frame view included), previous and next series, and a link to the contact form. That is 16 new photographs (four per series, frames 06 to 09). The Home series sections still show five frames each, and now link to their page ("All nine frames of …"). The hours viewer reads only the frames on Home, so it still has twenty.
   • The shaders bundle is a slim build. It holds only the components the template uses (ImageTexture, Exposure and FilmGrain; the dodge and the halation are defined on the page) and is about 1.4 MB (333 KB gzipped), down from the full 2.5 MB build. It lives in assets/js/vendor/ with its licences in shaders-LICENSES.txt, and is downloaded only when WebGPU is available.
   • WebGPU runs only where it can. Under file:// no local image can reach the GPU, so the page skips the shaders before fetching anything and shows the CSS versions; the same on a browser without WebGPU and on an http-only host. enabled: false in effects/shaders.js turns WebGPU off everywhere. Telemetry is off in every createShader call.
   Show all notes

   • Canvases draw only while something changes. They wake for the hero's first frame, the mouse, a photo swap and coming into view, pause after 250 ms of quiet, pause off-screen and in hidden tabs, and are destroyed when far away. The film grain in the shaders is still, and the series' focus pull is a softer, cheaper blur (8px and 105%).
   • Self-hosted fonts. Anybody, Sofia Sans and Syncopate ship in assets/fonts/ with their licences (SIL Open Font License for Anybody and Sofia Sans, Apache 2.0 for Syncopate). The concept loaded them from Google Fonts; no request now goes there. Anybody is subset to width 140 and weights 800 to 850.
   • Fixed: the label text stroke. The 0.35px stroke that sets Syncopate a touch heavier was declared on :root, so it applied to all text, body copy included. It is now set only on the label rules.
   • Fixed: reveals did not fade. The reveal delay variable had the same name as the line-height scale (--dl), so the two clashed and the reveals didn't fade. The delay is now --rd.
   • Tokens. Hard-coded greys are tokens in tokens.css (--on-dark, --dim, --edge, --dline, --ring and others), each with a comment. The display fit factors (--dk, --hk, --hcap, --bk) are tokens too, so a different display face can be tuned in one place.
   • Scripts are split. The concept was a single file; the scripts are now main.js plus one file per effect in assets/js/effects/ (shaders, hero, hours, portrait, frame-view), each with a CONFIG block at the top.
   • The hours counter pads the total. It reads "08 / 20" as before, and follows the number of frames on the page.
   • A Privacy link in the footer. The footer links to privacy.html on every page.
   • The White nights note says "the buildings" instead of "five buildings", now that a series page shows nine frames.
   • 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 Person), a favicon, a touch icon, a social image, a web manifest and robots.txt.
   • Loading. The shaders bundle is fetched only after the page has finished loading, so it never competes with the fonts and photos. Each web font has a fallback face scaled to its width, so text doesn't reflow when the fonts arrive. Lighthouse (mobile, gzipped static host, 12 Oct 2026): 90–99 for performance on every page of both editions, 100 for accessibility, best practices and SEO.
   • A quieter hero entrance. The photo now fades in and the text follows a little behind it; the develop-in from an overexposed white frame is gone. The red glow on the cabin window is gone too. With WebGPU the shader's grain and mouse dodge take over once the fade has finished. The fx-wait class is gone, so moving the hero into another site needs one replacement fewer.
   • The photographs are AI-generated. The demo photographs (36 in the series and one portrait) were generated for this template and show invented people and places. They are included so the demo looks finished. Replace them with your own before launch, and don't present generated images as real work.
   • The demo content is made up. Edda Lindqvist, her studio, the series, places, clients, prices, availability and the addresses (lindqvist.example, studio@lindqvist.example, the example.com links) are all invented. Replace them before launch, including the JSON-LD block.
   • The effects need a served site. Double-clicking index.html works and shows the CSS versions of the effects; to see the WebGPU ones, serve the folder (npx serve . or python3 -m http.server) or deploy over https. The README explains it.
   • The series pages repeat parts of Home. The header and footer are in all seven HTML files and the frame view dialog in the five pages with series frames; the README's "Series pages" lists what to keep in step.
   • Moving a section into another site: the README has tested steps for the hero. The hours viewer and the frame view read the series sections, so they only work with those on the same page.

Questions

Related

• 

  Ashlar

  Real estate

  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 photo galleries, facts and drawn site plans, 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

  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

  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