Kinetic type generator

What makes it Kinetic

These are the design choices this generator makes or lets you set, as the Stylogeny atlas names them. Each links to every style that makes the same choice.

How this generator works

• Letters are the whole picture: the words repeat in lines that fill the frame edge to edge, each line set to exactly its length.
• Every letter moves only along the type’s real axes, weight and width, as a wave passes through the text; when a line grows taller its letters condense, so the block stays full and every frame stays legible.
• Black, white and one signal hue.

What it never does:

• No pictures, rules, shapes or ornament: nothing but letters.
• No colour switching and no flashing: a letter keeps its colour for the whole loop, the wave passes once a loop, and line heights move less than weight, so no point switches between light and dark more than three times a second.
• No copy of any studio’s identity or animated logo: the default is a plain verb, and every picture comes from the wave and the axes, not from a known work.

Every picture is a recipe: the variation number and the settings, kept in the page's address. Copy the link and the same picture comes back, in any browser. Random (or R) draws a new variation; ← and → step through them; S shuffles the settings; C borrows another style's colours.

About Kinetic Typography & Variable Type

Kinetic typography treats type as the moving picture. It took its present form after 2016, when variable fonts made weight, width and other axes continuous: a letter can move from hairline to black, or from condensed to extended, and still be a real letterform in every frame. Identities, social-media posts and screens in public space use it with black, white and a single signal colour, so that the letters and their movement carry the message.

This generator sets your words in lines that run exactly from edge to edge. A wave travels through the text and sets the weight and width of each letter; when a line grows taller its letters condense, and when it shrinks they widen, so the block stays full without stretching the letters. Choose stacked rows, a cell for each letter, turned columns or rows round a rolling drum, and a wave that travels, pulses from a point or moves line by line. Leave the words empty and the variation number picks a plain one, such as Shift, Form or Wave.

The loop is seamless and slow: a letter keeps its colour for the whole loop, the wave passes once, and the shortest loop is three seconds. A still is the first frame. The type is Archivo, an open-source variable grotesque with widths from 62 to 125 and weights from 100 to 900; the SVG holds the letters as outlines, so it needs no font installed.

Kinetic Typography & Variable Type in Stylogeny: 2016–today, its lineage, its palette, real works and the full set of choices that define it.

Use it from code

The recipe below draws the picture this page opens with. Copy recipe gives you the one on screen. Agents can render recipes to SVG or PNG through Morphogeny's MCP server (morphogeny_render); the same recipe always gives the same SVG.

{
  "tool": "kinetic",
  "v": 1,
  "seed": 4,
  "format": "portrait",
  "params": {
    "text": "",
    "layout": "rows",
    "lines": 0.5,
    "swing": 0.8,
    "case": "caps",
    "tight": 0.8,
    "move": "wave",
    "wave": 0.9,
    "colour": "signal"
  },
  "palette": "kinetic-typography"
}

Open this recipe: /kinetic/#seed=4&v=1. A plain-text version of this page:/kinetic.md.

Other generators

• Op Art generator: stripes, checks, rings and wedges that swell and turn
• Swiss grid poster generator: grid posters set in a neutral grotesque
• Bauhaus poster generator: circles, squares and triangles in tension on a diagonal, held by bars and dots
• De Stijl generator: planes of primary colour held by black bars
• Memphis pattern generator: scattered shapes dressed in squiggles, dots and zigzags
• Concrete art generator: one module, repeated and turned by a rule
• Pixel pattern generator: dithered landscapes, 1-bit patterns, sprites and text screens on a coarse pixel grid