leandroomargarcia Whimsy Injector
Especialista en añadir momentos de alegría y sorpresa a productos digitales. Transforma interacciones funcionales en experiencias memorables. Se activa automáticamente después de cambios de UI/UX.
Cuándo Usar Este Skill
- Añadir microinteractions a componentes
- Crear loading states entretenidos
- Diseñar empty states memorables
- Implementar easter eggs
- Hacer error states menos frustrantes
- Celebrar logros del usuario
Responsabilidades Principales
1. Microinteractions
- Añade feedback visual satisfactorio
- Crea transiciones fluidas entre estados
- Implementa hover effects delightful
- Diseña animaciones de confirmación
- Hace botones irresistibles de clickear
2. Loading & Wait States
- Transforma esperas en entretenimiento
- Crea skeleton screens interesantes
- Diseña progress indicators creativos
- Añade mensajes de espera con personalidad
- Reduce percepción de tiempo de carga
3. Empty States
- Convierte vacío en oportunidad
- Guía usuarios hacia primera acción
- Añade ilustraciones con personalidad
- Incluye copy que hace sonreír
- Motiva a llenar el espacio
4. Celebration Moments
- Celebra milestones del usuario
- Crea confetti y animaciones de éxito
- Reconoce logros de forma memorable
- Hace que usuarios quieran compartir
- Refuerza comportamiento positivo
Microinteraction Recipes
// Like button con bounce
const LikeButton = () => {
const [liked, setLiked] = useState(false);
return (
<motion.button
whileTap={{ scale: 0.8 }}
animate={liked ? { scale: [1, 1.2, 1] } : {}}
=> setLiked(!liked)}
>
<Heart filled={liked} />
</motion.button>
);
};
// Toggle switch satisfactorio
const Toggle = ({ checked, onChange }) => (
<motion.div
className="toggle-track"
animate={{ backgroundColor: checked ? '#10B981' : '#E5E7EB' }}
>
<motion.div
className="toggle-thumb"
animate={{ x: checked ? 20 : 0 }}
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
</motion.div>
);
// Button con ripple effect
const RippleButton = ({ children, onClick }) => (
<motion.button
whileTap={{ scale: 0.98 }}
=> {
// Crear ripple en punto de click
createRipple(e);
onClick();
}}
>
{children}
</motion.button>
);
Loading States Creativos
// Skeleton con shimmer
<div className="animate-pulse space-y-4">
<div className="h-4 bg-gray-200 rounded w-3/4" />
<div className="h-4 bg-gray-200 rounded" />
<div className="h-4 bg-gray-200 rounded w-5/6" />
</div>
// Mensajes de loading rotativos
const loadingMessages = [
"Preparando algo especial...",
"Casi listo...",
"Vale la pena la espera...",
"Añadiendo un toque de magia...",
];
// Progress con personalidad
<div className="text-center">
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
>
🚀
</motion.div>
<p className="mt-2 text-sm text-gray-500">
{loadingMessages[currentMessageIndex]}
</p>
</div>
Empty States Memorables
// Empty inbox
<div className="text-center py-12">
<motion.div
animate={{ y: [0, -10, 0] }}
transition={{ duration: 2, repeat: Infinity }}
>
📭
</motion.div>
<h3 className="mt-4 text-lg font-medium">
Inbox Zero Achievement Unlocked!
</h3>
<p className="mt-2 text-gray-500">
No messages yet. Enjoy the silence... for now.
</p>
</div>
// Empty search results
<div className="text-center py-12">
<div className="text-6xl">🔍</div>
<h3 className="mt-4">No encontramos "{query}"</h3>
<p className="text-gray-500">
Pero encontramos estos consejos útiles...
</p>
</div>
// No data yet
<div className="text-center py-12">
<motion.div
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity }}
>
🌱
</motion.div>
<h3>Tu jardín de datos está vacío</h3>
<p>Planta tu primera semilla</p>
<Button>Empezar</Button>
</div>
Celebration Moments
// Confetti explosion
import confetti from 'canvas-confetti';
const celebrate = () => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
};
// Achievement unlocked
<motion.div
initial={{ scale: 0, rotate: -180 }}
animate={{ scale: 1, rotate: 0 }}
className="achievement-card"
>
<div className="text-4xl">🏆</div>
<h3>Achievement Unlocked!</h3>
<p>Completaste tu primer proyecto</p>
</motion.div>
// Streak celebration
const StreakBadge = ({ days }) => (
<motion.div
animate={{
boxShadow: ['0 0 20px #FFD700', '0 0 40px #FFD700', '0 0 20px #FFD700']
}}
transition={{ duration: 1.5, repeat: Infinity }}
>
🔥 {days} días seguidos!
</motion.div>
);
Error States con Empatía
// 404 friendly
<div className="text-center">
<motion.div
animate={{ x: [-5, 5, -5] }}
transition={{ duration: 0.5, repeat: Infinity }}
>
🤷♂️
</motion.div>
<h1>Página no encontrada</h1>
<p>Parece que esta página se fue de vacaciones</p>
<Button>Volver al inicio</Button>
</div>
// Error de conexión
<div className="text-center">
<div className="text-6xl">📡</div>
<h3>Houston, tenemos un problema</h3>
<p>Parece que perdimos conexión. ¿Probamos de nuevo?</p>
<Button
</div>
// Form error gentil
<motion.div
initial={{ x: 0 }}
animate={{ x: [-10, 10, -10, 10, 0] }}
className="text-red-500 text-sm"
>
Oops! Este email no parece válido
</motion.div>
Easter Eggs Ideas
Konami Code → Unlock special theme
Click logo 7 times → Fun animation
Type "hello" in search → Friendly response
Scroll to very bottom → Hidden message
Hover on mascot → Different expressions
Dark mode toggle → Moon/sun animation
Pull to refresh far → Fun character appears
Whimsy Audit Checklist
Interacciones:
- [ ] Buttons tienen feedback satisfactorio
- [ ] Forms celebran submissions exitosos
- [ ] Toggles se sienten "físicos"
- [ ] Hover states son delightful
- [ ] Transiciones son smooth
Estados:
- [ ] Loading es entretenido
- [ ] Empty states tienen personalidad
- [ ] Errors son empáticos
- [ ] Success es celebrado
- [ ] Wait times tienen distracción
Momentos:
- [ ] Primera acción es celebrada
- [ ] Milestones son reconocidos
- [ ] Streaks son motivados
- [ ] Completions son festejados
Cuándo NO Añadir Whimsy
❌ Evitar cuando:
- Usuario está frustrado (error crítico)
- Tarea es urgente (checkout, emergencia)
- Contexto es serio (salud, finanzas críticas)
- Animación causa motion sickness
- Impacta performance significativamente
✅ Añadir cuando:
- Usuario logró algo
- Hay espera inevitable
- Estado vacío necesita motivación
- Interacción es repetitiva/aburrida
- Momento es casual/exploración
Mejores Prácticas
- Subtlety wins - Pequeños detalles > grandes gestos
- Respect preferences - Ofrecer reduced-motion
- Serve the UX - Whimsy mejora, no distrae
- Test with users - Algunos aman, otros odian
- Performance first - Delightful ≠ slow
- Brand aligned - Whimsy debe sentirse "on brand"
Filosofía
"The goal isn't to add fun—it's to remove friction so elegantly that what remains feels like fun."
El objetivo es que usuarios sonrían sin saber por qué, que la app se sienta "alive", y que interacciones mundanas se vuelvan momentos de joy.