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

---

# Kinetic Typography Design System

> 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.

## Design 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

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#F4F1EB]/20
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: hover:shadow-none
focus: focus:shadow-[0_0_0_2px_rgba(255,77,0,0.4)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:text-[#F4F1EB]
Transition: transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-bold text-[#F4F1EB] tracking-tight leading-[0.95]
Body: text-[#F4F1EB]/70
Mono: font-mono text-[#F4F1EB]/50 uppercase tracking-[0.25em]
```

### Type scale
```
Hero: text-[clamp(3rem,10vw,9rem)]
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-2xl md:text-3xl
Body: text-sm md:text-base
Small: text-[11px]
```

### Spacing
```
Section: py-20 md:py-32
Container: px-6 md:px-10
Card: py-8 px-1
Gap sm: gap-3
Gap md: gap-6
Gap lg: gap-10
```

### Color roles
```
Background primary: bg-[#0B0B0C]
Background secondary: bg-[#141416]
Background accent: bg-[#FF4D00]
Text primary: text-[#F4F1EB]
Text secondary: text-[#F4F1EB]/70
Text muted: text-[#F4F1EB]/45
Button primary: bg-[#FF4D00] text-[#0B0B0C]
Button secondary: bg-transparent text-[#F4F1EB] border border-[#F4F1EB]/25
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `duration-100`
- `duration-2000`
- `ease-linear`
- `italic`

### Banned patterns
- matches `^rounded-(lg|xl|2xl|3xl|full)$`
- matches `^shadow-(md|lg|xl|2xl)$`
- matches `^bg-gradient-`
- matches `^duration-(100|150|2000)$`
- matches `^ease-linear$`

### Why they are banned
- `rounded-lg`: Kinetic typography uses sharp editorial edges (rounded-none)
- `rounded-full`: Sharp editorial edges only; pills soften the type stage
- `shadow-lg`: Depth comes from type contrast, never drop shadows
- `bg-gradient-to-r`: The stage is flat ink; gradients dilute the type
- `from-indigo-600`: No AI-cliche gradients; ink, bone and one signal orange only
- `duration-100`: Motion needs room to breathe: 300-900ms with expo-out
- `duration-2000`: Animations over 1.2s drag; keep entrances under 0.9s
- `ease-linear`: Linear easing is lifeless; use cubic-bezier(0.22,1,0.36,1)
- `italic`: Emphasis comes from weight and width axes, not slant

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
uppercase tracking-[0.15em] text-sm font-semibold
border border-[#F4F1EB]/25
rounded-none
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:border-[#FF4D00]
active:scale-[0.98]
```

### Every card must include
```
border-t border-[#F4F1EB]/15
rounded-none
hover:border-[#FF4D00]
transition-colors duration-500
```

### Every input must include
```
bg-transparent
border-b border-[#F4F1EB]/20
rounded-none
text-[#F4F1EB] placeholder-[#F4F1EB]/25
focus:outline-none
```

---

## [COMPARE] Kinetic Typography wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98] bg-[#FF4D00] text-[#0B0B0C]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500 py-8 px-1">
 <h3 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Kinetic Typography page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#0B0B0C] text-[#F4F1EB] border border-[#F4F1EB]/20 px-6 md:px-10">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 text-[#F4F1EB]/70 text-[11px]">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#FF4D00] text-[#F4F1EB] py-20 md:py-32 px-6 md:px-10">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-[clamp(3rem,10vw,9rem)]">
 {HEADLINE}
 </h1>
 <p class="text-[#F4F1EB]/70 text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98] bg-[#FF4D00] text-[#0B0B0C]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#0B0B0C] text-[#F4F1EB] py-20 md:py-32 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-3xl md:text-5xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Card template - repeat for each card -->
 <div class="border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500 py-8 px-1">
 <h3 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{CARD_TITLE}</h3>
 <p class="text-[#F4F1EB]/70 text-sm md:text-base text-[#F4F1EB]/45">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#141416] text-[#F4F1EB]/70 py-20 md:py-32 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 <div>
 <span class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{LOGO_TEXT}</span>
 <p class="text-[#F4F1EB]/70 text-[11px]">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-bold text-[#F4F1EB] tracking-tight leading-[0.95] text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="text-[#F4F1EB]/70 text-[11px]">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Kinetic Typography post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `uppercase tracking-[0.15em] text-sm font-semibold border border-[#F4F1EB]/25 rounded-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-[#FF4D00] active:scale-[0.98]`
- [ ] Card includes: `border-t border-[#F4F1EB]/15 rounded-none hover:border-[#FF4D00] transition-colors duration-500`
- [ ] Input includes: `bg-transparent border-b border-[#F4F1EB]/20 rounded-none text-[#F4F1EB] placeholder-[#F4F1EB]/25 focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Never animate layout properties (top/left/width/height) — transform/opacity/font-variation-settings only
- [ ] Does not violate: Never run multiple dominant motions in one viewport (choreography: one protagonist at a time)
- [ ] Does not violate: Never let images or illustration steal the stage from type (imagery is texture at most)
- [ ] Does not violate: Never use more than one accent, never flood signal orange as a surface color
- [ ] Does not violate: Never substitute a flat opacity fade for a mask rise

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Kinetic Typography

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a kinetic typography landing page with:
1. Stage: #0B0B0C background, #F4F1EB text, single #FF4D00 accent
2. Load variable font Anybody (wght 100-900, wdth 50-150) from fonts.loli.net
3. Hero: clamp(3rem,10vw,9rem) headline, each line rising from an overflow mask with 80ms stagger, one accent word running a wght 300-800 breathing loop
4. A full-width marquee strip of uppercase feature words, pause on hover
5. Numbered feature cards whose headlines jump from wght 450 to 800 on hover
6. CTA button with signal-orange fill wipe rising on hover
7. All easing cubic-bezier(0.22,1,0.36,1); only transform/opacity/font-variation-settings animate; prefers-reduced-motion lands everything on static end states
```

### 2. 

```
Create a type-driven portfolio site with:
1. Ink stage #0B0B0C, bone type #F4F1EB, orange signal #FF4D00
2. Project list as huge headline rows (clamp 2.5rem-6rem): on hover the row's font-variation-settings width stretches wdth 100 to 130 and an orange index number slides in
3. Section headings enter with per-char mask rise, 40ms stagger, expo-out
4. A skills marquee strip between sections, opposite scroll directions on alternate strips
5. Footer contact line with a giant breathing "HELLO" (wght 300-800 loop)
6. GSAP ScrollTrigger optional recipe for scroll-scrubbed entrances; CSS fallback required
7. prefers-reduced-motion: all text static at final weights
```

## 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