A massive interactive showcase of modern design patterns, high-performance fluid transitions, and native Web APIs without heavy frameworks.
Explore 38 PatternsReactive cursor tracking on card backgrounds using native CSS variables to light up borders.
Smooth dropdown menus using HTML details tag and CSS Grid transitions with zero JS.
Native CSS transitions animate height smoothly towards intrinsic dynamic values.
Lightweight, native interactive modals. The browser manages dismissals via Esc key and outside clicks.
Classic Pixel Grid UI animation. Characters shuffle randomly until locking into the final message.
The card tilts reactively to the cursor following three-dimensional perspective matrix calculations.
Neon-aesthetic toggle switch using pure CSS physics-based easing and spring transitions.
Floating background orb visible through a frosted glass panel using native backdrop blur.
Elastic bounce simulation on click with keyframes replicating natural physical recoil.
Recortes invertidos de bordes laterales simulando entradas de cine clásicas usando máscaras radiales nativas de CSS.
The button shifts organically towards the cursor coordinates when it enters its activation boundary.
Viscous liquid gooey fusion effect between elements using a custom SVG blur and color matrix filter.
Color selection and transition in the OkLch space, guaranteeing perceptually uniform brightness and perfect gradients.
Dynamic circular SVG path drawing itself automatically based on the page read progress.
Dynamic noise overlay simulating raw analog film grain textures with an interactive intensity slider.
Individual letters animating sequentially with dynamically calculated transition delays in pure CSS.
Interactive canvas or technical diagram that can be dragged and panned freely inside its viewport.
A circular magnifying glass following the cursor and distorting/scaling the underlying grid pattern.
Characters flashing with neon fluorescent glow instantly upon contact and fading out smoothly.
Text typing and erasing itself automatically using pure CSS with zero JavaScript.
Multiple depth layers shifting at different speeds reactively to mouse movement.
Organic fluid shape continuously morphing using keyframe-animated CSS border-radius.
Expanding wave ripple starting from the exact click coordinate, Material Design style.
Conic-gradient border rotating 360 degrees using CSS Houdini @property.
Ghost placeholder skeleton with sliding shimmer highlight for loading states.
Digits counting up from zero to the target value with deceleration easing.
3D Y-axis rotation on hover revealing the back face.
Slider handle with elastic recoil utilizing overshoot cubic-bezier easing.
Fading dots trailing behind the cursor creating a light tail.
Text illuminating progressively as the cursor moves from left to right.
Animated pointer tooltip using only ::before and ::after pseudo-elements, zero JS.
Blurred content focusing sharply on hover. Perfect for spoiler flags.
Concentric orbit tracks with particles revolving at different speeds.
Pinterest-style layout using CSS columns with zero external libraries.
Interactive step indicator with transitions for multi-step wizards or forms.
Reactive grid where individual dots scale and glow under the cursor.
Button background morphing organic shapes on hover via animated border-radius.
Circular menu expanding option rings around a central trigger using CSS transforms.
Animated mesh gradient overlaid with SVG grain texture for high-fidelity depth.
kaktus.dev is fully open-source and free to use. If this interactive catalog of 38 micro-interactions helps you build beautiful web designs, consider supporting the work with a donation. Your support pays for hosting and keeps the library growing!
Supporting the project helps cover hosting costs and supports the development of new patterns. Every cup helps keep the cactus green!
Support on Ko-fiThis modal opens and closes using popovertarget. Press Esc or click outside to test default accessibility.