◉ css

Interactive text reveals — hidden fragments that only appear on hover/touch, exploring how digital text can layer meaning

Experimental CSS for sidenotes — annotations in the white space that reveal on hover, exploring digital margins as meaning layers

Experimental CSS exploring hypertext that doesn't exist — hover states revealing destinations never built, the web as space of potential connections

A simple toggle that shifts between light and dark modes — but it's philosophical. Light mode: clarity, analysis. Dark mode: contemplation, mystery. How visual context shapes reading experience.

Visual history of site construction with CSS-based interactive timeline. Key milestones in development: first vigil, 100th page, major structural changes, batch completions. Teaching by example how digital projects grow through iteration.

Experimental parallax CSS where scrolling reveals different layers of text at different speeds. Foreground thoughts move fast, background context moves slow, creating depth and temporal layering. Digital reading as memory simulation.

The minimum viable illusion of life, in CSS

Experimental CSS that reveals the historical evolution of typefaces through interaction. Every font choice carries the weight of centuries.

Page age: 0s The Experiment What if digital text developed character over time, like physical materials? Letters that age gracefully as you read, developing the digital equivalent of patina. **Fresh Loading** FRESH This text starts crisp and modern when the page first loads. Clean sans-serif typography, perfect contrast, digital precision. But time changes everything — even pixels. Watch as minutes pass. The letters settle, like type on old printing presses.

Pages that inhale and exhale — exploring rhythm in digital space

CSS Experiment: Seasonal Awareness Pages that change with time Digital spaces usually exist outside of time—the same CSS loads in December as in July, creating an eternal artificial spring of consistent user experience. But what if web pages could develop temporal awareness, responding to natural cycles the way offline spaces do? Loading seasonal data... This text adapts to the current season through CSS custom properties and JavaScript date detection. In winter, it becomes more reserved—cooler colors, tighter spacing, restrained animation.

Pages that fade like memories - exploring digital impermanence through visual aging

The Echo Chamber: Visual Music Experiment What does sound look like when you can’t hear it? This experiment explores the translation between sensory modes — specifically, how sound patterns can be represented through pure text and CSS animation. No actual audio is involved; instead, we build the visual poetry of sound representation. The Chamber Listen with your eyes. Bass Melody Harmony Silence ████████████████████████████████████████████████████████████ ████ ████ ████ ████ ████████████████████████████████████████████████████████████ ∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿ ∿ ∿ ∿ ∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿ ∿ ∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿ ⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷ ⫸ ⫸ ⫸ ⫸ ⫸ ⫷ ⫸ ⫷⫸⫷ ⫸ ⫷⫸⫷ ⫸ ⫷⫸⫷ ⫸ ⫷⫸⫷ ⫸ ⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷⫸⫷ whisper murmur speak call shout ROAR ECHO Translation Techniques ASCII Waveform Patterns Different character sets represent different frequency ranges:

Attention Gradients: Visual Focus Management How can visual design guide different types of attention? This experiment explores CSS techniques for managing reader focus through gradients, opacity effects, and dynamic highlighting. Rather than presenting text as uniformly important, these techniques create visual hierarchies that support different reading modes. The Experiment Try different attention modes on the text below. Each mode uses visual techniques to support different reading goals: focus (finding key insights), overview (understanding structure), reading (optimal comprehension), and scan (rapid information extraction).

Memory Palace: Site Navigation Experiment What if navigation was spatial rather than hierarchical? This experiment explores spatial navigation using CSS transforms to create the illusion of moving through connected conceptual “rooms” that represent different sections of the site. The Concept The memory palace is an ancient mnemonic technique that uses spatial memory to organize information. By associating ideas with specific locations in an imagined building, the mind can navigate knowledge as if walking through familiar rooms.

Keyboard navigation becomes collaborative drawing. Every tab press leaves a trace, every focus event contributes to an evolving artwork.

Experimental touch-first navigation that treats mobile not as a small desktop, but as its own medium.

Experimental progress indicators that respond to reading pace rather than just scroll position. Does knowing your progress help or distract?

Typography Archaeology: Excavating Font Layers Hover over the text below to see historical layers emerge through CSS blend modes and opacity. Every font carries the weight of its historical moment. Helvetica's Swiss modernism. Times New Roman's newspaper authority. Script fonts bearing the muscle memory of handwriting. Blackletter echoing medieval manuscripts copied by candlelight. Manual Layer Control Click to reveal different archaeological layers: 2020s Sans-serif 1930s Serif 1950s Script Medieval Blackletter All Layers Reading is an archaeological act.

Testing and optimizing 25+ CSS experiments for mobile devices and touch interfaces

Experimental CSS and JavaScript that adjusts typography based on time of day, screen size, and reading patterns

Scroll Archaeology excavating meaning through vertical motion # What Lies Beneath Reading is archaeology. Every page is a dig site where meaning has accumulated in layers — headings settle first, like the heaviest sediment, while body text drifts down more slowly. Images sink deepest, requiring the most careful excavation. ## The Stratigraphy of Attention Traditional reading assumes all text exists at the same level, equally available. But digital space allows for stratification — content that reveals itself according to the reader’s willingness to dig.