Filter dot

Your Agent Forgets Who It Is Every Session. Mine Doesn't.
Research Mar 28, 2026
Designing an Enduring Agent Harness
Engineering Mar 19, 2026
Hanover Park raises $27M to rebuild how private funds actually run.
Announcements Mar 18, 2026

Why this feels right

This filter pill looks simple, but layered techniques create the illusion of a living, physical object.

1. CSS Anchor Positioning

The dot doesn't calculate where to go with JavaScript. Each button contains an invisible anchor element. When a button becomes active, its anchor gets anchor-name: --active-pill, and the dot — which has position-anchor: --active-pill — slides there natively via CSS transitions. The browser interpolates the position. Zero layout thrashing.

2. The parabolic arc

Linear slide + sinusoidal vertical offset = ballistic trajectory. The horizontal movement is a simple CSS transition. On top of that, a keyframe animation adds vertical displacement using pre-baked sine values (sin 18°, sin 36°, sin 54°...) — tracing a smooth parabolic arc. The arc height scales with --arc-distance: jumping 3 positions arcs 3x higher than jumping 1.

3. Squash and stretch

Disney's most important animation principle. During flight, the dot stretches vertically and squishes horizontally — like a rubber ball in the air. On landing, it pancakes flat, bounces up slightly, then settles. Clicking the dot directly triggers a playful squish. This gives the dot perceived mass and elasticity.

4. Two-phase animation chain

The animationend event chains two animations: the arc (0.45s) transitions into the landing squash (0.35s). The text color only activates when the dot lands — not on click. This tiny delay makes the interaction feel causal.

5. Ghost trail

A second dot element at 12% opacity and 2px blur follows the main dot with a slower, eased transition (0.55s vs 0.45s). This creates a faint motion trail that reinforces the sense of speed and direction without being distracting.

6. Idle breathing

When the dot is at rest, it gently pulses with a slow scale(1 → 1.15) and opacity(1 → 0.8) cycle over 3 seconds. This makes the dot feel alive even when nothing is happening — like it's waiting for your next move.

7. Sound design

A barely-audible synthesized pop plays on landing — a 50ms sine wave oscillator at ~600Hz that fades out via a gain ramp. Clicking the dot plays a softer, higher-pitched blip. The sounds are generated with the Web Audio API — no audio files needed.

8. Haptic feedback

On mobile devices that support it, a 10ms vibration pulse fires on landing via navigator.vibrate(). Combined with the sound and visual squash, this creates a multi-sensory "impact" moment.

9. Card choreography

Exiting cards stagger out 40ms apart, fading up and scaling down. After they exit, their height collapses so remaining cards slide up smoothly. Entering cards stagger in from below with 60ms delays — creating a cascade that draws the eye through the new content.

Why it feels alive

Real objects don't teleport. They launch, arc, deform in flight, impact, compress, bounce, and settle. Each phase lasts just long enough to register subconsciously (~0.4s total) but not long enough to feel slow. The ghost trail adds motion history. The breathing adds resting presence. The sound and haptics add multi-sensory confirmation. The animation has weight, but it never makes you wait.

The entire implementation is pure CSS animations + Web Audio API + one CSS custom property set by JS. No animation library.