Subtractive Typography: When Removal Is the Animation

Abstract

Most web animations add movement. What if animation was removal? This experiment documents a scroll-driven Progressive Erasure animation for the createsomething.agency homepage.

The hypothesis: the most CREATE SOMETHING way to tell the subtraction story is through text that subtracts itself. No decorative elements—the medium embodies the message.

The Problem

Hero animations typically follow additive patterns: fade in, slide up, scale from zero. They announce presence. They demand attention. They say "look at me."

But CREATE SOMETHING's philosophy is subtractive. We remove what obscures. How do you animate that?

""

Treatments Explored

We evaluated five approaches before selecting Progressive Erasure:

Why Progressive Erasure Won

The strikethrough treatment is semantically honest:

• Shows the "before" — Corporate fluff in full view
• Makes removal visible — Strikethrough as editorial act
• Reveals the essence — What remains after subtraction

The user watches subtraction happen. They see what was removed and why. The technique teaches the philosophy it describes.

Implementation

The component uses scroll position to drive four distinct phases:

Key Technical Decisions

Word-Level State

Each word carries a keep boolean. Essential words remain; others subtract.

const words = [
  { text: 'We', keep: true },
  { text: 'help', keep: false },
  { text: 'businesses', keep: false },
  // ...
  { text: 'remove', keep: true },
  { text: 'what', keep: true },
  { text: 'obscures.', keep: true }
];

CSS-Driven Strikethrough

The strikethrough is a pseudo-element with width driven by scroll progress. No JavaScript animation library needed.

.strike {
  position: absolute;
  left: 0;
  top: 55%;
  height: 0.12em;
  width: calc(var(--strike, 0) * 100%);
  background: var(--color-fg-primary);
}

Coalescing via max-width

Removed words collapse by transitioning max-width to 0. This creates smooth horizontal compression without layout jumps.

.word.hidden {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

Philosophical Alignment

Rams Principle 10: As Little Design as Possible

The animation is the content. There are no decorative elements, no particles, no background effects. Text alone carries the entire experience.

Heidegger: Aletheia (Unconcealment)

Truth emerges through removal. The essence was always there—hidden by corporate fluff. The animation doesn't create meaning; it reveals what was obscured.

The Subtractive Triad

The technique demonstrates what it describes:

• DRY — One scroll handler, one state object, one render loop
• Rams — Every word earns its place or gets removed
• Heidegger — The animation serves the hermeneutic whole

Results

The component is live on createsomething.agency. Qualitative observations:

• Users scroll slowly through the animation, watching the transformation
• The final phrase lands with weight—it's earned through the subtraction
• The CTA ("See how") appears only after the philosophy is demonstrated

The medium became the message. Visitors don't read about subtraction—they experience it.

Conclusion

""

Progressive Erasure proves that animation can embody philosophy. By making removal the animation itself, we create an experience that teaches through doing rather than telling.

The strikethrough is honest: it shows what was there and what remains. The coalescing is satisfying: gaps close, essentials gather. The final state is earned: you watched the subtraction happen.

This is subtractive design applied to motion. The technique is the message.