Motion & Life
Lightweight, performance-first CSS animations to bring the interface to life without the heavy cost of JavaScript libraries.
01. Scroll Reveal (Fade Up)
Simple opacity and transform translation triggered on intersection.
Fade In Card
This element fades in and translates up when it enters the viewport. Effect created with IntersectionObserver + Tailwind utility classes.
Fade In Card
This element fades in and translates up when it enters the viewport. Effect created with IntersectionObserver + Tailwind utility classes.
Fade In Card
This element fades in and translates up when it enters the viewport. Effect created with IntersectionObserver + Tailwind utility classes.
02. Hover Glow & Lift
Subtle interactions to indicate interactivity.
Neon Glow
Hover over this card to see a gradient glow effect and a subtle lift. Perfect for feature highlights or pricing tiers.
Spotlight Effect
Move your mouse over this card. A subtle radial gradient follows your cursor. (Requires tiny JS snippet).
03. Staggered Text
Character-by-character reveal for impactful headings.
VISIONARY
04. Pulse & Attention
Indicators for live status or notifications.
05. Slide & Scale Reveals
Alternative entrance animations for variety.
Scale Up (Zoom)
Zooms in from 90% size.
06. Continuous & Feedback
Animations that loop or provide user feedback.
Floating
Great for hero images or empty states.
Useful for form validation errors.
Slow spin for non-loading status.