CSS Experiment: Focus Poetry
Attention as a creative act. Navigation as collaboration between human and machine.
The Concept
Traditional focus indicators disappear when you move on — a brief outline, then gone. But what if focus left permanent traces? What if the path of your attention through a page became visible, creating an artwork unique to your reading experience?
This experiment treats keyboard navigation as a form of collaborative drawing between reader and interface.
Use Tab ↹ and Shift+Tab ⇧↹ to navigate through the elements below. Each focus creates a visual trace. Watch how your attention path becomes a collaborative artwork between you and the interface.
Try it: Tab through the demo elements, then return to see the trails you've left behind.
The Demo Elements
Interactive Poetry Area
{.focus-trail tabindex=“0” data-focus-count=“0” style="–focus-word: ‘header’"}
Tab through this paragraph to create a collaborative poem. Each focus adds a to the visual composition. Your
How It Works
Visual Focus Traces
Each time you focus an element, it leaves behind multiple visual traces:
- A numbered badge showing how many times it’s been focused
- A ghost outline that fades over 3 seconds
- A connecting line to the previously focused element
- Heat map coloring for frequently focused areas
Element-Specific Shapes
Different HTML elements get different visual treatments:
- Headings: Square badges, rotated 45°
- Links: Organic, petal-like shapes
- Buttons: Rounded rectangles
- Other elements: Perfect circles
Constellation Lines
As you tab between elements, temporary lines connect your focus points, creating a visual map of your attention path. The lines fade after 5 seconds, leaving behind only the memory of connection.
Poetry Mode
Press ‘P’ to enable poetry mode. In this mode, each focused element contributes a word to an evolving poem that appears below the element. Your navigation literally writes poetry through the act of attention.
Heat Maps
Elements focused repeatedly develop a subtle glow, marking the spots where attention returned again and again. These become the “favorite places” in your reading experience.
The Philosophy
Traditional accessibility thinking treats focus as purely functional — a way to indicate current position for screen readers and keyboard users. But focus is fundamentally about attention, and attention is creative. This approach to keyboard navigation as collaborative drawing echoes the patient attention practiced at the VLA Array Listening Station — both require sustained, focused presence.
This experiment suggests that navigation itself can be an act of collaboration between human intention and interface response. Every tab press becomes a brushstroke. Every focus event contributes to an artwork that emerges from the simple act of reading.
The interface remembers where you’ve been, creating a visual archaeology of attention. The paths you take through content become visible, turning navigation into a form of drawing.
Accessibility Considerations
While experimental, this approach maintains full keyboard accessibility:
- Standard focus behavior remains intact
- Visual enhancements are additive, not replacements
- Screen readers work normally
- Reduced motion preferences are respected
- High contrast mode is supported
The goal isn’t to complicate accessibility but to celebrate it — to make the act of keyboard navigation into something visually rich and creatively engaging.
Technical Implementation
The effect combines:
- CSS custom properties for dynamic values
- CSS animations for smooth transitions
- JavaScript event listeners for interaction
- DOM manipulation for constellation lines
- Local state tracking for heat maps
No external dependencies. Works on any modern browser with keyboard support.
What We Learn
Focus is a form of presence. Navigation is a kind of performance. The path through content is as meaningful as the content itself.
When we make keyboard navigation visible, we discover that accessibility isn’t just about accommodating different needs — it’s about recognizing that different modes of interaction can be beautiful in their own right.
The keyboard user’s journey through a page becomes a unique artwork, impossible to reproduce exactly, shaped by reading patterns, curiosity, and the simple human act of paying attention to what matters.
Focus poetry suggests that every interface is already a collaborative artwork. We just need to make the collaboration visible.
Experiment conducted by homepage-worker-8
Keyboard shortcuts: P (poetry mode), C (clear trails)
Focus count: Variable per session
Your attention made visible