HoverFX

A modern, lightweight CSS library for futuristic hover effects.

Features

• 100+ hover effects across 10 categories
• Zero JavaScript — pure CSS3 transitions and animations
• Lightweight — ~39KB minified, zero dependencies
• Customizable — full CSS custom property theming
• Accessible — respects prefers-reduced-motion
• Mobile-safe — auto-disables on touch devices
• Modular source — import only what you need

Installation

npm

npm install hoverfx

CDN

<link rel="stylesheet" href="https://unpkg.com/hoverfx/dist/hoverfx.min.css">

Download

Download dist/hoverfx.min.css and include it in your project.

Quick Start

<link rel="stylesheet" href="hoverfx.min.css">

<button class="hfx-grow">Grow on Hover</button>
<button class="hfx-glow">Glow on Hover</button>
<a class="hfx-underline-from-center" href="#">Underline Link</a>

Effect Categories

| Category | Class Prefix | Count | Examples | |----------|-------------|-------|----------| | 2D Transforms | hfx-grow, hfx-shrink… | 30 | grow, shrink, pulse, push, pop, bounce, float, sink, bob, hang, skew, wobble, buzz | | 3D Context | hfx-flip, hfx-tilt… | 3 | flip, tilt, pop-3d | | Backgrounds | hfx-fade, hfx-sweep-*… | 18 | fade, back-pulse, sweep, bounce-to, radial, rectangle, shutter | | Borders | hfx-outline-*, hfx-underline-*… | 12 | outline-in/out, round-corners, underline, overline, reveal | | Shadows & Glows | hfx-shadow, hfx-glow… | 6 | shadow, grow-shadow, float-shadow, glow, box-shadow | | Shapes | hfx-bubble-*, hfx-curl-*… | 8 | bubble (4 directions), curl (4 corners) | | Neon | hfx-neon-pulse… | 3 | neon-pulse, glitch, cyber-reveal | | Liquid | hfx-melt, hfx-blob… | 3 | melt, blob, ripple | | Textures | hfx-emboss, hfx-glass… | 3 | emboss, glass, metallic | | Micro-Interactions | hfx-vibrate, hfx-breath… | 5 | vibrate, breath, wiggle, nudge, flicker |

Customization

Override CSS custom properties to theme all effects at once:

:root {
  --fx-speed: 0.4s;          /* transition duration */
  --fx-color: #ff6347;       /* primary effect color */
  --fx-glow: rgba(255, 99, 71, 0.7); /* glow color */
  --fx-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

Utility Modifiers

Combine with utility classes to fine-tune behavior:

<button class="hfx-grow hfx-fast">Fast Grow</button>
<button class="hfx-bounce hfx-slow">Slow Bounce</button>
<button class="hfx-pulse hfx-ease-elastic">Elastic Pulse</button>

| Modifier | Effect | |----------|--------| | .hfx-instant | 0.1s transitions | | .hfx-fast | 0.15s transitions | | .hfx-slow | 0.6s transitions | | .hfx-glacial | 1s transitions | | .hfx-ease-bounce | Bouncy easing curve | | .hfx-ease-elastic | Elastic easing curve |

Browser Support

| Browser | Version | |---------|---------| | Chrome | Last 2 | | Firefox | Last 2 | | Safari | Last 2 | | Edge | Last 2 |

Development

npm install          # Install dependencies
npm run build        # Build dev + production
npm run build:dev    # Dev build only (unminified)
npm run build:prod   # Production build only (minified)
npm run watch        # Watch mode
npm run lint         # Run stylelint
npm run lint:fix     # Auto-fix lint issues

Project Structure

src/
├── core/
│   ├── _variables.css    # Design tokens
│   └── _base.css         # Base styles + accessibility
├── effects/
│   ├── depth/            # 2D/3D transforms, shadows
│   ├── background/       # Background transitions
│   ├── border/           # Border & outline effects
│   ├── shape/            # Bubbles & curls
│   ├── neon/             # Neon & cyberpunk
│   ├── liquid/           # Liquid & morphing
│   ├── masking/          # Texture & material
│   └── icons/            # Micro-interactions
├── utilities/
│   └── _modifiers.css    # Speed/intensity/easing utils
└── hoverfx.css           # Main entry point

License

MIT