Dancing Letters

Press Play and the letters dance; type your own word and save a video or CSS, not a GIF.

This is a sample. Type your own to replace it.

DANCE BREAKDANCE BREAKDANCE BREAK

Hop in turn motion. Chewy, sticker look, hot pink.

More options

What you type is kept in this browser, so it is here when you come back. Nothing is sent to us.

Next step More motions: reveals, glows and glitches

All 10 dance moves, with their CSS

Hops and jumps

  • Hop in turn. Each letter dips, hops about half the height of a capital and lands with a small squash, a tenth of a second after the letter before it. Then it stands still while the hop runs on down the word. The opening move on this page.
    CSS of Hop in turn
    .wf-hop-in-turn .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-hop-in-turn 1100ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes wf-hop-in-turn {
  0%, 68%, 100% { transform: translate(0em, 0em) scale(1, 1); }
  12% { transform: translate(0em, 0em) scale(1.08, 0.9); }
  34% { transform: translate(0em, -0.38em) scale(0.96, 1.06); }
  56% { transform: translate(0em, 0em) scale(1.06, 0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-hop-in-turn .wf-u { animation: none; }
}
  • Jump and squash. A deep squat, a jump higher than a capital is tall, and a landing that flattens the letter to two thirds of its height before it springs back. The biggest move here: it suits a long line, since a short word is drawn so large that the top of the jump leaves the board.
    CSS of Jump and squash
    .wf-jump-and-squash .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-jump-and-squash 1400ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 130ms);
}
@keyframes wf-jump-and-squash {
  0%, 90%, 100% { transform: translate(0em, 0em) scale(1, 1); }
  14% { transform: translate(0em, 0em) scale(1.25, 0.7); }
  26% { transform: translate(0em, -0.1em) scale(0.85, 1.2); }
  48% { transform: translate(0em, -0.8em) scale(0.92, 1.1); }
  70% { transform: translate(0em, 0em) scale(0.9, 1.1); }
  78% { transform: translate(0em, 0em) scale(1.3, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-jump-and-squash .wf-u { animation: none; }
}

Sways, leans and twists

  • Sway. Every letter tips seven degrees to the left and seven to the right about its foot, like a row of people swaying to a slow song. Each letter is a little behind the last, so the tilt rolls along the line.
    CSS of Sway
    .wf-sway .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-sway 1800ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes wf-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-sway .wf-u { animation: none; }
}
  • Twist. Each letter narrows to a sliver, as if turning side-on, then widens to face front again and waits for its next turn. The height never changes, so the word keeps its line.
    CSS of Twist
    .wf-twist .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-twist 1500ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes wf-twist {
  0%, 44%, 100% { transform: scale(1, 1); }
  22% { transform: scale(0.12, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-twist .wf-u { animation: none; }
}
  • Shimmy. Four quick wiggles from side to side with a slant each way, then a rest for the second half of the loop. Each wiggle is a twentieth of the type size, so the word shivers without leaving its place.
    CSS of Shimmy
    .wf-shimmy .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-shimmy 1600ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes wf-shimmy {
  0%, 50%, 100% { transform: translate(0em, 0em) skewX(0deg); }
  10%, 30% { transform: translate(-0.05em, 0em) skewX(8deg); }
  20%, 40% { transform: translate(0.05em, 0em) skewX(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-shimmy .wf-u { animation: none; }
}
  • Lean and snap. The letter leans slowly back to sixteen degrees, snaps forward past upright, and settles with one small wobble. The slow lean takes a little over half the loop and the snap a tenth of it.
    CSS of Lean and snap
    .wf-lean-and-snap .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-lean-and-snap 1600ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes wf-lean-and-snap {
  0%, 85%, 100% { transform: skewX(0deg); }
  55% { transform: skewX(16deg); }
  65% { transform: skewX(-9deg); }
  75% { transform: skewX(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-lean-and-snap .wf-u { animation: none; }
}

Line dances: a step pattern

  • Kick line. Hanging from its top edge, each letter swings its foot out to the left, comes back, and swings out to the right, lifting slightly on each kick. With the delay between letters the kicks travel down the row.
    CSS of Kick line
    .wf-kick-line .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 0%;
  animation: wf-kick-line 1800ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes wf-kick-line {
  0%, 40%, 80%, 100% { transform: translate(0em, 0em) rotate(0deg); }
  20% { transform: translate(0em, -0.06em) rotate(18deg); }
  60% { transform: translate(0em, -0.06em) rotate(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-kick-line .wf-u { animation: none; }
}
  • Side step. A small hop to the left, a pause, back to the middle, a hop to the right, a pause, and home. Each step is a fifth of the type size, so neighbors come close but do not cross.
    CSS of Side step
    .wf-side-step .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-side-step 2000ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes wf-side-step {
  0%, 38%, 50%, 88%, 100% { transform: translate(0em, 0em); }
  12% { transform: translate(-0.2em, -0.08em); }
  24% { transform: translate(-0.2em, 0em); }
  62% { transform: translate(0.2em, -0.08em); }
  74% { transform: translate(0.2em, 0em); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-side-step .wf-u { animation: none; }
}
  • Conga. Three small bobs and then a kick: one, two, three, kick, the count of a conga line. The letters are only a twenty-fifth of a second apart, so the whole word bobs nearly together and the kick ripples through it.
    CSS of Conga
    .wf-conga .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-conga 2400ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes wf-conga {
  0%, 20%, 40%, 60%, 88%, 100% { transform: translate(0em, 0em) rotate(0deg); }
  10%, 30%, 50% { transform: translate(0em, -0.1em) rotate(0deg); }
  74% { transform: translate(0em, -0.16em) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-conga .wf-u { animation: none; }
}
  • Slow waltz. A three-second loop in three beats: the letter sinks and tips left, rises to upright, and drifts right as it tips the other way. Each letter starts a sixth of a second after the last, so the turn passes slowly down the line.
    CSS of Slow waltz
    .wf-slow-waltz .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-slow-waltz 3000ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 160ms);
}
@keyframes wf-slow-waltz {
  0%, 100% { transform: translate(-0.04em, 0.06em) rotate(-4deg); }
  33% { transform: translate(0em, -0.1em) rotate(0deg); }
  66% { transform: translate(0.04em, -0.04em) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-slow-waltz .wf-u { animation: none; }
}

Own work. Every move was written for this page as plain numbers: how long one loop lasts, the delay between one letter and the next, the easing, where the letter pivots (its foot, its top or its middle), and a short list of stops giving position in em, rotation and slant in degrees, and width and height as a scale. The CSS stored with each move is made from those numbers. There are 10 moves in three groups: 2 hops and jumps, 4 sways, leans and twists, and 4 line dances. Every one moves letter by letter and loops. None is among the presets of the animated text page or the flashing text page, and the names and timings are this site's own. No stop changes opacity, color or glow, so nothing dims or flashes: the count of dims a second is 0 for all ten, against the limit of three in WCAG success criterion 2.3.1 (https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html). Every move's CSS ends with a prefers-reduced-motion rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). The font suggested for each move is one of the eight bundled with this page; Chewy and Luckiest Guy are under the Apache License 2.0 and the other six under the SIL Open Font License 1.1, as recorded in the tool's own font list.

Fonts on this page

Show the list

Every font in this tool is free to use, also for things you sell. The files are served from this site under their open licence.

  • Chewy by Sideshow. Copyright (c) 2010 by Font Diner, Inc DBA Sideshow. All rights reserved. Apache License 2.0 (reduced to the Latin characters, saved as WOFF2)
  • Bangers by Vernon Adams. Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
  • Luckiest Guy by Astigmatic. Copyright (c) 2010 by Brian J. Bonislawsky DBA Astigmatic (AOETI). All rights reserved. Available under the Apache 2.0 licence. http://www.apache.org/licenses/LICENSE-2.0.html. Apache License 2.0 (reduced to the Latin characters, saved as WOFF2)
  • Fredoka by Milena Brandão, Hafontia. Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One). SIL Open Font License 1.1 (variable axes pinned (wght 600), reduced to the Latin characters, saved as WOFF2)
  • Bagel Fat One by Kyungwon Kim, JAMO. Copyright 2022 The Bagel Fat Project Authors (https://github.com/JAMO-TYPEFACE/BagelFat). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
  • Titan One by Rodrigo Fuenzalida. Copyright (c) 2011, Rodrigo Fuenzalida (www.rfuenzalida.com|hello@rfuenzalida.com),. SIL Open Font License 1.1
  • Boogaloo by John Vargas Beltrán. Copyright (c) 2011, John Vargas Beltr�n� (www.johnvargasbeltran.com|john.vargasbeltran@gmail.com),. SIL Open Font License 1.1
  • Shrikhand by Jonny Pinhorn. Copyright (c) 2015 Jonny Pinhorn (jonpinhorn.typedesign@gmail.com). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)

How it works

These dancing letters are the word you type, set moving: each letter hops, sways or kicks a moment after its neighbor. Save a short looping video or the CSS. The page makes no GIF and holds no ready-made letter pictures.

Read the full guide

Ten dance moves

Motion lists them in three groups. Hops and jumps leave the line: Hop in turn, Jump and squash. Sways, leans and twists stay on it: Sway, Twist, Shimmy, Lean and snap. Line dances repeat a step pattern: Kick line, Side step, Conga, Slow waltz. The sample stands still until Play is pressed.

Take the dance with you

Download video records the loop. Copy CSS and Copy HTML give the same dance for a web page: every letter carries its own delay, so one move runs down the word. The eight faces are round and heavy, since a thin letter hides a squash.

  • No move changes brightness or color, so nothing on this page flashes.
  • Gap between letters, under More options, sets how far each letter trails the last; at 0 all move together.
  • A space does not dance. The letters after it keep their turn.

Questions and answers

Can I download the dancing letters as a GIF?

Not a GIF. The dance is saved as a short video, WebM or MP4 depending on the browser, or copied as CSS and HTML that play it on a web page.

Does it have a dancing alphabet, A to Z, as pictures?

No. Some sites hand out one ready-made picture for each letter. This page has none of those: it animates the word you type, in a font, and saves that.

How do I make letters dance on a web page?

Press Copy CSS and Copy HTML. The HTML wraps each letter in a span with a number, and the CSS delays each span by that number. It switches the dance off for visitors whose device asks for less motion.

Which fonts do the dancing letters use?

Eight round, heavy faces: Chewy, Bangers, Luckiest Guy, Fredoka, Bagel Fat One, Titan One, Boogaloo and Shrikhand. More options holds the faces, the colors and the background.

More tools

Show 7 more

Browse Text styles