Honk Shine

Retro & Themed · Animated · pure CSS

Ek Type's Honk color font runs its own show: a baked-in specular shine washes back and forth through ornate Indian-truck-art letterforms while the decoration slowly breathes from restrained to baroque via the font's own MORF and SHLN axes. Pick one of eight built-in truck-art palettes and dial the shimmer — every glyph carries its own multi-color paint, so nothing is filled in CSS.

Open in the generator →All effects
Honk Shine

How it works

Honk Shine is an animated retro & themed text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Honk Shine exposes 3 dedicated controls — Shine speed, Ornament and Palette — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Honk Shine — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Honk', system-ui (load from Google Fonts).
 */

@font-palette-values --text-effect-pa {
  font-family: "Honk";
  base-palette: 5;
}

.text-effect {
  font-family: 'Honk', system-ui;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  font-variation-settings: 'MORF' 40, 'SHLN' 55;
  text-shadow: 0 0 2px hsl(0 0% 100% / 0.22), 0 3px 8px hsl(0 0% 0% / 0.5);
  animation: text-effect-honk 8s linear -2.40s infinite;
  font-palette: --text-effect-pa;
  will-change: font-variation-settings;
}

@keyframes text-effect-honk {
  0% { font-variation-settings: 'MORF' 22, 'SHLN' 0; }
  10% { font-variation-settings: 'MORF' 25.6, 'SHLN' 100; }
  20% { font-variation-settings: 'MORF' 29.2, 'SHLN' 0; }
  30% { font-variation-settings: 'MORF' 32.8, 'SHLN' 100; }
  40% { font-variation-settings: 'MORF' 36.4, 'SHLN' 0; }
  50% { font-variation-settings: 'MORF' 40, 'SHLN' 100; }
  60% { font-variation-settings: 'MORF' 36.4, 'SHLN' 0; }
  70% { font-variation-settings: 'MORF' 32.8, 'SHLN' 100; }
  80% { font-variation-settings: 'MORF' 29.2, 'SHLN' 0; }
  90% { font-variation-settings: 'MORF' 25.6, 'SHLN' 100; }
  100% { font-variation-settings: 'MORF' 22, 'SHLN' 0; }
}

Pure CSS — just add the .text-effect class to any element.

Category
Retro & Themed
Type
Animated
Browser support
Color font (COLRv1) with animated MORF/SHLN axes and base-palette selection; renders in current Chrome, Firefox and Safari.
Capabilities
pure

Related Retro & Themed effects