Aesthetics & Code
in Perfect Sync.
A massive interactive showcase of modern design patterns, high-performance fluid transitions, and native Web APIs without heavy frameworks.
Explore UI Lab & Copy Code Snippets → Explore 38 PatternsPattern Showcase
CSS Cursor Spotlight
Reactive cursor tracking on card backgrounds using native CSS variables to light up borders.
Native Accordion
Smooth dropdown menus using HTML details tag and CSS Grid transitions with zero JS.
Expand details
Native CSS transitions animate height smoothly towards intrinsic dynamic values.
Top-Layer Popover API
Lightweight, native interactive modals. The browser manages dismissals via Esc key and outside clicks.
Text Decode Effect
Classic Pixel Grid UI animation. Characters shuffle randomly until locking into the final message.
3D Rotation Matrix
The card tilts reactively to the cursor following three-dimensional perspective matrix calculations.
Bouncy Neon Switch
Neon-aesthetic toggle switch using pure CSS physics-based easing and spring transitions.
Glassmorphism & Depth
Floating background orb visible through a frosted glass panel using native backdrop blur.
Physical Easing
Elastic bounce simulation on click with keyframes replicating natural physical recoil.
CSS Masks & Cutouts
Recortes invertidos de bordes laterales simulando entradas de cine clásicas usando máscaras radiales nativas de CSS.
Magnetic Attraction
The button shifts organically towards the cursor coordinates when it enters its activation boundary.
SVG Gooey Filters
Viscous liquid gooey fusion effect between elements using a custom SVG blur and color matrix filter.
OkLch Color Space
Color selection and transition in the OkLch space, guaranteeing perceptually uniform brightness and perfect gradients.
Scroll Progress Ring
Dynamic circular SVG path drawing itself automatically based on the page read progress.
Analog Film Grain
Dynamic noise overlay simulating raw analog film grain textures with an interactive intensity slider.
Staggered Wave
Individual letters animating sequentially with dynamically calculated transition delays in pure CSS.
Infinite Canvas
Interactive canvas or technical diagram that can be dragged and panned freely inside its viewport.
Distortion Lens
A circular magnifying glass following the cursor and distorting/scaling the underlying grid pattern.
Reactive Neon
Characters flashing with neon fluorescent glow instantly upon contact and fading out smoothly.
Typewriter Effect
Text typing and erasing itself automatically using pure CSS with zero JavaScript.
Parallax Layers
Multiple depth layers shifting at different speeds reactively to mouse movement.
Morphing Blob
Organic fluid shape continuously morphing using keyframe-animated CSS border-radius.
Pulse Ripple
Expanding wave ripple starting from the exact click coordinate, Material Design style.
Conic Gradient Border
Conic-gradient border rotating 360 degrees using CSS Houdini @property.
Skeleton Shimmer
Ghost placeholder skeleton with sliding shimmer highlight for loading states.
Animated Counter
Digits counting up from zero to the target value with deceleration easing.
3D Flip Card
3D Y-axis rotation on hover revealing the back face.
Elastic Pull
Slider handle with elastic recoil utilizing overshoot cubic-bezier easing.
Particle Trail
Fading dots trailing behind the cursor creating a light tail.
Gradient Reveal
Text illuminating progressively as the cursor moves from left to right.
Pure CSS Tooltip
Animated pointer tooltip using only ::before and ::after pseudo-elements, zero JS.
Blur Reveal
Blurred content focusing sharply on hover. Perfect for spoiler flags.
Orbital Rings
Concentric orbit tracks with particles revolving at different speeds.
Masonry CSS Columns
Pinterest-style layout using CSS columns with zero external libraries.
Progress Steps
Interactive step indicator with transitions for multi-step wizards or forms.
Dot Matrix
Reactive grid where individual dots scale and glow under the cursor.
Liquid Button
Button background morphing organic shapes on hover via animated border-radius.
Radial Menu
Circular menu expanding option rings around a central trigger using CSS transforms.
Noise Mesh Gradient
Animated mesh gradient overlaid with SVG grain texture for high-fidelity depth.
Support the Project
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!
Buy me a coffee ☕
Supporting the project helps cover hosting costs and supports the development of new patterns. Every cup helps keep the cactus green!
Support on Ko-fi