Atlas Components
Declarative components with data-atlas attributes and micro-transitions
Buttons
Hover Effects
Loading State (Alpine.js)
Cards
Lift + Tilt + Shine
Hover for 3D tilt effect with shine overlay
Scale Effect
Subtle scale on hover
Glow Effect
Colored glow on hover
Grid Stagger Animation
Items animate in sequence on page load
1
2
3
4
5
6
7
8
<div data-atlas="grid" data-stagger="75" data-initial-delay="200">...</div>
Form Inputs
Please enter a valid email
<input data-atlas="input" data-focus-glow :data-error="hasError" />
Attribute Reference
| Component | Attributes | Description |
|---|---|---|
| button | data-ripple, data-hover, data-loading | Interactive button with micro-transitions |
| card | data-hover, data-tilt, data-shine | Card with lift/scale/glow and 3D tilt |
| input | data-focus-glow, data-error, data-success | Input with focus glow and validation states |
| grid | data-stagger, data-initial-delay, data-animate-on-scroll | Stagger animation for children |
| tooltip | data-content, data-placement, data-trigger | Tooltip with various triggers |