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%
Never
0
5% per minute
0 seconds
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
What’s the optimal decay rate? Too fast creates anxiety; too slow eliminates urgency. Where’s the sweet spot for productive attention economics?
Should decay be reversible? Can forgotten content be fully restored, or should some information loss be permanent to simulate real forgetting?
How do you handle critical information? Should safety-critical content be exempt from decay? Who decides what’s “important enough” to preserve automatically?
What about accessibility? How do users with different attention capabilities, reading speeds, or interaction patterns engage with decaying content fairly?
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.