Free library · HTML, CSS, React & Tailwind

Effects you can take.

Coyote Lab is the motion and styling we build client websites with, broken out into pieces anyone can use. Pick an effect, tune it, copy one snippet. No framework required, no install, no build step.

11effects

83components

7colourways

0dependencies

Browse effects

Free for personal and commercial work

Live · hover and click

Full Moon

Up to six pages, booking built in, ready in about a week.

£850

Step onePick an effect

Each has its own section and its own page. Hover, click and type in the demos: they’re the real thing.

Step twoTune it

Choose a colourway or set your own colours, speed and intensity. The code updates to match, and Share link saves the setup.

Step threeCopy it

One self-contained snippet, or split into HTML, CSS and JS, or ready for React or Tailwind. Classes all start with CC.

Even quicker

Link the whole library

Add these two lines once and every CC class works on your page. Wrap your content in class="CCTheme CCEmber" (or any colourway).

Paste into your <head>

<link rel="stylesheet" href="https://coyoteconcept.com/lab/cc-lab.css">
<script src="https://coyoteconcept.com/lab/cc-lab.js" defer></script>

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.

Best for: Logos, headline buttons, anything with attitude
Class: .CCGlitch
Weight: 2.6 KB

Combines with Moonrise, Ember Sparks, Border Beam, Glare Sweep, Spotlight, Magnetic, Ember Glow, Shimmer Border, 3D Tilt, Ripple. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 2.6 KB, with a few lines of JS. 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. Explore Howl Glitch in depth →

Coyote originalNewCSS only · radial-gradient · transform

Moonrise

Our dusk palette, in motion: on hover a soft moon rises from the bottom edge and a horizon line draws itself across.

Best for: Cards, calls to action, night-time brands
Class: .CCMoonrise
Weight: 1.1 KB

Combines with Howl Glitch, Magnetic, Ember Glow, Shimmer Border, Ripple. Clashes with Ember Sparks (clipping), Border Beam (::after), Glare Sweep (::after), Spotlight (::after, ::before), 3D Tilt (::after): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 1.1 KB, CSS only. Accessibility Purely decorative: no change to the content or its contrast. Plays on keyboard focus inside the element. Under reduced motion the moon appears without travelling. Explore Moonrise in depth →

Coyote originalNewSmall JS · custom properties · keyframes

Ember Sparks

Every click throws a burst of embers from the exact point you touched. Our take on the click-spark idea, tuned to feel like a campfire.

Best for: Add-to-basket, likes, toggles, celebrations
Class: .CCSparks
Weight: 1.3 KB

Combines with Howl Glitch, Border Beam, Spotlight, Magnetic, Ember Glow, Shimmer Border, 3D Tilt. Clashes with Moonrise (clipping), Glare Sweep (clipping), Ripple (clipping): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 1.3 KB, with a few lines of JS. Accessibility Doesn't change what the click does: it's feedback on top. Works with touch as well as a mouse. Skipped entirely under reduced motion. Explore Ember Sparks in depth →

CSS only · @property · conic-gradient

Border Beam

A comet of light travels the border, forever. Draws the eye to one thing on the page without shouting.

Best for: Primary CTAs, the plan you want people to pick
Class: .CCBeam
Weight: 0.9 KB

Combines with Howl Glitch, Ember Sparks, Magnetic, Ember Glow, Shimmer Border, Ripple. Clashes with Moonrise (::after), Glare Sweep (::after), Spotlight (::after), 3D Tilt (::after): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.4+, Firefox 128+. In browsers without @property (Firefox before 128) the beam shows as a still highlight. Weight 0.9 KB, CSS only. Accessibility Decorative only: the element's own border and focus ring are untouched. Under reduced motion the beam becomes a still gradient border. Explore Border Beam in depth →

CSS only · hover · pseudo-element

Glare Sweep

A sheet of light passes over once on hover, like a reflection across glass. Feels expensive, costs nothing.

Best for: Cards, pricing boxes, secondary buttons
Class: .CCSweep
Weight: 0.7 KB

Combines with Howl Glitch, Magnetic, Ember Glow, Shimmer Border, Ripple. Clashes with Moonrise (::after), Ember Sparks (clipping), Border Beam (::after), Spotlight (::after), 3D Tilt (::after): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 0.7 KB, CSS only. Accessibility Decorative only. Also plays when a field inside the element gets keyboard focus. Removed under reduced motion. Explore Glare Sweep in depth →

CSS + small JS · custom properties · radial-gradient

Spotlight

A soft glow follows the cursor across the surface and lights the border nearest to it.

Best for: Feature cards, forms, dashboards
Class: .CCSpotlight
Weight: 1.2 KB

Combines with Howl Glitch, Ember Sparks, Magnetic, Ember Glow, Shimmer Border, Ripple. Clashes with Moonrise (::after, ::before), Border Beam (::after), Glare Sweep (::after), 3D Tilt (::after): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 1.2 KB, with a few lines of JS. Accessibility Decorative only. The border light also shows on keyboard focus inside the element. No motion of its own, so it's safe under reduced motion. Explore Spotlight in depth →

