Digital / Web UI
Holographic
Un material tipo foil iridiscente con bandas de color cambiantes, brillo perlado y sensación de película fina.
Hg
Usos
- Badges de lanzamiento
- Tarjetas de precio
- Paneles coleccionables
Parámetros
- hue range
- grain
- highlight
- angle
- saturation
Prompt IA
Crea una superficie holográfica tipo foil con cambios iridiscentes, brillo perlado y grano fino. Evita el exceso arcoíris.
Notas Tailwind
Usa conic-gradient o radial gradients por capas, con saturación controlada.
Rendimiento
Los gradientes estáticos funcionan bien. El shimmer debe ser pequeño y respetar reduced motion.
CSS
.holographic {
border-radius: 18px;
background:
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
conic-gradient(from 220deg, #b6fff1, #ffb8e8, #fff3a8, #a9c7ff, #b6fff1);
box-shadow: inset 0 1px rgba(255,255,255,.55), 0 20px 60px rgba(255, 120, 220, .16);
}Ejemplo React
export function HolographicBadge({ children }) {
return <span className="holographic">{children}</span>;
}