Coyote Labby Coyote Concept

Coyote originalNewCSS + small JS · attr() · clip-path · steps()

Howl Glitch

Lifted from the hover on our own logo: the label splits into two colour-shifted slices that jitter around it, then snaps back.

Class
.CCGlitch
Weight
2.6 KB
Needs
CSS + a few lines of JS
Best for
Logos, headline buttons, anything with attitude

Tune it

Every snippet on this page follows these settings.

How Howl Glitch works

  1. A few lines of script wrap each label in a span and copy its text into a data-text attribute.
  2. Two pseudo-elements print that copy with content: attr(data-text), one in each accent colour.
  3. clip-path cuts them into a top and a bottom slice, so they read as a torn signal rather than a shadow.
  4. steps(2) keyframes make them jump between offsets instead of sliding: that hard stutter is what sells the glitch.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCGlitch">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Howl Glitch on button, card, tabs, dropdown.

More ways to use it

The same class on headline, badge, nav bar.

Pairs well with

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • The real text never moves out of place for screen readers; the copies are decorative pseudo-content.
  • Plays on keyboard focus as well as hover.
  • Turns off completely when the visitor asks for reduced motion.

Performance

  • 2.6 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Howl Glitch

How do I add Howl Glitch to a button?

Add the class CCGlitch next to CCButton, inside an element with the CCTheme class, then include the Howl Glitch CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Howl Glitch need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Howl Glitch?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Howl Glitch accessible?

The real text never moves out of place for screen readers; the copies are decorative pseudo-content. Plays on keyboard focus as well as hover. Turns off completely when the visitor asks for reduced motion.