- A pure CSS 3D depth interaction. Hover over any corner of a card - to see perspective, rotation, and layered translateZ in action — - no JavaScript, no libraries. -
-- A component system built for scale — tokens, patterns, - and documentation in one place. -
- - - - - -- A zero-dependency graph database written in Rust, - optimised for edge environments. -
- - - - - -Hover over a card corner to tilt
- -- A premium, slide-in toast component supporting themed color accents, stacking spacing, and pure CSS auto-dismiss animations. -
-- Click the buttons below to spawn styled alerts. They will slide in from the top-right corner and auto-dismiss after 3 seconds. -
- -- Trigger multiple toasts to verify vertical stacking. When a toast is dismissed, the lower items slide up automatically. -
- - - - -- To manage mounting and cleanup of toasts in standard web applications, developers can use a simple helper like the one below: -
- -
-function showToast(message, type = 'info') {
- // Find or create container
- let container = document.querySelector('.ease-toast-container');
- if (!container) {
- container = document.createElement('div');
- container.className = 'ease-toast-container';
- document.body.appendChild(container);
- }
-
- // Create toast element
- const toast = document.createElement('div');
- toast.className = `ease-toast ease-toast-${type}`;
- toast.innerHTML = `<span>\${message}</span>`;
-
- // Mount
- container.appendChild(toast);
-
- // Auto-remove element from DOM after the exit animation completes (3.7s)
- setTimeout(() => {
- toast.remove();
- }, 3700);
-}
-