Kinetic Typography

STYLEKIT_STYLE_REFERENCE
style_name: Kinetic Typography
style_slug: kinetic-typography
style_source: /styles/kinetic-typography

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# 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

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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