Noir Glass Lens

Noir Glass Lens is a dark editorial template for studios, agencies, and independent designers. It is built around one idea: a wordmark you read through glass.

The hero is a WebGL magnifying lens that follows the cursor across the studio name, with chromatic fringing at the edge of the glass. On a phone it can follow the tilt of the device. Type the name into a single field — the lens finds the mark to rest on, and the type resizes so a short name and a long one both sit correctly.

The rest of the site is built the way a studio site should be: work first, a real case study behind every project, and a contact form that actually works.

Pages

• 7 total — 5 static, 1 CMS collection page, 1 not-found

CMS

• Collections: Work, Principles

• Work: 19 fields — cover, year, discipline, client, challenge, outcome, story, quote, live link, and five media slots that hide when empty

Included

• Lens Wordmark — WebGL magnifier, editable text, auto-fitting type, optional device tilt

• Marquee — alternating serif and mono, asterisk marks, adjustable speed

• Scroll Text — a paragraph that fills in letter by letter on scroll

• Work Reel — draggable strip with arrows, driven by the CMS

• Local Clock — live time with a city picker, no code

• Contact form — pending, sent, error, and incomplete states

• Colour styles and 11 text styles — restyle the site from one panel

Need help? hello@alexand.co