Five animation components — transitions, keyframes, and IntersectionObserver.
A — Button Hover Animations
Three button states
Fill sweep (::before translateX), border draw (four-sided pseudo-element), and arrow spring (rotate + cubic-bezier).
Each uses a different CSS technique for hover feedback.
B — Loading Spinners
Three spinner variants
Arc spinner (border-top + rotate keyframe), dot pulse (scale + opacity bounce), and bar wave (scaleY sine wave).
All pure CSS @keyframes, no JavaScript.
C — Fade-In Content Reveal
Scroll-triggered reveal
Cards start at opacity:0 and translateY(20px). IntersectionObserver adds .visible when 15% of the element enters the viewport.
Staggered transition-delay creates a cascade effect.
⚡
Web Development
Fast, scalable, production-ready apps.
🎨
Interface Design
Hierarchy and components done right.
🤖
Applied AI
LLM pipelines and workflow automation.
D — Card Lift Effect
Hover elevation
Cards lift with translateY(-10px) scale(1.02) on hover.
The cubic-bezier(0.34, 1.56, 0.64, 1) overshoot gives the spring bounce.
Box-shadow depth increases simultaneously.
🚀
Deploy
🔐
Security
📊
Analytics
E — Navigation & Headline
Underline wipe + word slide-up
Nav links use a ::after pseudo-element with width: 0 → 100% on hover.
Headline words use overflow:hidden parent + translateY(110%) → translateY(0) with staggered animation-delay.
Click to replay the headline.