Kinetic Typography

Also called: Motion Typography, Animated Type, Type in Motion

Type is the moving image: headlines reveal letter by letter, weights breathe on a variable font and marquee bands scroll — with a calm static fallback.

“Moving type”Editorial & TypographicEra: 2018 → today (title sequences → variable fonts on the web)BoldTechyEdgyLuxury

Open full screen ↗

kinetic-typography / landingEN

kinetic-typography / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md14pxRadius lg20pxRadius xl28pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

letter-by-letter revealvariable font weight wavescrolling marquee bandsoutlined display textwide display typedark stagestaggered entrancesreduced-motion fallback

Kinetic Typography makes the words themselves the animation. Headlines rise in letter by letter, a variable display face pulses between hairline and black weights in a slow wave, and huge outlined lines of text scroll as marquee bands between sections. Everything else is quiet — a near-black stage, off-white type, one violet and one coral highlight, soft pill controls — so the motion reads as choreography rather than noise. Every effect sits behind prefers-reduced-motion and degrades to crisp static type.

Best for

Launch and campaign pages
Music, film, festivals and events
Agency and studio showreels
Editorial features with one big idea

Avoid for

Long reading or documentation pages
Audiences sensitive to motion (vestibular disorders) without a reduced-motion path
Forms and checkout flows where motion distracts

✓ Do

Reveal one headline at a time (32ms stagger per letter — per word in Thai — and 900ms per unit on cubic-bezier(.16,1,.3,1)); only the hero wave, the two marquees and the feature-index swell (while in view, with the hero wave paused) loop
Use a true variable font and animate font-variation-settings (hero wave wght 800 ↔ 220, index swell 300 → 800), not font-weight keyframes (Latin only; the Thai fallback Prompt is static, so Thai hero headlines get a violet colour sweep instead and Thai index titles step Prompt 200 → 800)
Wrap every animation in prefers-reduced-motion: no-preference and keep the static state fully legible
Split Thai by word, never by character, so vowels and tone marks stay attached

✕ Don't

Don’t animate body text or anything users must read to act
Don’t run more than two marquees per screen (one outlined band, one slower logo row)
Don’t clip letters with overflow:hidden reveals — it cuts off Thai tone marks
Don’t carry the tight 1.02 headline line-height into Thai: it is for Latin only; with lang=th, hero, h1 and h2 use 1.3 and feature-index titles 1.4 so tone marks and upper vowels never collide

Not to be confused with

Kinetic Brutalism →Kinetic Brutalism is harsh: acid colours, hard cuts, raw borders; Kinetic Typography is choreographed and refined on a quiet dark stage.Motion-Driven →Motion-Driven animates the whole interface (cards, sections, scroll); Kinetic Typography animates only the letters and words.Bold Typography (Poster) →Poster type is static, condensed and printed-looking; Kinetic uses a wide variable face whose weight and position move.

On mobile

Keep one kinetic moment per screen (title reveal or a ticker), never both; skip the weight wave on phones to save battery and keep the floating pill tab bar static.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinUnbounded · 200/300/400/500/600/700/800/900

The quick brown fox

