codepen-effects-library.md

# CodePen & CSS/JS Effects Library

> Biblioteca de efectos y snippets para usar al construir/mejorar webs de Alex.
> Buscar efectos adicionales con: `site:codepen.io [efecto]` en WebSearch.

## Como Buscar Mas Efectos
- WebSearch: `site:codepen.io [efecto deseado]`
- WebFetch en pens individuales: `https://codepen.io/[user]/pen/[id]` (funciona sin auth)
- Trending requiere cookies de sesion (403 sin auth)

---

## CODEPENS POR CATEGORIA (60+ URLs verificadas)

### Botones Hover
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| 5 Creative Button Hovers | codepen.io/EchoEcho/pen/EXEryJ | CSS | CTAs, hero |
| 12+ Button Effects | codepen.io/kjbrum/pen/wBBLXx | CSS+JS | Menus, forms |
| Neon Glow Button | codepen.io/WebsiteMentor/pen/mdKZazZ | CSS | Premium CTAs |
| SVG Button Animations | codepen.io/davidicus/pen/emgQKJ | CSS/SVG | Iconos |
| Neon/Gradient Buttons | codepen.io/woolandcotton/pen/mBmLwq | CSS | Dark UI |
| Pure CSS Button Hover | codepen.io/afa34/pen/VwzxmNN | CSS | Formularios |

### Cards Hover
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Card Hover Experiments | codepen.io/andrewsims/pen/mQoYwz | CSS | Portfolio |
| Multi-face Cards | codepen.io/Jhonierpc/pen/MWgBJpy | CSS+JS | Catalogos |
| Grid Card Animations | codepen.io/stack-findover/pen/XWpBMBe | SCSS | Blog, servicios |
| 3D Card (mouse track) | codepen.io/markmiro/pen/wbqMPa | CSS+JS | Producto showcase |
| Responsive Cards | codepen.io/free-source-code-bd/pen/VwpMNoJ | CSS | Mobile-friendly |
| Card Beam Animation | codepen.io/blacklead-studio/pen/xbwaqxE | CSS+JS | Hero sections |
| Stacking Cards Scroll | codepen.io/GreenSock/pen/BaMOapv | GSAP | Landing pages |

### Scroll Animations
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| ScrollReveal | codepen.io/hellogracecho/pen/qBBWprY | JS lib | Landing pages |
| Simple Scroll Reveal | codepen.io/bkane/pen/zYJjeay | JS | Paginas simples |
| ScrollTrigger Direction | codepen.io/GreenSock/pen/pojzxwZ | GSAP | Complex interactions |
| CSS Scroll-Driven Text | codepen.io/bramus/pen/JjwxLNM | CSS nativo | Sin librerias |
| Text Reveal Scroll | codepen.io/milind537/full/VYwKNZO | CSS | Headlines |
| Image Reveal (IntObs) | codepen.io/cameronknight/pen/WNwZORV | JS | Lazy loading |
| Multi-element Delay | codepen.io/sirhc94/pen/abqEBYW | SCSS | Timing coordinado |
| Full Landing Scroll | codepen.io/jh3y/pen/MWLPMYL | CSS+GSAP | Landing premium |

### Texto & Gradientes
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Animated Gradient Text | codepen.io/shshaw/pen/YpERQQ | CSS | Titulos |
| Gradient Hue Rotate | codepen.io/caseycallow/pen/yMNqPY | CSS | Hero sections |
| @property Gradient | codepen.io/argyleink/pen/vEBmZNw | CSS moderno | Cutting-edge |
| Clip Path Text | codepen.io/Khairul021/pen/bGpWreL | CSS | Creative typo |
| SVG Gradient Clip | codepen.io/dixoncheng/pen/EmrZRP | SVG+CSS | Logos, iconos |

