The concept
Kunsthalle Nedre is imagined as a below-street one-room gallery in Oslo. The site borrows its central discipline: no programme carousel, no wall of art, no urgent call to action. The present work arrives in a large, specific silence.
Every section changes the balance of the page instead of adding decoration. Information is placed at the edge of a field, as though the room had made space for it.
The signature technique
The work is a self-hosted SVG, so there is no remote image dependency. Its paper is built from a nearly invisible noise field; the graphite routes take a restrained displacement, while the ash trace stays precise. The reveal waits for both a successful load and viewport entry. On a fine pointer, its factual caption is the only element that follows the visitor—there is no parallax, scaling, or decorative cursor effect.
const revealImage = () => {
if (imageReady && workInView) image.classList.add('is-seen');
};
image.addEventListener('load', () => {
imageReady = true;
revealImage();
}, { once:true });
const scheduleCaption = (event) => {
if (!captionEnabled()) return;
x = event.clientX;
y = event.clientY;
if (!frame) frame = requestAnimationFrame(placeCaption);
};Palette + type
Three tones carry the whole system: gallery white for the room, near-black for what must be read, and a warm grey for a single quiet trace in the work. IBM Plex Sans is used at one weight in two sizes: the reading voice and the small, widely tracked label.
#FCFCFA
#0A0A0A
#8C8880
Three passes
Pass 1 — correctness
- The SVG reveal now waits for a successful image load as well as viewport entry; a failed load restores the image’s normal fallback visibility instead of leaving an invisible box.
- The cursor caption is now bounded to the viewport, is cancelled and hidden when the tab is hidden or the work leaves view, and stops responding when reduced motion or a coarse pointer is active.
- Raised the smallest reading and label text to 12px, removed warm-grey body copy that fell below normal-text contrast, and made footer links at least 44 × 44px with a stronger visible focus ring.
- Made swatches wrap safely and retained a horizontally scrollable code block only, so the guide has room to remain within a 390px viewport.
Pass 2 — design depth
- Repeated left-label/right-copy sections: the programme is now a field of staggered events with its label turned to the room’s far edge; the room note and visit information retain distinct anchors rather than repeating the same column rhythm.
- Timid large type: the reading size was raised, tightened deliberately, and given
text-wrap: pretty; the hero is set in two intentional lines so its final phrase cannot become a stranded word. - An artwork placed too safely: the work now sits in an asymmetric three-part field with a measured shift into its surrounding space. The factual caption remains the sole interaction, but its fade was removed so only the artwork itself earns motion through the two-second reveal.
Pass 3 — complexify
- A second reason to linger: added the room measure below the programme. Three deliberate presses make a single ink marker travel along a hairline and reveal observations from the room; the fourth press reaches a clear “enough” state, with an explicit way to begin again. It works by keyboard, announces each observation, and stays still when motion is reduced.
- A more truthful work: rebuilt the drawing’s paper and marks as SVG material rather than a sterile diagram: an extremely light rag grain sits under a broken ash trace, while the graphite paths carry only a small, controlled roughness. The texture remains almost imperceptible until the visitor is close.
- Final readiness: added the page-specific Open Graph metadata, retained the early JavaScript loading gate for the two-second artwork reveal, and made the new register useful without JavaScript. The last copy pass tightened the room’s language and kept every small label at a readable contrast.