Colophon
How this was built.
The site is the portfolio piece, so it should be possible to check it. Everything below is a real value read out of the build rather than a target we hoped to hit.
The object
The mark, taken apart
Our logo is a tilted square holding a field of waves with two four-pointed stars cut through it. Take the stars out of the square, put them on the waves, and you have the hero. Look for the sky and you will not find it above them, because it is underneath: the sea floor is a cloud timelapse, so the water refracts it and the glass magnifies it and you end up looking through the sea at the sky, which is what amwaj sama means. About three hundred lines of arithmetic draw that. No video plays behind this headline. The film is a texture the shader reads, and the water does the rest.
The specification
| Paper | #070C18 |
|---|---|
| Ink | #DCE4F2 · 15.6:1 on paper |
| Accent | #6E9BFF · links and the one button |
| The object | #1B2A4A to #BFD8F5, lit rather than painted |
| Display and text | Archivo Variable · Omnibus-Type · SIL OFL · wdth 76 / 88 / 100 |
| Data | Sligoil · Ariel Martín Pérez · Velvetyne · SIL OFL |
| Photographs | none |
| Generated imagery | none |
| Icon sets | none installed |
| 3D libraries | none · raw WebGL, and a software rasteriser for the still |
| JavaScript | 35.3 kB gzipped, 4 modules, no libraries |
| CSS | 12.5 kB gzipped, one file |
| Webfonts | 85.4 kB, 2 files, self-hosted and subset |
| Every image on the site | 94.4 kB across 2 files, all rendered by the build |
| First load, this page | 133.2 kB plus the HTML |
| The film under the sea | 3.45 MB, after first paint, only on the home page |
| Site generator | Eleventy · hand-written CSS · vanilla ES modules |
Legibility
Built for an astigmatic reader
Our client has astigmatism. That set more of this site than taste did. There is no pattern anywhere on it: no dot screen, no line field, no texture, nothing fine enough to interfere with itself and shimmer. Type starts a step larger than usual, leading is loose, and no hairline carries meaning. The page is dark, and that is the one thing on this list that was originally ruled out for the same reason — light type on a dark ground haloes until letters bleed into each other. He asked for it after living with the light version, so it is built with the mitigations that matter: the ground is never pure black, the type is never pure white, every rule went up in weight rather than down, and nothing on the page glows with a blur or flickers. An earlier version was built around a halftone screen and we scrapped it, which was the right call for far more readers than one.
Where this is simpler than it sounds
What we are glossing over
A colophon that only lists its own good decisions is an advertisement. These are the places where what the site implies and what it does have daylight between them.
- 01 The sea is closed-form waves added together, not fluid simulation. A real solver produces chop, and short sharp detail is the one thing an astigmatic eye cannot hold still; these have deliberately unrelated wavelengths so their crests drift in and out of phase instead of marching.
- 02 The outlines are not geometry. Each star's mesh is a plain grid and anything outside the shape is discarded per pixel, which is why the four points stay sharp at any size. The edge is antialiased from the distance field itself rather than by the graphics card, because a discarded fragment is never multisampled.
- 03 The caustics are real ones, computed from the curvature of the surface rather than drawn. They are also much broader and softer than a real caustic, which is a net of thin bright filaments and would be unreadable for the person this site is built for.
- 04 Stock footage lies under the water. Pexels supplied a cloud timelapse; we cut it so the end meets the beginning with no visible join, slowed it to about two fifths speed, and crushed it into this site's own range. Where it came from is written down in src/assets/video/SOURCE.md. Its licence does not ask for credit. We would rather give it.
- 05 The glass does not trace light through its own volume. It refracts once at the surface, on three separate paths for red, green and blue, and follows each of them down to the sea floor. A second bounce would be more correct and would cost about four times as much for something most visitors see for one frame.
- 06 On a phone the glass is dimmed, hard. There is no column free of type at that width, so the objects end up behind the headline, and a bright object behind a letter is a letter nobody can read. The ceiling is set by measurement rather than by eye: tools/hero-contrast.mjs hides the copy, walks the video across its loop and finds the brightest pixel any glyph touches. It has to clear 4.5 to 1 at every width or the build fails.