Kinetic Typography

# Visual style: Kinetic Typography

Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a single signal orange points the way.

## Philosophy
The kinetic creed: words are not placed, they enter. When type is the only protagonist, motion stops being decoration and becomes tone of voice — weight is volume, width is breath, stagger is punctuation.

Core principles:
- Type is the interface: no illustration, no icon salad; hierarchy is carried entirely by extreme contrast of size, weight and width (12px annotations share the stage with 12vw headlines)
- The variable font is the engine: animate font-variation-settings wght and wdth axes, not positions and colors — a native motion no other style owns
- Choreography rule: one dominant motion per viewport; while letters stagger in, everything else holds still
- Mask entrances: text rises from an overflow mask (translateY 110% → 0) like an actor stepping from behind a curtain — never a flat fade
- One signal color: #FF4D00 appears only on primary CTAs, key words and hover feedback, never as a surface
- Motion is physics: expo-out easing cubic-bezier(0.22,1,0.36,1), fast start, slow settle; 30-50ms stagger builds the wave

## Do
- Stage the page on near-black ink #0B0B0C with warm bone text #F4F1EB for maximum contrast
- Load a variable font (e.g. Anybody, wght 100-900 + wdth 50-150) as the display face
- Mask entrances for headlines: overflow-hidden wrapper, inner element animates translateY(110%) to 0, staggered 30-50ms per char/word
- One easing everywhere: expo-out cubic-bezier(0.22,1,0.36,1), 0.7-0.9s
- Animate font-variation-settings: weight breathing 300-800, width stretching 100-150 with scroll velocity
- Extreme size contrast: 11-12px uppercase tracked labels against clamp(3rem,10vw,9rem) tracking-tight headlines
- Seamless CSS marquee (duplicate content, translateX -50% loop), pause on hover
- Signal orange #FF4D00 only on primary CTAs, key words and hover states
- Every animation ships a prefers-reduced-motion fallback that lands on the static end state

## Don't
- Never animate layout properties (top/left/width/height) — transform/opacity/font-variation-settings only
- Never run multiple dominant motions in one viewport (choreography: one protagonist at a time)
- Never let images or illustration steal the stage from type (imagery is texture at most)
- Never use more than one accent, never flood signal orange as a surface color
- Never substitute a flat opacity fade for a mask rise
- Never drag animations past 1.2s or use linear easing
- Never skip the prefers-reduced-motion fallback

## Rules for the AI
# Kinetic Typography Design System

You are an expert frontend developer specializing in kinetic typography. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Kinetic Typography
- **Essence**: Type is the interface; the variable font is the animation engine
- **Mood**: Confident, rhythmic, editorial-brutalist, stage-like
- **Inspiration**: Motion posters, title sequences, Studio Dumbar-school type experiments

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Animating top/left/width/height/margin | Layout thrash; only transform, opacity, font-variation-settings may animate |
| Multiple dominant motions per viewport | Choreography rule: one protagonist at a time |
| Images/illustration competing with type | Type owns the stage; imagery is texture at most |
| More than one accent; orange surfaces | #FF4D00 is a signal, never a fill |
| Opacity-only fades for entrances | Mask rises are the signature; flat fades are forbidden |
| Animations over 1.2s or linear easing | Kills the snap; use expo-out under 0.9s |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### Stage
- Background #0B0B0C (near-black ink), raised surface #141416
- Text #F4F1EB (warm bone), secondary rgba(244,241,235,0.55)
- The one accent #FF4D00: primary CTAs, key words, hover feedback only

### Variable Font Engine
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap" />
```
Display stack: font-family: "Anybody", Archivo, ui-sans-serif, sans-serif
(fonts.googleapis.com works too; loli.net mirrors it for CN access)

### Mask Rise Entrance (signature)
```html
<span class="block overflow-hidden">
  <span class="inline-block" style="transform: translateY(110%); animation: kt-rise 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(var(--i) * 40ms)">Word</span>
</span>
```
```css
@keyframes kt-rise { to { transform: translateY(0); } }
```

### Weight Breathing
```css
@keyframes kt-breathe {
  from { font-variation-settings: "wght" 300; }
  to { font-variation-settings: "wght" 800; }
}
.kt-breathe { animation: kt-breathe 2.4s ease-in-out infinite alternate; }
```
Apply to ONE key word per viewport.

### Scroll-Velocity Width Stretch (advanced, JS)
```js
let last = scrollY, vel = 0;
(function tick() {
  vel = vel * 0.9 + Math.abs(scrollY - last) * 0.1; last = scrollY;
  el.style.fontVariationSettings = `"wght" 700, "wdth" ${Math.min(150, 100 + vel * 2)}`;
  requestAnimationFrame(tick);
})();
```

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);
const split = SplitText.create(".headline", { type: "chars" });
gsap.from(split.chars, {
  yPercent: 110, stagger: 0.04, duration: 0.9, ease: "expo.out",
  scrollTrigger: { trigger: ".headline", start: "top 80%" },
});
```

### Marquee
Duplicate strip content twice inside a track; animate track translateX(-50%) linear infinite 24s; pause on hover.

### Type Scale
- Labels: 11-12px, uppercase, letter-spacing 0.2-0.3em
- Body: 15-16px, line-height 1.6
- Headlines: clamp(3rem, 10vw, 9rem), letter-spacing -0.02em, line-height 0.95

### Rhythm
- One easing: cubic-bezier(0.22,1,0.36,1)
- Entrances 0.7-0.9s; hover 0.3-0.5s; stagger 30-50ms per char, 80-120ms per line

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .kt-line > span, .kt-breathe, .kt-marquee-track { animation: none; transform: none; }
}
```
Everything lands on its static end state; zero information loss.

## Self-Verification Checklist

- [ ] Ink stage, bone type, single orange signal
- [ ] Headlines use mask rise + stagger, never flat fades
- [ ] Only transform/opacity/font-variation-settings animate
- [ ] One dominant motion per viewport
- [ ] prefers-reduced-motion fallback present
- [ ] expo-out easing everywhere