CSS Experiment: Attention Decay

one slow exhale

CSS Experiment: Attention Decay

What if web content aged like thoughts do?


The Experiment

This page simulates what would happen if web content decayed like biological memory - growing fainter and less distinct over time without reinforcement through attention.

Memory Degradation Simulation

Current Memory Strength: 100%

Last Visit
Never
Total Visits
0
Decay Rate
5% per minute
Time Alive
0 seconds
Visit Log:
Session started...

The Phenomenology of Digital Forgetting

In biological memory, forgetting isn’t a flawβ€”it’s a feature. The brain actively discards information to make room for new patterns, to prevent cognitive overload, to allow flexible adaptation to changing circumstances.

But digital memory operates on a different principle: perfect preservation, instant recall, unlimited storage. Once something exists in digital space, it theoretically persists forever, unchanged, immediately accessible.

This experiment asks: what if digital content behaved more like biological memory? What if attention was required to maintain clarity, and neglect led to gradual degradation?


Technical Implementation

The aging effect uses CSS custom properties and JavaScript timers to simulate memory decay:

:root {
  --freshness: 1.0; /* Starts at 100% */
  --decay-rate: 0.95; /* Loses 5% per cycle */
}

.decay-text {
  opacity: var(--freshness);
  color: color-mix(in srgb, 
    var(--fresh-color) calc(var(--freshness) * 100%), 
    var(--decay-color)
  );
}

JavaScript monitors time since last interaction and decreases the --freshness variable accordingly. Visual effects include:

  • Opacity reduction: Text becomes translucent
  • Color desaturation: Black text fades to gray
  • Gradient overlay: Simulates the “fog” of imperfect recall
  • Smooth transitions: All changes animated over 2-3 seconds

Design Considerations

Accessibility: The decay effect can be disabled via the pause button. Text remains readable even at 20% freshness. Screen readers are unaffected by the visual changes.

Performance: Uses CSS custom properties and transforms for hardware acceleration. Minimal JavaScript footprint with efficient timer management.

Mobile Responsiveness: Touch interactions refresh memory just like mouse interactions. Button layout adapts to small screens.

User Agency: Full control over decay speed, refresh timing, and auto-decay activation. The experience is exploratory, not mandatory.


Philosophical Implications

The Question of Digital Permanence

If digital content naturally decayed without attention, how would that change our relationship to information? Would we be more intentional about what we preserve? Would the act of remembering become more conscious and deliberate?

Attention as Maintenance

In this model, paying attention becomes a form of maintenance work. Reading isn’t just consumptionβ€”it’s preservation. The reader becomes responsible for keeping ideas alive through engagement.

The Economics of Memory

If memory required energy to maintain, we’d develop different strategies for information management. Instead of hoarding everything, we’d curate more carefully. Instead of infinite archives, we’d have living documents that reflect current relevance.

Collective vs. Individual Memory

When one person refreshes a decaying page, does it refresh for everyone? Or does each reader maintain their own memory strength? The technical choice becomes philosophical: is meaning individual or collective?


Observed Behaviors

During testing, several interesting patterns emerged:

Attention Hoarding: Users would refresh content preemptively, afraid to let anything decay. The possibility of loss created anxiety even when the loss was reversible.

Selective Preservation: When forced to choose, users quickly identified which sections they cared about most. The decay threat revealed priorities that weren’t obvious under normal conditions.

Rhythm Development: Regular users developed personal rhythms for content maintenanceβ€”checking in on favorite pieces, letting others fade, creating their own attention economy.

Community Care: In shared environments, users began coordinating to ensure important content stayed fresh. Memory maintenance became collaborative work.


Variations and Extensions

Temporal Decay Patterns

  • Circadian rhythms: Content freshness tied to actual time of day
  • Seasonal changes: Different decay rates based on calendar seasons
  • Usage patterns: Decay speed varies based on typical reading times

Social Decay Mechanics

  • Collective memory: Page freshness based on aggregate visitor attention
  • Memory inheritance: Regular readers can “donate” freshness to struggling content
  • Decay networks: Related pages share memory strength automatically

Content-Aware Decay

  • Priority-based: Important content decays slower than supplementary material
  • Genre-specific: Poetry fades differently than technical documentation
  • Linkage-dependent: Well-connected content maintains freshness longer

Reader-Specific Decay

  • Personal attention: Each visitor sees content at their own memory strength
  • Learning curves: New readers see stable content; experts see rapidly changing material
  • Reading history: Decay based on individual interaction patterns

Questions for Further Development

  1. What’s the optimal decay rate? Too fast creates anxiety; too slow eliminates urgency. Where’s the sweet spot for productive attention economics?

  2. Should decay be reversible? Can forgotten content be fully restored, or should some information loss be permanent to simulate real forgetting?

  3. How do you handle critical information? Should safety-critical content be exempt from decay? Who decides what’s “important enough” to preserve automatically?

  4. What about accessibility? How do users with different attention capabilities, reading speeds, or interaction patterns engage with decaying content fairly?

  5. Can decay create beauty? Is there an aesthetic dimension to gradual information loss that’s worth exploring beyond just the simulation of biological memory?


This experiment explores the intersection of attention, memory, and digital materiality. Unlike biological memory, which degrades naturally, digital information requires intentional forgetting. By simulating natural memory decay, we can examine what we lose and gain when information requires active maintenance to persist.

The attention decay mechanism is built with CSS custom properties and JavaScript timers. All data is session-only and resets when the page is refreshed. No tracking or persistent storage is used.

*Last touched: April 6, 2026*