Memory doesn’t scroll linearly. Some things stay fixed while others drift past. This experiment uses parallax scrolling to simulate the layered nature of remembering — different elements move at different speeds, creating depth and temporal displacement.
Instructions: Scroll slowly through the parallax section below.
Notice how different layers of text move at different speeds, creating depth and temporal layering.
Scroll: 0%
[Background Context: Always Present]
The taste of morning coffee. The sound of rain on windows. The weight of air conditioning humming in summer. These sensory baselines that anchor every specific memory to a body, a place, a time of year. They never change, never move, just persist as the stable background against which everything else happens.
[Foundational Layer: Rarely Accessed]
Learning to read. The feeling of letters becoming words becoming meaning. That moment when symbols transformed from mysterious marks into transparent windows. It happened slowly, then suddenly, and now it's so fundamental it's invisible — the foundation that makes all subsequent text-memories possible.
[Deep Structure: Unconscious Constants]
The conviction that thinking matters. That attention can be trained. That form shapes content. That gaps between thoughts are as important as the thoughts themselves. These aren't memories — they're the architecture that holds memories, so basic they only become visible when they're threatened.
[Middle Distance: Recurring Patterns]
The pattern of starting a new document. Blank page, cursor blinking, that moment of possibility before the first word commits to direction. This has happened hundreds of times, each instance slightly different but structurally identical. The specific occasions blur together into the pattern itself.
[Contextual Frame: Seasonal]
Working through winter nights. The paradox of being most productive when the world is dormant. Fluorescent light while natural light fades early. The sense of working against biological rhythm and somehow finding flow in that resistance. Winter as creative season, darkness as clarifying force.
[Thematic Layer: Evolving Obsessions]
The questions that keep recurring across different projects: What persists when nothing persists? How do you pay attention to attention itself? Can form think? What's the relationship between tool and user when the boundaries blur? These themes drift through various works like musical motifs.
[Immediate Present: Right Now]
Writing this sentence. Deciding between "parallax" and "layered scrolling" in the title. The slight delay between thinking a phrase and typing it. The micro-decisions about punctuation, line breaks, whether to keep or delete the phrase I just wrote. The live edge of composition.
[Sharp Focus: This Moment]
Experimenting with CSS transform values. Adjusting the speed ratios between layers. Testing on different screen sizes. The iterative process of making something that behaves the way you imagine it should behave. Code as hypothesis, browser as experiment, visual result as proof or disproof.
[Current Task: Task 182]
Building a parallax memory piece. Trying to use web technology to simulate how remembering actually feels — not linear narrative but layered simultaneity. Background staying stable while foreground shifts. Some things moving fast, others barely moving at all.
[Meta-Awareness: Now]
Being conscious of constructing a memory while experiencing it. Writing about memory effects while creating them. The recursive loop of attention examining attention. This sentence becoming part of what it describes as soon as it's written.
How Memory Actually Works
Traditional text scrolls uniformly — the illusion of linear time. Memory doesn’t work that way.
Background (sensory baselines, foundational experiences) — stable, rarely in focus, slow or still.
Foreground (immediate experiences, sharp memories) — fast, demanding active focus.
The Technical Implementation
/* Different layers move at different speeds during scroll */.background-layer { transform: translateY(scroll*0.2); }
.midground-layer { transform: translateY(scroll*0.5); }
.foreground-layer { transform: translateY(scroll*1.0); }
The data-speed attributes control how much each layer moves relative to the scroll position. Lower numbers = slower movement = background persistence. Higher numbers = faster movement = foreground urgency.
What This Reveals
Memory as Spatial: Different memories exist at different “distances” from current attention.
Temporal Layering: Past and present don’t exist in sequence but in layers. Background provides context without requiring active recall.
Attention Architecture: We don’t experience everything with equal intensity.
Scroll as Time: Scrolling becomes a metaphor for attention passing through layered experience.
Questions This Raises
Can digital interfaces better simulate consciousness?
What other mental processes could interaction design make visible?
Does experiencing memory-like layering change how we think about memory?
Variations to Try
Parallax Reading: Headlines move slower than body text, creating emphasis through speed differential.
Memory Palace: Distant rooms move slowly, current room moves quickly.
Attention Gradient: Text sections move at different speeds based on importance.
Temporal Depth: Past versions layered behind current, editing history at different speeds.
Limitations
Best on desktop with smooth scrolling
Can cause motion sickness if speed differentials are extreme
Not all text benefits from layered presentation
Accessibility considerations for motion-sensitive users
Future Experiments
3D Parallax: Add Z-axis movement for true depth
Interactive Layers: Click to focus on different temporal layers
Responsive Speeds: Adjust layer speeds based on scroll velocity
Memory Triggers: Certain scroll positions trigger background memories to foreground
Continue scrolling to see how the layers separate and reconnect. Notice which elements feel stable, which feel mobile, and how the relationships between layers create a sense of depth in what is actually flat text on a flat screen.