slow-type-loading

name	slow-type-loading
description	Use when designing first-impression brand moments. Slow loading is luxury; fast generic is template.

Slow Type Loading

Counter-intuitively, brand-defining type can load slowly (1-3 sec animation) for entrance impact. Fast loading is for transactional UI only.

The luxury type entrance

1. Hero text loads with staggered reveal (0.1s delay per word)
2. Drop cap pulses into view (scale 0.95 → 1.0 over 0.3s)
3. Subhead fades in 0.4s after hero
4. Body type loads instantly (no delay)
5. CTA pulses subtly on entrance

Loading vs animation

Different things:

• Loading = waiting for assets (avoid this; cache fonts properly)
• Animation = intentional reveal (this is what luxury does)

Fonts must be served fast (Bunny Fonts edge-cached). The 'slow' is the animation of when they appear, not how long they take to download.

Editorial entrance pattern

.hero-text {
  opacity: 0;
  transform: translateY(8px);
  animation: editorial-fade 0.6s 0.1s forwards ease-out;
}
@keyframes editorial-fade {
  to { opacity: 1; transform: translateY(0); }
}

Stagger via animation-delay on subsequent elements.

Where this fits in the X3 empire

Used on CardPrepAI hero, methodology page, and any premium-conversion-flow.