# FX CSS

*PROFESSIONAL CSS EFFECTS.*


* **Package:** FX CSS\
* **Version:** v2.0.0\
* **Copyright:** 2026 [`JosebaMirena.com`](https://www.josebamirena.com)\
* **License:** [`MIT license`](https://www.josebamirena.com/media/assets/fx/2.0.0/LICENSE)\
* **Author:** florin


## 📦 Versions

| Version | Size | Effects  | Description |
|---------|------|----------|-------------|
| **Mini** | ~13.7 kB | 80+ | Essential entrance animations & utilities |
| **Full** | ~33.8 kB | 106 | Complete library with text, cards, backgrounds, cursors, scroll reveals, masonry |


## 🌅 BACKGROUND EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .flex-bg	             | Flexible background with image overlay |
| .fx-bg-fade	         | Gradient fade overlay for backgrounds |
| .fx-parallax	         | Fixed parallax background |
| .fx-multi-overlay	     | Multi-layer gradient overlay |
| .fx-noise-bg	         | Textured noise background effect |


## 🖼️ IMAGE EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-gray	             | Grayscale filter with color reveal on hover |
| .fx-polaroid	         | Polaroid-style image frame |
| .fx-image-zoom	     | Smooth image zoom on hover |
| .fx-image-reveal	     | Shine/reveal effect over images |


## 📝 TEXT & TYPOGRAPHY EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-under	             | Animated underline effect |
| .fx-typewriter	     | Typewriter typing effect |
| .fx-text-perspective	 | 3D perspective transform on hover |
| .fx-text-holo	         | Holographic shifting effect |
| .fx-text-neon	         | Realistic neon glow |
| .fx-text-outline	     | Outline text with fill on hover |
| .fx-text-blur-reveal	 | Blur to clear reveal |
| .fx-text-cascade	     | Staggered letter cascade |
| .fx-text-wave	         | Wave motion per character |
| .fx-text-cube	         | 3D cube rotation with faces |
| .fx-text-pinwheel	     | Pinwheel spinning animation |
| .fx-text-wipe	         | Wipe reveal with overlay |
| .fx-text-curtain	     | Curtain opening reveal |
| .fx-text-cinema-zoom	 | Cinematic zoom entrance |
| .fx-text-matrix	     | Matrix code-style reveal |
| .fx-text-mask	         | Animated gradient mask |
| .fx-text-reveal-mask	 | Sliding light mask |
| .fx-text-shadow-dance	 | Animated dancing shadows |
| .fx-text-multi-shadow	 | Multi-color shadow animation |
| .fx-text-distort	     | Skew/distort on hover |
| .fx-text-glitch	     | Glitch effect on hover |


## 🌀 SLIDE & MOVEMENT EFFECTS

| Class	                   | Description |
|:-------------------------|:----------|
| .fx-scale	               | Smooth scale animation on hover |
| .fx-rotate	           | 360° rotation on hover |
| .fx-bounce	           | Bouncing animation |
| .fx-heartbeat	           | Heartbeat pulse effect |
| .fx-hoverbeat	           | Heartbeat on hover |
| .fx-slide-in	           | Slide entrance animation |
| .fx-text-slide-left	   | Slide in from left |
| .fx-text-slide-right	   | Slide in from right |
| .fx-text-slide-up	       | Slide in from top |
| .fx-text-slide-down	   | Slide in from bottom |
| .fx-text-slide-bounce	   | Slide with bounce |
| .fx-text-flip-horizontal | Horizontal 3D flip |
| .fx-text-flip-vertical   | Vertical 3D flip |
| .fx-text-spiral	       | Spiral spin entrance |
| .fx-text-scatter	       | Scatter particle entrance |
| .fx-text-particle-spin   | Particle spin combination |


## 🔘 BUTTON & INTERACTIVE EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-btn-slide	         | Sliding fill background on hover |
| .fx-btn-ripple	     | Ripple wave effect on click |
| .fx-scale	             | Smooth scale animation on hover |
| .fx-rotate	         | 360° rotation on hover |
| .fx-bounce	         | Bouncing animation |
| .fx-depth	             | 3D depth transform |
| .fx-shine	             | Shine sweep effect |
| .fx-multi-shadow	     | Multi-layer shadow effect |


## 📜 SCROLL & REVEAL EFFECTS

| Class	                   | Description |
|:-------------------------|:----------|
|[data-reveal]	           | Scroll reveal animations (left/right/up/down/zoom/fade) |
| .fx-scroll-progress	   | Custom scroll progress bar |
|[data-fx-blur]	           | Blur reveal on scroll |
|[data-fx-scroll-reveal]   | Directional reveal on scroll |
|[data-fx-cascade-reveal]  | Staggered cascade reveal |


## 🖱️ CURSOR EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-custom-cursor	     | Enables custom cursor |
| .fx-cursor-dot	     | Small dot cursor |
| .fx-cursor-outline	 | Outlined ring cursor |


## 🧩 BORDER & DIVIDER EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-typewriter-border	 | Typewriter-style animated border |
| .fx-divider-icon	     | Icon divider with rotation animation |
| .fx-gradient-border	 | Animated gradient border on hover |


## 🃏 CARD & CONTAINER EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-neu-card	         | Neumorphism card with soft shadows |
| .fx-glass	             | Glassmorphism blur effect |
| .fx-multi-shadow	     | Multi-layer shadow effect |
| .fx-depth	             | 3D depth transform |


## 📊 GRID & LAYOUT EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-masonry-grid	     | Masonry grid layout |
| .fx-masonry-item	     | Masonry grid item |


## 🌓 THEME EFFECTS

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-theme-transition	 | Smooth theme transition |
| .fx-light-only	     | Visible only in light mode |
| .fx-dark-only	         | Visible only in dark mode |


## ⚙️ UTILITY CLASSES

### ⏱️ Delay Utilities

| Class	                 | Value |
|:-----------------------|:----------|
| .fx-delay-100	         | 0.1s delay |
| .fx-delay-200	         | 0.2s delay |
| .fx-delay-300	         | 0.3s delay |
| .fx-delay-400	         | 0.4s delay |
| .fx-delay-500	         | 0.5s delay |
| .fx-delay-600	         | 0.6s delay |
| .fx-delay-700	         | 0.7s delay |
| .fx-delay-800	         | 0.8s delay |
| .fx-delay-900	         | 0.9s delay |
| .fx-delay-1000	     | 1s delay |


### ⏳ Duration Utilities

| Class	                 | Value |
|:-----------------------|:----------|
| .fx-duration-fast	     | 0.3s |
| .fx-duration-normal	 | 0.6s |
| .fx-duration-slow	     | 1s |
| .fx-duration-very-slow | 2s |


### 🔁 Iteration Utilities

| Class	                 | Value |
|:-----------------------|:----------|
| .fx-infinite	         | Infinite loop |
| .fx-once	             | 1 iteration |
| .fx-twice	             | 2 iterations |
| .fx-thrice	         | 3 iterations |


### ↔️ Direction Utilities

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-alternate	         | Alternate animation direction |
| .fx-reverse	         | Reverse animation direction |
| .fx-alternate-reverse	 | Alternate reverse direction |


### 🎯 Fill Mode Utilities

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-forwards	         | Retain end state |
| .fx-backwards	         | Apply start state before animation |
| .fx-both	             | Both forwards and backwards |


### 📈 Timing Function Utilities

| Class	                 | Description |
|:-----------------------|:----------|
| .fx-ease	             | Ease timing |
| .fx-ease-in	         | Ease-in timing |
| .fx-ease-out	         | Ease-out timing |
| .fx-ease-in-out	     | Ease-in-out timing |
| .fx-linear	         | Linear timing |
| .fx-bounce	         | Bounce cubic-bezier |
| .fx-elastic	         | Elastic cubic-bezier |



## 📊 SUMMARY

| Category                | FX Number |
|:------------------------|:---------:|
| 🖼️ Image Effects	       | 4 |
| 📝 Text & Typography	  | 23 |
| 🌅 Background Effects	  | 5 |
| 🌀 Slide & Movement	  | 16 |
| 🔘 Button & Interactive | 8 |
| 📜 Scroll & Reveal	  | 5 |
| 🖱️ Cursor Effects	   | 3 |
| 🧩 Border & Divider     | 3 |
| 🃏 Card & Container	  | 4 |
| 📊 Grid & Layout	      | 2 |
| 🌓 Theme Effects	      | 3 |
| ⚙️ Utilities	          | 30 |

### 🎯 TOTAL: 106 EFFECTS


## 📦 Installation


## FX Full Version (33.8 kB - 106 effects)

```html
  <!-- Style css -->
  <link rel="stylesheet" href="/media/assets/fx/2.0.0/dist/css/fx.min.css" integrity="sha384-Q3ByUIqgFgXgnViWSbdp6weaqAy/LrIazeqfIVzMIM/Sy5/+R+0+GisSDOlyX1Kf" crossorigin="anonymous">

```

## FX Mini Version (13.7 kB - 80+ effects)

```html
  <!-- Style css -->
  <link rel="stylesheet" href="/media/assets/fx/2.0.0/dist/css/fx-mini.min.css" integrity="sha384-eEV0R7HqaIJEgXJHMtQe35S+S0fm9P7RJw1VRsEaQHV00EmsvTunwOt4crNwndoV" crossorigin="anonymous">

```


## FX examples

```html
<div class="flex-bg fx-parallax">
    <h1 class="fx-text-glitch fx-text-neon" data-text="TÍTULO">
        TITLE
    </h1>

    <div class="fx-text-cascade">
        <span style="--char-index:1">cascade</span>
        <span style="--char-index:2">effect</span>
        <span style="--char-index:3">text</span>
    </div>
    
    <button class="btn fx-btn-slide fx-btn-ripple">
        FX button
    </button>
    
    <img src="imagen.jpg" class="fx-image-zoom fx-gray" alt="">
</div>
```

```html
<!-- Scroll FX -->
<div data-fx-scroll-reveal="fade-up" class="fx-glass">
    scroll crystal fx reveal
</div>
```


## 🚀 Optional JavaScript (Scroll Reveals)

For scroll-triggered animations, add the optional JavaScript module:

### Installation

```html
  <script src="/media/assets/fx/2.0.0/dist/js/fx.min.js" integrity="sha384-O9RJI9uiKsj15CdflxRQOB1VfRR3tsSInjCo4BSvYTp/IYSMcK50e1bPcDZsPkUJ" crossorigin="anonymous"></script>
  <script>
    fx.init();
  </script>
```

### Example with Custom Options

```html
  <div data-reveal="zoom" data-delay="200" data-duration="1200" class="fx-glass">
    Zoom in after 200ms delay, lasting 1.2 seconds
  </div>
```

```html
  <div data-reveal="left" data-repeat class="fx-neu-card">
    Slides in from left every time it enters viewport
  </div>
```

```html
  <div data-fx-cascade-reveal="up" class="fx-text-cascade">
    <span>Child 1</span>
    <span>Child 2</span>
    <span>Child 3</span>
  </div>
```

If you only need CSS effects without scroll triggers, the CSS alone works perfectly. The JavaScript is optional and only adds scroll detection for reveals.


## 🌐 Browser Support

| Browser | Version |
|---------|---------|
| Chrome | Latest ✅ |
| Firefox | Latest ✅ |
| Safari | Latest ✅ |
| Edge | Latest ✅ |
| Opera | Latest ✅ |
| iOS Safari | Latest ✅ |
| Android Chrome | Latest ✅ |
| Samsung Internet | Latest ✅ |


### Accessibility Features

- ✅ `prefers-reduced-motion` media query — respects user motion preferences
- ✅ ARIA-compatible — works with screen readers
- ✅ Keyboard navigation support — all hover effects have focus alternatives
- ✅ RTL language support — full right-to-left compatibility


### Notes

- All CSS effects use standard properties with vendor prefixes for maximum compatibility
- No JavaScript required for core animations
- Graceful degradation on older browsers — effects simply don't animate, content remains usable