Loading
Advanced visual effects — CSS particles, shape morphing, parallax, 3D tilt, glitch, holographic and 3D transforms. All without canvas.
Floating particle field using multiple divs with CSS animation. Zero canvas required.
.particle {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: rgba(242,126,75, .7);
animation: particleFloat var(--dur) linear infinite;
left: var(--x); animation-delay: var(--delay);
}
@keyframes particleFloat {
from { transform: translateY(100%) translateX(0); opacity: 0; }
to { transform: translateY(-100%) translateX(var(--drift)); opacity: 0; }
}Organic shape morphing using border-radius with 8 animated values. 100% CSS.
Forma que muda continuamente usando border-radius com sintaxe de 8 valores.
@keyframes morph {
0%,100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
25% { border-radius: 30% 70% 40% 60% / 70% 30% 60% 40%; }
50% { border-radius: 50% 50% 60% 40% / 30% 60% 70% 40%; }
}Card that responds to mouse movement with 3D perspective and radial spotlight. Minimal JS.
Mova o mouse sobre o card para ver o efeito 3D. A perspectiva e o spotlight seguem o cursor.
Click wave that expands from the touch point. CSS animation + minimal JS for positioning.
Efeito Material Design adaptado para a brand Ambrosio Health. Onda branca translúcida expande a partir do ponto de clique.
Glitch effect with multiple text layers via ::before and ::after with animated clip-path and transform.
Iridescent holographic effect with hue-rotate animation at 400% background-size.
Iridescent hue-rotate animation · 4s infinite · background-size 400%
3D card flip and rotating cube — all in pure CSS with transform-style: preserve-3d.