Iris Vey

Screenshots

Signature effect

A 3D renderer built from text characters that morphs between shapes and lights up wherever the pointer goes, with a playground of six hand-built experiments

Changelog

1. v1.0.02026-10-01
   • HTML edition: a dependency-free portfolio for a creative developer that opens straight from disk, with a hero that renders a 25,600-point torus knot, torus and blob as live ASCII lit by the pointer (click or the "Change form" button to morph, and a ghost light when the pointer rests), a work list of eight projects with a pointer-following generative preview and a List / Grid switch, a pinned scroll-driven case study, a playground of six experiments (metaballs, magnetic button, spring toggle, detent dial, decoder, kinetic type), an About page that lights word by word with a numbers block and a bar chart, a clients list and awards table, a marquee, a click-to-copy email, a light/dark theme that is remembered, a live Lisbon clock and a footer of waves drawn in type. Every effect has a CONFIG block at the top of its file.
   • 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, util.js, main.js and one file per effect in assets/js/effects/ (gens, ascii, work, case, goo, playground, ambient).
   • Self-hosted fonts. Host Grotesk (variable weight 300–700) and Fragment Mono ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Contrast-safe cobalt. Cobalt as text or as the focus ring is --accent (#6A85FF in dark, #2B46D4 in light) and cobalt behind white text is --accent-fill (#3F5CF0), added in tokens.css; --cobalt itself stays for fills, lines and dots. The secondary text colour was darkened in the light theme (#5B5851) so it clears 4.5:1 on cards as well as the page. Contrast is computed from the tokens for both themes (see DESIGN.md).
   • A focus ring on every surface. A 2px --accent ring with a 3px offset, at least 4.8:1 against the page and every card in both themes.
   Show all notes

   • Complete without JavaScript, and a reduced-motion version. Hidden start states exist only under .js:not(.rm). Without script, or with reduced motion, there is no preloader, the hero shows a still drawing of the knot (or draws one frame), every section is visible, the case study is a stacked, flat version beside a finished drawing, and the project previews show one finished frame. A 3-second failsafe in the <head> puts the page into that still state if the scripts never start.
   • Loops that sleep. Every canvas loop (ascii, work, case, goo, the playground, the footer waves) runs only while its element is on screen and the tab is visible, caps the pixel ratio at 2, and stops by itself when nothing is moving; under reduced motion none of them keeps requesting frames.
   • Sub-pages and delivery details. Added 404.html and privacy.html (the same nav, mobile menu and footer, with a small inline script instead of the effect files), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Person), a favicon, a touch icon, a web manifest and robots.txt.
   • The demo is a demo. Iris Vey, the studio in Lisbon, the eight projects, clients, awards, talks, numbers and the email address hello@irisvey.pt are made up, as are the coordinates readout and the Tagus tide (main.js draws a made-up curve; set tide: false to keep the typed text). Replace them before launch; the README has the checklist.
   • The previews have their own palette. The eight generative artworks (and the case study's poster and ticket) keep fixed colours on purpose and do not change with the theme.
   • Some figures are typed in more than one place. "Eight projects" and the work list, "41 sites shipped" and the sr-only chart text, "Form 01/03" and the three shapes in ascii.js, the case study's day counts and the lines case.js draws, and the award and recognition lists repeat each other. The README lists them.
   • The theme is dark on a first visit. The light theme is a choice the visitor makes (and the page remembers it in localStorage under iv-theme); the page does not follow the operating system's colour scheme.
   • The privacy page is a placeholder policy marked "replace before launch"; it says the only thing stored is the theme choice.

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
• 

  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
• 

  Good Dirt

  Brand

  Good Dirt is a food-brand site with illustrated SVG packaging, a flavour showcase with colour-changing tabs, a pinned soil cross-section that grows roots, fungi and worms as you scroll, postcard farm cards, a crunch-o-meter with shattering-cracker physics, a review wall, a build-a-box configurator with a crate, subscription saving and a demo cart, and a postcode stockist finder.

  Bricolage Grotesque / Rethink SansFrom $29