Small JS · spring easing · pointer events

Magnetic

The element leans towards the cursor and springs back when it leaves. Makes small targets feel alive.

Best for: Hero CTAs, icon buttons, toggles
Class: .CCMagnet
Weight: 0.9 KB

Combines with Howl Glitch, Moonrise, Ember Sparks, Border Beam, Glare Sweep, Spotlight, Ember Glow, Shimmer Border, Ripple. Clashes with 3D Tilt (transform): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 0.9 KB, with a few lines of JS. Accessibility The element's hit area moves with it, so it never runs away from the cursor. Disabled under reduced motion. Explore Magnetic in depth →

CSS only · box-shadow · keyframes

Ember Glow

A slow breathing halo in the accent colour. Quicker breaths on hover, like it noticed you.

Best for: Live status, new items, focus states
Class: .CCGlow
Weight: 0.6 KB

Combines with Howl Glitch, Moonrise, Ember Sparks, Border Beam, Glare Sweep, Spotlight, Magnetic, 3D Tilt, Ripple. Clashes with Shimmer Border (animation): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 0.6 KB, CSS only. Accessibility Doesn't replace the focus ring. Holds still under reduced motion. Explore Ember Glow in depth →

CSS only · background-clip · border-box

Shimmer Border

The outline itself is a slow-moving two-tone gradient. Quietly premium; works on light and dark.

Best for: Inputs, segmented controls, badges
Class: .CCShimmer
Weight: 0.5 KB

Combines with Howl Glitch, Moonrise, Ember Sparks, Border Beam, Glare Sweep, Spotlight, Magnetic, 3D Tilt, Ripple. Clashes with Ember Glow (animation): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 0.5 KB, CSS only. Accessibility Keeps the element's own fill, so text contrast is unchanged. Holds still under reduced motion. Explore Shimmer Border in depth →

Small JS · perspective · transform

3D Tilt

The surface tilts under the cursor with a moving highlight, like holding a card up to the light.

Best for: Product cards, portfolio tiles, pricing
Class: .CCTilt
Weight: 1.4 KB

Combines with Howl Glitch, Ember Sparks, Ember Glow, Shimmer Border, Ripple. Clashes with Moonrise (::after), Border Beam (::after), Glare Sweep (::after), Spotlight (::after), Magnetic (transform): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 1.4 KB, with a few lines of JS. Accessibility Content stays upright and readable; the tilt is at most a few degrees. Disabled under reduced motion. Explore 3D Tilt in depth →

Small JS · pointerdown · scale

Ripple

Every press sends a ring of accent colour out from the exact point you touched. Satisfying feedback.

Best for: Buttons, toggles, menu items, mobile
Class: .CCRipple
Weight: 1.0 KB

Combines with Howl Glitch, Moonrise, Border Beam, Glare Sweep, Spotlight, Magnetic, Ember Glow, Shimmer Border, 3D Tilt. Clashes with Ember Sparks (clipping): same layer, so only one would show. Works in Chrome & Edge 111+, Safari 16.2+, Firefox 113+. Weight 1.0 KB, with a few lines of JS. Accessibility Feedback only: the click behaves exactly as before. Works with touch, mouse and pen. Explore Ripple in depth →

Questions

What is Coyote Lab?

Coyote Lab is a free library of CSS effects and UI components from Coyote Concept, a web design studio in north London. Each effect comes on real buttons, dropdowns, cards, inputs, toggles and tabs, in seven colourways, with code you can copy.

Is Coyote Lab free to use?

Yes. Every effect is free for personal and commercial projects. Credit and a link back to coyoteconcept.com/lab are appreciated but never required.

Do I need React or Tailwind to use these effects?

No. Every snippet is plain HTML and CSS, with a few lines of JavaScript for the interactive effects. There are also ready-made React components and Tailwind versions if your project uses them.

How do I add an effect to my website?

Either copy one snippet and paste it into your page, or add the hosted stylesheet and script once (coyoteconcept.com/lab/cc-lab.css and cc-lab.js), wrap your content in class="CCTheme CCEmber" (add CCLight for the light version) and add classes such as class="CCButton CCBeam" to your elements.

Can I change the colours, speed and strength?

Yes. Every colour comes from four custom properties (--cc-accent, --cc-accent-2, --cc-bg and --cc-ink), and --cc-speed and --cc-intensity control timing and strength. The customiser on each effect writes these for you.

Are the effects accessible?

They keep the element's own focus states, play on keyboard focus as well as hover where it makes sense, and switch off or hold still when a visitor has asked their device to reduce motion.

What’s new

5 Oct 2026Customiser, React and Tailwind code, a page for every effect, six more component types
5 Oct 2026Coyote originals: Howl Glitch, Moonrise and Ember Sparks
5 Oct 2026The Lab opens with eight effects in seven colourways