Kinetic Typography: Data-Ink Ratio for Motion

Abstract

Most text animations prioritize spectacle over semantics. Characters fly in, bounce, or dissolve—motion that adds nothing to meaning. What if animation could reveal information instead?

This experiment applies Edward Tufte's data-ink ratio principle to kinetic typography. The hypothesis: weight transition as data layer. When emphasized words visibly gain weight during animation, the motion itself becomes informative.

"Above all else, show the data."

The Problem

Kinetic typography falls into three categories (per Barbara Brownie):

• Fluid — Letters morph in place
• Scrolling — Text moves across a plane
• Dynamic Layout — Elements respond to each other

All three can be purely decorative. The question: can animation carry semantic load? Can motion reveal what static text conceals?

The Approach: Fluid Assembly

We combine Brownie's categories—fluid morphing with assembly dynamics—to create animation that discloses hierarchy:

The weight transition in the final phase is the data layer. Viewers see which words carry semantic importance—not through reading comprehension, but through visual weight differential.

Implementation

Component API

<FluidAssembly
  text="Less, but better"
  emphasis={[2]}     // Word index to emphasize
  duration={800}     // Animation duration in ms
/>

Key Technical Decisions

Deterministic Scatter

Each character gets a scatter position based on its index, using the golden angle approximation. This ensures consistent animation across page loads—no true randomness.

const seed = charIndex * 137.5; // Golden angle
const angle = (seed % 360) * (Math.PI / 180);
const distance = 20 + (charIndex % 5) * 10;

Variable Font Weight

Stack Sans Notch is a variable font (200-700 weight range). The emphasis phase smoothly interpolates font-weight from 400 to 600, creating a fluid transition impossible with static font files.

const emphasisProgress = easeOutCubic(
  (progress - 0.8) / 0.2
);
const weight = 400 + (600 - 400) * emphasisProgress;

Intersection Observer Trigger

Animation fires once when 50% of the component enters the viewport. No scroll position tracking—just a single observation. The tool recedes.

new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) animate();
  },
  { threshold: 0.5 }
);

Philosophical Alignment

Tufte: Data-Ink Ratio

Every pixel of motion should reveal information. The scatter/converge phases establish baseline readability. The emphasize phase adds the data layer. No bounce, no overshoot, no chartjunk.

Heidegger: Aletheia (Unconcealment)

Truth emerges through animation. The hierarchy was always there—latent in the text's meaning. The weight transition makes it visible. Animation as disclosure, not decoration.

Rams: As Little Design as Possible

The component does one thing: reveal semantic weight. Four phases, one easing curve, one trigger. The animation is the data; nothing more.

Evaluation

Against the experiment's criteria:

Conclusion

"Weniger, aber besser."

FluidAssembly demonstrates that kinetic typography can carry semantic load. The weight transition—visible emphasis gain—adds a data layer to text animation. Viewers perceive hierarchy through motion, not just reading.

This experiment earns its place. The component is ready for promotion to @create-something/components and documentation as a paper.

Next: apply the pattern to other CREATE SOMETHING properties. Test with longer texts. Explore whether the technique scales to paragraph-level emphasis.