Heading · ThaiPrompt · 200/300/400/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinManrope · 400/500/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Prompt is a wide, loopless geometric Thai that spans hairline to black like Unbounded; Anuphan’s open, friendly geometry sits naturally next to Manrope for UI text.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 14px · lg 20px · xl 28px · pill 999px`
Border	`1px`
Shadow	`0 20px 50px rgba(0,0,0,0.35)`
Display	`clamp(2.75rem, 7.4vw, 6.75rem)`
Motion	`700ms cubic-bezier(.16,1,.3,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Kinetic Typography (kinetic-typography) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400;500;600;700;800;900&family=Manrope:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@200;300;400;800&family=Anuphan:wght@400;500;700&display=swap
 */
:root {
  --radius: 20px;
  --background: #F4F1EA;
  --foreground: #0C0C0D;
  --card: #FFFDF8;
  --card-foreground: #0C0C0D;
  --popover: #FFFDF8;
  --popover-foreground: #0C0C0D;
  --primary: #0C0C0D;
  --primary-foreground: #F4F1EA;
  --secondary: #5236F0;
  --secondary-foreground: #FFFFFF;
  --muted: #EAE5DA;
  --muted-foreground: #5C5852;
  --accent: #EAE5DA;
  --accent-foreground: #0C0C0D;
  --destructive: #C62828;
  --border: #D6D0C4;
  --input: #D6D0C4;
  --ring: #0C0C0D;
  --chart-1: #0C0C0D;
  --chart-2: #5236F0;
  --chart-3: #D9401C;
  --chart-4: #167A4B;
  --chart-5: #9C978E;
  --sidebar: #FFFDF8;
  --sidebar-foreground: #0C0C0D;
  --sidebar-primary: #0C0C0D;
  --sidebar-primary-foreground: #F4F1EA;
  --sidebar-accent: #EAE5DA;
  --sidebar-accent-foreground: #0C0C0D;
  --sidebar-border: #D6D0C4;
  --sidebar-ring: #0C0C0D;
}

.dark {
  --background: #0C0C0D;
  --foreground: #F4F1EA;
  --card: #151517;
  --card-foreground: #F4F1EA;
  --popover: #151517;
  --popover-foreground: #F4F1EA;
  --primary: #F4F1EA;
  --primary-foreground: #0C0C0D;
  --secondary: #A391FF;
  --secondary-foreground: #0C0C0D;
  --muted: #1D1D20;
  --muted-foreground: #A29E97;
  --accent: #1D1D20;
  --accent-foreground: #F4F1EA;
  --destructive: #FF6B6B;
  --border: #2C2C31;
  --input: #2C2C31;
  --ring: #F4F1EA;
  --chart-1: #F4F1EA;
  --chart-2: #A391FF;
  --chart-3: #FF6A45;
  --chart-4: #4ADE9B;
  --chart-5: #5D5D66;
  --sidebar: #151517;
  --sidebar-foreground: #F4F1EA;
  --sidebar-primary: #F4F1EA;
  --sidebar-primary-foreground: #0C0C0D;
  --sidebar-accent: #1D1D20;
  --sidebar-accent-foreground: #F4F1EA;
  --sidebar-border: #2C2C31;
  --sidebar-ring: #F4F1EA;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Kinetic Typography (kinetic-typography) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400;500;600;700;800;900&family=Manrope:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@200;300;400;800&family=Anuphan:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #F4F1EA;
  --color-surface: #FFFDF8;
  --color-surface-2: #EAE5DA;
  --color-text: #0C0C0D;
  --color-text-muted: #5C5852;
  --color-primary: #0C0C0D;
  --color-on-primary: #F4F1EA;
  --color-secondary: #5236F0;
  --color-on-secondary: #FFFFFF;
  --color-accent: #D9401C;
  --color-border: #D6D0C4;
  --color-success: #167A4B;
  --color-warning: #9A6100;
  --color-danger: #C62828;
  --color-chart-1: #0C0C0D;
  --color-chart-2: #5236F0;
  --color-chart-3: #D9401C;
  --color-chart-4: #167A4B;
  --color-chart-5: #9C978E;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 20px 50px rgba(0,0,0,0.35);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.45);
  --font-heading: "Unbounded", "Prompt", system-ui, sans-serif;
  --font-body: "Manrope", "Anuphan", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0C0C0D;
  --color-surface: #151517;
  --color-surface-2: #1D1D20;
  --color-text: #F4F1EA;
  --color-text-muted: #A29E97;
  --color-primary: #F4F1EA;
  --color-on-primary: #0C0C0D;
  --color-secondary: #A391FF;
  --color-on-secondary: #0C0C0D;
  --color-accent: #FF6A45;
  --color-border: #2C2C31;
  --color-success: #4ADE9B;
  --color-warning: #FFC24B;
  --color-danger: #FF6B6B;
  --color-chart-1: #F4F1EA;
  --color-chart-2: #A391FF;
  --color-chart-3: #FF6A45;
  --color-chart-4: #4ADE9B;
  --color-chart-5: #5D5D66;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Kinetic Typography (kinetic-typography). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400;500;600;700;800;900&family=Manrope:wght@400;500;700&family=DM+Mono:wght@400;500&family=Prompt:wght@200;300;400;800&family=Anuphan:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9451,
            0.9176
          ],
          "hex": "#f4f1ea"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9922,
            0.9725
          ],
          "hex": "#fffdf8"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.898,
            0.8549
          ],
          "hex": "#eae5da"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.3451,
            0.3216
          ],
          "hex": "#5c5852"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9451,
            0.9176
          ],
          "hex": "#f4f1ea"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3216,
            0.2118,
            0.9412
          ],
          "hex": "#5236f0"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.251,
            0.1098
          ],
          "hex": "#d9401c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.8157,
            0.7686
          ],
          "hex": "#d6d0c4"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.4784,
            0.2941
          ],
          "hex": "#167a4b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3804,
            0
          ],
          "hex": "#9a6100"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.1569,
            0.1569
          ],
          "hex": "#c62828"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3216,
            0.2118,
            0.9412
          ],
          "hex": "#5236f0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.251,
            0.1098
          ],
          "hex": "#d9401c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.4784,
            0.2941
          ],
          "hex": "#167a4b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.5922,
            0.5569
          ],
          "hex": "#9c978e"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.0824,
            0.0902
          ],
          "hex": "#151517"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1137,
            0.1255
          ],
          "hex": "#1d1d20"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9451,
            0.9176
          ],
          "hex": "#f4f1ea"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.6196,
            0.5922
          ],
          "hex": "#a29e97"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9451,
            0.9176
          ],
          "hex": "#f4f1ea"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.5686,
            1
          ],
          "hex": "#a391ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.051
          ],
          "hex": "#0c0c0d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2706
          ],
          "hex": "#ff6a45"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1725,
            0.1922
          ],
          "hex": "#2c2c31"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.8706,
            0.6078
          ],
          "hex": "#4ade9b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7608,
            0.2941
          ],
          "hex": "#ffc24b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4196
          ],
          "hex": "#ff6b6b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9451,
            0.9176
          ],
          "hex": "#f4f1ea"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.5686,
            1
          ],
          "hex": "#a391ff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2706
          ],
          "hex": "#ff6a45"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.8706,
            0.6078
          ],
          "hex": "#4ade9b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3647,
            0.3647,
            0.4
          ],
          "hex": "#5d5d66"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Unbounded",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "DM Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 700,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.16,
      1,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 5
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!