### Skeleton/Loading
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Shimmer Skeleton | codepen.io/maoberlehner/pen/bQGZYB | CSS | Content loading |
| Tailwind Skeleton | codepen.io/muratbenli/pen/yLOYmgj | Tailwind | Tailwind projects |
| Multi-shape Skeleton | codepen.io/PBirlem/pen/wvQydMW | CSS | Versatil |
| Avatar Skeleton | codepen.io/gunbayz/pen/abomgGe | SCSS | Profile cards |
| Card Shimmer | codepen.io/andru255/pen/wvBdxbb | CSS | Card placeholders |

### Formularios
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Floating Label Input | codepen.io/cholis04/pen/eYLPBYp | CSS+JS | Login, contact |
| Label Animation Focus | codepen.io/katrina-isabelle/pen/PQBqyq | CSS+JS | Validacion visual |
| Floating Label+Select | codepen.io/nishantuie/pen/GqRXRG | JS | Forms complejos |
| CSS Only Label | codepen.io/schurrerpame-effects/pen/xxQBOKo | CSS | Progressive enh |
| Simple Floating Label | codepen.io/nstublen/pen/VrJaQL | CSS | Minimal, clean |

### Navegacion/Menu
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Hamburger Animations | codepen.io/designcouch/pen/ExvwPY | CSS | Mobile nav |
| Hamburger + Slide Menu | codepen.io/mranenko/pen/wevamj | CSS+JS | Full responsive |
| Custom Hamburgers | codepen.io/waldo/pen/JbezRG | CSS | Design variations |
| Burger + Slide-in | codepen.io/kitsune/pen/GZQWbw | CSS+JS | Complete solution |
| SVG Hamburger | codepen.io/shephero/pen/LYVrdjX | SVG+CSS | Premium, scalable |

### Glassmorphism
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Glass/Neuo Generator | codepen.io/Ahmod-Musa/pen/vENbpMg | CSS+JS | Design tool |
| Glass vs Neuo Cards | codepen.io/quentin-feret/pen/QWKqLPx | CSS+JS | Premium cards |
| Glass Social Icons | codepen.io/quentin-feret/pen/QWGMEBv | CSS+JS | Social links |
| Neo Glassmorphism Form | codepen.io/arozqq/pen/gOwNrRG | CSS | Login, modals |
| Pure Glassmorphism | codepen.io/walickialbert/pen/xxOvPmb | CSS | Overlays, hero |

### Dark Mode Toggles
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Light/Dark Toggle | codepen.io/Umer_Farooq/pen/eYJgKGN | CSS+JS | Theme switcher |
| CSS Only Toggle | codepen.io/demilad/pen/bZRjpb | CSS | No dependencies |
| OS-Aware Toggle | codepen.io/buckolaya/pen/vYdBKPq | CSS+JS | prefers-color-scheme |
| Slide Toggle | codepen.io/saranya-mohan/pen/bGEqRXe | CSS+JS | Smooth transition |
| Moon/Sun Toggle | codepen.io/RefractedColor/pen/mdWZRPQ | CSS+jQuery | Visual feedback |

### Particulas/Backgrounds
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Canvas Particles | codepen.io/JulianLaval/pen/KpLXOO | JS Canvas | Background FX |
| Interactive Particles | codepen.io/freedommayer/pen/oNGdJJQ | JS Canvas | Hero animated |
| Particle Sphere 3D | codepen.io/micjamking/pen/oZNQBM | JS Canvas | Premium BG |
| Particle Network | codepen.io/franky/pen/LGMWPK | JS Canvas | Tech websites |
| Multi-layer Particles | codepen.io/gartner90/pen/DQGvRb | JS Canvas | Complex BG |

### Carousels
| Pen | URL | Tipo | Uso |
|-----|-----|------|-----|
| Swipe/Drag Slider | codepen.io/kellyex/pen/JjoYpEx | JS | Mobile galleries |
| Swiper Responsive | codepen.io/syahrizaldev/pen/xxxmdzw | Swiper.js | Professional |
| 3D Carousel + Swipe | codepen.io/g-t-georgiev/pen/PorayPM | JS+CSS3D | Product showcase |
| Drag Carousel | codepen.io/bdang/pen/pJyYEO | JS | Natural swiping |
| CSS3 Swipe Gallery | codepen.io/mattjburrows/pen/jOEKLP | CSS+JS | Photo showcase |

