Motion is part of my brand — not decoration
elangodev.com is a portfolio for an engineer who cares about interfaces. Static pages would contradict that story. I use Framer Motion across the public homepage, elangodev.com entry points, interactive lab demos, and the login screen leading to my dashboard. The goal is not animation for its own sake — it is communicating responsiveness, depth, and craft through physics-based movement users feel in their hands.
I learned early that linear CSS easing looks cheap on high-refresh phones. Real objects accelerate and settle. Framer Motion's spring model lets me define stiffness and damping once, then interrupt animations when scroll direction changes without visual pops.
Scroll progress bar with useSpring
HomeContent.jsx renders a fixed one-pixel bar at the top of elangodev.com that scales horizontally with reading progress. useScroll provides scrollYProgress as a motion value between zero and one. Raw binding would feel jittery on trackpads; useSpring smooths input into a natural deceleration curve.
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
<motion.div
className="fixed top-0 h-1 origin-left z-50 bg-gradient-to-r ..."
style={{ scaleX }}
/>I animate scaleX via transform — GPU compositor territory — not width. Width animation would trigger layout every frame and destroy Interaction to Next Paint on long homepage sessions. That single choice is the difference between premium motion and janky progress indicators.
Hero entrances without blocking LCP
Hero copy and profile photo use motion.div with initial opacity and y offsets, easing via cubic-bezier arrays like [0.16, 1, 0.3, 1]. I delay secondary elements — quick link pills, floating stats badge — so the headline paints first for Lighthouse. Motion runs after meaningful content exists; I never hide text until JavaScript executes unless skeletons are shown, which I avoid on the main hero.
ScrollToTop and the Explore chevron use repeating y keyframes with easeInOut. Subtle loops guide attention without competing with CTA buttons. whileHover and whileTap on buttons give tactile scale feedback — 1.02 hover, 0.98 tap — mimicking physical button travel.
Card hover physics in elangodev.com
The card hover playground at /blog is where I stress-test spring presets before reusing them on the portfolio. Theme presets swap particle color arrays and gradient accents. Framer Motion handles card lifts, message typography entrances, and theme transitions while keeping animated properties on the compositor.
Physics here means more than springs — it is choosing velocities and easing that feel responsive without freezing low-end Android browsers. I cap simultaneous effects when previews run inside denser lab layouts. Themes swap CSS variables and Tailwind classes rather than re-mounting entire trees when possible.
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 260, damping: 20, delay: 0.2 }}
>
<LogIn className="w-8 h-8 text-white" />
</motion.div>That snippet is from my login page — the same spring signature I reuse for icon badges so elangodev.com and auth flows feel cohesive. Consistent stiffness/damping pairs become an informal design token across elangodev.com.
Login page atmosphere
app/login/page.jsx wraps the form in animated blob backgrounds — large blurred circles with animate-blob keyframes in globals.css. The card uses glass morphism: backdrop-blur, semi-transparent borders. motion.div fades the panel upward on mount with easeOut over 0.8 seconds.
I keep form inputs unanimated — focus rings and border color transitions only. Typing while parent springs oscillate caused micro-stutters I eliminated by isolating motion to decorative layers behind the form.
PublicNav micro-interactions
PublicNav on blog and inner pages uses Framer Motion for mobile drawer AnimatePresence — enter exit opacity and x slides. Desktop links rely on CSS hover color shifts for zero JS cost on every mousemove. I match interaction budget to frequency: menus open rarely; hovers fire constantly.
Performance rules I enforce
Animate transform and opacity. Prefer springs for interruptible UI; use tween durations for one-shot page entrances. Lazy-mount heavy backgrounds with mounted state — HomeContent waits until useEffect sets mounted true before rendering MeshBackground blobs, saving first-paint work on slow devices.
Respect prefers-reduced-motion where feasible — I am incrementally adding media query overrides to disable infinite chevron loops for accessibility. Physics should delight, not nauseate.
Shared motion vocabulary across the site
The site lists gradient generators, CSS animation builders, and card hover demos in the homepage and blog. Each tool links out with consistent card hover scale and icon bounce on mount. I reuse the same transition duration tokens — 0.6s for page sections, 0.8s for auth modals — so moving between elangodev.com and /blog feels like one product family rather than unrelated demos.
Why this matters for hiring and editorial quality
Recruiters remember sites that feel alive. Core Web Vitals still pass because I choreograph motion around metrics — not against them. elangodev.com proves I can teach animation concepts because elangodev.com practices them on the homepage and interactive demos I actually host.
High-performance UI physics is a discipline: choose the right motion primitive, constrain animated properties, align spring constants across routes, and test on real phones. That is the implementation story behind the gradients and springs — code I ship on elangodev.com, not theory I bookmark.
