# Kinetic type generator

Your words, repeated line after line to fill the frame edge to edge, while a wave runs through them and every letter swells and narrows along its weight and width axes.

Open the generator: https://morph.ogeny.app/kinetic/

## Design choices

- **Rotated & vertical setting** (`type.rotated`): Lines set at angles, stacked or running vertically. “Layout”: Columns. https://stylogeny.com/design-choices/rotated-and-vertical-setting/
- **Illusion of depth** (`space.depth-illusion`): Perspective, overlap, shadow or parallax create a z-axis. “Layout”: Rolling drum. https://stylogeny.com/design-choices/illusion-of-depth/
- **Repetition & rhythm** (`space.repetition`): Repeated units create a visual cadence. Set by “Repetition & rhythm”. https://stylogeny.com/design-choices/repetition-and-rhythm/
- **Experimental & distorted** (`type.experimental`): Stretched, fragmented, layered or deliberately hard-to-read letters. Set by “Experimental & distorted”. https://stylogeny.com/design-choices/experimental-and-distorted/
- **All caps** (`type.all-caps`): Capitals for monumentality, order or shouting. “Case”: All caps. https://stylogeny.com/design-choices/all-caps/
- **Lowercase only** (`type.lowercase`): Capitals rejected as unnecessary. “Case”: Lower case. https://stylogeny.com/design-choices/lowercase-only/
- **Tight setting** (`type.tight-setting`): Letters and lines crowded together, touching or overlapping. Set by “Tight setting”. https://stylogeny.com/design-choices/tight-setting/
- **Motion & broadcast** (`medium.motion`): Animated, time-based work: titles, broadcast, video. Set by “Motion & broadcast”. https://stylogeny.com/design-choices/motion-and-broadcast/
- **Monochrome** (`color.monochrome`): A single hue, or black and white. “Colour”: Black and white. https://stylogeny.com/design-choices/monochrome/
- **Limited spot colours** (`color.limited-spot`): Two or three flat inks. “Colour”: One signal hue. https://stylogeny.com/design-choices/limited-spot-colours/
- **Type as image** (`type.oversized`): Letters so large they become the picture. Always. https://stylogeny.com/design-choices/type-as-image/
- **Typography only** (`image.typographic-only`): No pictures; type carries everything. Always. https://stylogeny.com/design-choices/typography-only/
- **Grotesque & neo-grotesque** (`type.grotesque`): Neutral, rational sans: Akzidenz-Grotesk, Helvetica, Univers. Always. https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/
- **Full bleed** (`layout.full-bleed`): Image or colour runs off every edge; no protective margins. Always. https://stylogeny.com/design-choices/full-bleed/
- **Flat fields** (`color.flat-fields`): Unmodulated areas of colour. Always. https://stylogeny.com/design-choices/flat-fields/
- **Ornament-free** (`ornament.none`): Decoration rejected; form follows function. Always. https://stylogeny.com/design-choices/ornament-free/

## How it 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.

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.

## Controls

- `text` Words (default ""): The words that fill the frame; several take turns line by line. Left empty, the variation number picks a word.
- `layout` Layout (rows | cells | columns | drum; default rows): How the lines fill the frame: rows, a cell for each letter, turned columns, or rows round a drum.
- `lines` Repetition & rhythm (0–1, default 0.5): Few tall, condensed lines or many short, wide ones.
- `swing` Experimental & distorted (0–1, default 0.8): How far the wave pushes weight, width and line height.
- `case` Case (caps | lower | typed; default caps): Capitals, lower case (with ascenders and descenders in the line), or the words as you typed them.
- `tight` Tight setting (0–1, default 0.8): Letter spacing and the gaps between lines, down to touching.
- `move` Motion & broadcast (wave | pulse | lines; default wave): The shape of the wave that runs through the letters.
- `wave` Wave length (0.3–3, default 0.9): The distance between crests, in frame widths.
- `colour` Colour (mono | signal | ground; default signal)

## 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): https://stylogeny.com/styles/kinetic-typography/

## Recipe

```json
{
  "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"
}
```