---

## CODE SNIPPETS LISTOS PARA USAR

### 1. Intersection Observer Reveal (universal, sin librerias)
```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animated');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
```
```css
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.animated { animation: revealUp 0.8s ease-out forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
```

### 2. Card Lift Hover
```css
.card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px rgba(0,0,0,0.15);
}
```

### 3. Animated Gradient Background
```css
.gradient-bg {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #ffa502);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
```

### 4. Neon Glow Button
```css
.btn-neon {
  border: 2px solid #00ff00; background: transparent;
  color: #00ff00; transition: all 0.3s ease;
}
.btn-neon:hover {
  background: #00ff00; color: #000;
  box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00;
}
```

### 5. Button Slide Fill
```css
.btn-slide {
  border: 2px solid #3498db;
  background: linear-gradient(90deg, #3498db 50%, transparent 50%);
  background-size: 200% 100%; background-position: 100% 0;
  color: #3498db; transition: all 0.4s ease;
}
.btn-slide:hover { background-position: 0 0; color: white; }
```

### 6. Typing Animation
```css
.typing {
  border-right: 3px solid #000; white-space: nowrap; overflow: hidden;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #000; } }
```

### 7. Glitch Text
```css
.glitch { position: relative; color: #fff; text-shadow: 2px 0 #ff00de, -2px 0 #00ffff; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; }
.glitch::before { animation: glitch 0.3s infinite; color: #ff00de; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 58%); }
.glitch::after { animation: glitch 0.3s infinite reverse; color: #00ffff; z-index: -2; clip-path: polygon(0 58%, 100% 45%, 100% 100%, 0 100%); }
```

### 8. Aurora Background
```css
.aurora { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; }
.aurora-1 { width: 400px; height: 400px; background: radial-gradient(circle, #ff00ff, transparent); animation: float 20s ease-in-out infinite; }
```

### 9. Blob Animation
```css
.blob {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobWave 8s infinite ease-in-out;
}
@keyframes blobWave {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 40% 60% 30% 70% / 40% 50% 60% 50%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
```

### 10. Shimmer Skeleton
```css
.skeleton-line {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
```

### 11. Glassmorphism Panel
```css
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}
```

### 12. 3D Card Flip
```css
.flip-card { perspective: 1000px; }
.flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { backface-visibility: hidden; position: absolute; width: 100%; height: 100%; }
.flip-card-back { transform: rotateY(180deg); }
```

---

## RECOMENDACIONES POR TIPO DE WEB

| Web | Efectos recomendados |
|-----|---------------------|
| Landing page | Scroll reveal, gradient BG, hero animations, CTA neon |
| E-commerce | Card hover lift, skeleton loaders, carousels |
| SaaS/Dashboard | Dark mode, glassmorphism, floating labels, shimmer |
| Portfolio | 3D cards, scroll animations, text effects, particles |
| Blog | Scroll reveal, typing effect, image hover |
| Mobile-first | Hamburger menus, swipe carousels, CSS-only effects |

## PERFORMANCE RULES
1. Animar SOLO: transform, opacity (GPU-accelerated)
2. NUNCA animar: width, height, margin, padding
3. CSS animations > JS animations (siempre que se pueda)
4. Intersection Observer > scroll listeners
5. will-change: usar con moderacion
6. Respetar `prefers-reduced-motion: reduce`
7. Canvas particles: evitar en mobile (heavy)

## TENDENCIAS 2025-2026
- CSS scroll-driven animations (sin GSAP)
- CSS shape() function
- Liquid glass effects (evolucion de glassmorphism)
- @property para animar custom properties
- View Transition API
- Native <details>/<summary> animados