Standardize Animations with Keyframes Tokens for Consistent UI

Day 6 of building in public. Starting my 21 Day Frontend Development Challenge 🚀 Today I built a scroll driven curtain reveal animation using HTML CSS and Vanilla JavaScript. The idea behind this project was to explore how modern websites create cinematic storytelling experiences using scroll interactions. The page begins with a heart shaped curtain covering the screen. As the user scrolls the curtain opens from the center revealing an image that gradually zooms out. After the zoom animation finishes the curtain and title move upward and the main content section appears. While building this project I focused on understanding how scroll position can control animations and how JavaScript can dynamically update CSS transforms to create smooth visual effects. Some key concepts I practiced today:- •Scroll based animation logic •Transform scale animations for image zoom effects •Position sticky and fixed layouts for layered elements •DOM manipulation using JavaScript •Creating interactive UI transitions without external libraries Projects like this helped me understand how modern landing pages and storytelling websites create engaging user experiences. Excited to continue this challenge and push my frontend skills further every day. Excited for Day 7. If you are also learning JavaScript or building projects feel free to connect. Day 6 complete 15 more days of learning and building ahead. If you are also learning JavaScript or building projects I would love to connect and learn together. #buildinpublic #frontenddevelopment #webdevelopment #javascriptdeveloper #codingjourney #devcommunity #softwareengineering #learninpublic #programming #100daysofcode #sheryains #sheryainscodingschool Harsh Vandana Sharma , Sheryians Coding School , Satwik Raj, Sheryians Coding School Community. Live link :- https://lnkd.in/e3ZCmJwb GitHub repo:-https://lnkd.in/exc-AWT9 My GitHub profile :-https://lnkd.in/eG98UbAa

🪄 Hover & Watch the Magic — Pure CSS Interaction Experiment Built an interactive hover project where a simple card transforms completely the moment you move your cursor over it. The goal was to create that “wait… that’s smooth” feeling — where motion, layering, and timing work together to deliver a subtle but powerful visual experience. What happens on hover: • Smooth image transformation & scaling • Layered content reveal with controlled transitions • Depth created using shadows & positioning • Seamless animation flow without breaking layout Instead of using JavaScript or libraries, I focused entirely on mastering CSS transitions, transforms, and timing functions to create the effect. This project helped me understand something important: Great UI isn’t about complexity — it’s about precision in small details. Every hover, every transition, every movement was intentional. Frontend development is not just coding components. It’s designing how users feel when they interact with them. Mentor: Sheryians Coding School | Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati. 🧠 Tech Stack: HTML | CSS | SCSS #FrontendDevelopment #CSS #SCSS #HoverEffect #WebDesign #UIAnimation #BuildInPublic #LearningInPublic #DeveloperJourney

🚀 Can a no-code tool replicate a developer’s mindset? Spent a day exploring the no-code ecosystem and built this portfolio using Framer — purely as an experiment to understand how visual tools handle layout systems, animation triggers, breakpoints, and component structuring compared to traditional React workflows. While I usually build with the MERN stack, this was an interesting shift into constraint-based design and rapid UI prototyping. Currently optimised for 14-inch screens (responsiveness refinements underway). This isn’t a major project — just a focused exploration of how no-code platforms abstract frontend logic. #Framer #NoCode #WebDevelopment #FrontendDevelopment #MERNStack #SoftwareEngineering #BuildInPublic #LearningInPublic

Hello everyone... 🚀 Day 29 of #30DaysCodeChallenge Today I built an Interactive Command Palette UI using HTML, CSS, and JavaScript inspired by modern tools like Visual Studio Code and Notion. This project allows users to open a smart command panel using the keyboard shortcut (Ctrl + K) and execute different UI commands instantly. 💡 Key Features: ✨ Keyboard shortcut to open the command palette ✨ Smart command search filtering ✨ Dark mode toggle ✨ Toast notification system ✨ Screen shake animation ✨ Confetti celebration animation 🎉 ✨ Smooth UI transitions and modern design Through this project, I practiced DOM manipulation, event handling, keyboard interactions, dynamic UI updates, and animation effects in JavaScript. Building projects like this helps improve problem-solving skills and frontend development creativity, while also understanding how real productivity tools implement quick commands. I’m excited to keep improving my frontend development skills by building more advanced and creative projects. #30DaysCodeChallenge #Day29 #HTML #CSS #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic 🚀

One line of CSS most frontend devs forget: scroll-behavior: smooth; Add it to your html selector. That's it. Every anchor link, every scrollTo(), every "back to top" button, instantly smooth. No JavaScript. No libraries. No 12KB animation package. Works in every modern browser. Sometimes the best UX upgrade is one line you didn't overthink. #FrontendDevelopment #CSS #WebDevelopment #UXTips

I just launched my new interactive developer portfolio 🚀 Instead of building a traditional static portfolio, I wanted to experiment with depth, motion, and GPU-accelerated visuals to make the site feel more like a cinematic experience. This project was also really exciting for me because I combined several technologies that I was using for the first time. Exploring how these tools work together- especially across animation, 3D rendering, and UI architecture made the whole process a great learning experience. Some of the interesting pieces behind the scenes: 🎭 Depth-driven hero visuals The hero portrait uses a 3D character pipeline to generate the base and reveal images. Because the source comes from a 3D model, lighting, shadows, and facial depth behave more naturally than a typical 2D image. These renders are then used inside a custom cursor lens interaction that reveals a second lighting pass in real time. 🌐 WebGL-powered skills visualization The skills section is rendered using Three.js with React Three Fiber, creating a floating 3D cloud of technologies that runs directly on the GPU. This allows smooth rendering and interaction while keeping the UI responsive. 🎬 Motion choreography with Framer Motion Instead of isolated animations, the site uses layered motion orchestration: • macro transitions between sections • micro animations inside components • interactive elements responding to cursor movement This helps maintain a consistent visual rhythm across the whole experience. ⚡ Performance-aware architecture Heavier visual sections are lazy-loaded with React Suspense, keeping the initial load fast while still allowing richer visuals later in the page. Tech stack: React • TypeScript • Vite • Framer Motion • Three.js • React Three Fiber • WebGL You can check it out here: 🌐 Live site https://lnkd.in/d78s_R-G 💻 GitHub https://lnkd.in/dskFAvxv Would love to hear your thoughts and feedback! #softwareengineering #computerscience #computerengineering #webdevelopment #frontenddevelopment #reactjs #typescript #threejs #webgl #framer #javascript #fullstackdevelopment #softwaredeveloper #programming #tech #coding #developerportfolio

✨𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗙𝗿𝗶𝗱𝗮𝘆 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝟮: 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻 𝗠𝗮𝗴𝗶𝗰 ✨ Small interactions can completely change how users experience a product. 𝗔 𝗵𝗼𝘃𝗲𝗿 𝗲𝗳𝗳𝗲𝗰𝘁, 𝗮 𝘁𝗼𝗴𝗴𝗹𝗲, 𝗮 𝘀𝘂𝗯𝘁𝗹𝗲 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 these tiny details bring interfaces to life. For this week’s Frontend Queens challenge, we’re focusing on UI interactions and micro-interactions. 🗓 𝗦𝘁𝗮𝗿𝘁: 𝗠𝗮𝗿𝗰𝗵 𝟮  🗓 𝐒𝐮𝐛𝐦𝐢𝐭 𝐛𝐲: 𝐌𝐚𝐫𝐜𝐡 𝟏𝟑 You don’t need a brand-new project. Feel free to share: • a CodePen • a live demo • a short video or GIF • even an older project you’ve built before The goal is simple: 𝗲𝘅𝗽𝗲𝗿𝗶𝗺𝗲𝗻𝘁, 𝗹𝗲𝗮𝗿𝗻, 𝗮𝗻𝗱 𝘀𝗵𝗮𝗿𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆. 🏆 Focus categories • Micro-Interaction Magic – hovers, toggles, transitions • Innovation in Motion – clever animations • Creative Spark – unexpected interaction ideas CSS, JavaScript, GSAP, or any tool you love — surprise us. If you have great resources or tutorials, feel free to share them with the community as well. 𝗟𝗲𝘁’𝘀 𝗺𝗮𝗸𝗲 𝗶𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 𝗳𝗲𝗲𝗹 𝗮𝗹𝗶𝘃𝗲. ✨ 𝗝𝗼𝗶𝗻 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝗼𝗻 𝗦𝗹𝗮𝗰𝗸: https://lnkd.in/eAskzKiG💜 #FrontendQueens #FrontendFriday #WebDevelopment #UI #MicroInteractions #CSS #JavaScript

Today, I work on building a dynamic page editor using 𝗖𝗿𝗮𝗳𝘁.𝗷𝘀, following their documentation to create 𝗱𝗿𝗮𝗴𝗴𝗮𝗯𝗹𝗲, customizable components. It was a hands-on way to grasp the fundamentals of visual editing in React.  • Migrated 𝗠𝗨𝗜 𝗚𝗿𝗶𝗱 components from the legacy version to 𝗚𝗿𝗶𝗱 𝘃𝟮, fixing deprecation warnings and updating props like `𝗶𝘁𝗲𝗺` 𝗮𝗻𝗱 `𝘅𝘀` to `size`.  • Refactored UI components (𝗧𝗼𝗽𝗯𝗮𝗿, 𝗧𝗼𝗼𝗹𝗯𝗼𝘅, 𝗦𝗲𝘁𝘁𝗶𝗻𝗴𝘀𝗣𝗮𝗻𝗲𝗹) to use flexbox instead of unsupported Grid directions, ensuring compatibility.  • Enhanced the Text component with 𝗖𝗼𝗻𝘁𝗲𝗻𝘁𝗘𝗱𝗶𝘁𝗮𝗯𝗹𝗲 for inline editing, added Craft.js rules for drag restrictions, and integrated settings panels for font size adjustments.  • Resolved Craft.js resolver errors by registering internal components like 𝗖𝗮𝗿𝗱𝗧𝗼𝗽 𝗮𝗻𝗱 𝗖𝗮𝗿𝗱𝗕𝗼𝘁𝘁𝗼𝗺, allowing nested elements to render properly.  • Explored Craft.js features like 𝗰𝗼𝗻𝗻𝗲𝗰𝘁𝗼𝗿𝘀, 𝗻𝗼𝗱𝗲 𝗮𝗰𝘁𝗶𝗼𝗻𝘀, 𝗮𝗻𝗱 𝗿𝘂𝗹𝗲𝘀 to control component behavior in the editor. This experience improved my understanding of Craft.js, and I will integrate these learnings into community platform pages for more interactive user experiences. #CraftJS #React #WebDevelopment #UIUX #FrontendEngineering #JavaScript #BuildInPublic #LearnInPublic

𝐘𝐨𝐮 𝐚𝐫𝐞 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐦𝐨𝐝𝐚𝐥𝐬 𝐭𝐡𝐞 𝐰𝐫𝐨𝐧𝐠 𝐰𝐚𝐲.⁣ ⁣ Most React devs just drop a modal component inside their current tree and slap a z-index on it.⁣ ⁣ It works. Until it doesn't.⁣ ⁣ The real problem?⁣ ⁣ - Your modal lives inside a 𝐝𝐞𝐞𝐩𝐥𝐲 𝐧𝐞𝐬𝐭𝐞𝐝 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞.⁣ - 𝐂𝐒𝐒 𝐨𝐯𝐞𝐫𝐟𝐥𝐨𝐰: 𝐡𝐢𝐝𝐝𝐞𝐧 from a parent? Your modal gets clipped.⁣ - 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐬𝐭𝐚𝐜𝐤𝐢𝐧𝐠 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 from a wrapper? Your modal loses the battle.⁣ - 𝐒𝐜𝐫𝐞𝐞𝐧 𝐫𝐞𝐚𝐝𝐞𝐫𝐬? Confused by where the dialog actually lives.⁣ ⁣ That's not a modal. That's a 𝐝𝐢𝐯 𝐰𝐞𝐚𝐫𝐢𝐧𝐠 𝐚 𝐝𝐢𝐬𝐠𝐮𝐢𝐬𝐞.⁣ ⁣ 𝐄𝐧𝐭𝐞𝐫 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥.⁣ ⁣ Instead of rendering inside the component tree, 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 𝐭𝐞𝐥𝐞𝐩𝐨𝐫𝐭𝐬 𝐲𝐨𝐮𝐫 𝐦𝐨𝐝𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐭𝐨 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭.𝐛𝐨𝐝𝐲 — outside every stacking context, outside every overflow trap.⁣ ⁣ Here's what that unlocks:⁣ ⁣ - 𝐍𝐨 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐰𝐚𝐫𝐬⁣ - 𝐍𝐨 𝐜𝐥𝐢𝐩𝐩𝐢𝐧𝐠 from parent overflow rules⁣ - Proper 𝐟𝐨𝐜𝐮𝐬 𝐭𝐫𝐚𝐩𝐩𝐢𝐧𝐠 and accessibility⁣ - Clean animation transitions 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐥𝐚𝐲𝐨𝐮𝐭 𝐬𝐢𝐝𝐞 𝐞𝐟𝐟𝐞𝐜𝐭𝐬⁣ ⁣ And the best part?⁣ ⁣ It still behaves like a 𝐫𝐞𝐠𝐮𝐥𝐚𝐫 𝐑𝐞𝐚𝐜𝐭 𝐜𝐡𝐢𝐥𝐝.⁣ State, props, context — all connected to the parent.⁣ The logic stays in your component tree.⁣ 𝐎𝐧𝐥𝐲 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞 𝐦𝐨𝐯𝐞𝐬.⁣ ⁣ I combined 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 with 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐅𝐫𝐚𝐦𝐞 - based state to get smooth enter/exit animations — no flash, no layout jank, just clean transitions synced to the browser's paint cycle.⁣ ⁣ That's what 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧-𝐠𝐫𝐚𝐝𝐞 𝐦𝐨𝐝𝐚𝐥 𝐛𝐞𝐡𝐚𝐯𝐢𝐨𝐫 looks like.⁣ ⁣ If you're not using 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 for modals, overlays, or tooltips — you're 𝐟𝐢𝐠𝐡𝐭𝐢𝐧𝐠 𝐭𝐡𝐞 𝐃𝐎𝐌 instead of working with it.⁣ ⁣ Are you using createPortal in your projects? Or still doing it the hard way? 👇⁣ ⁣ #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

𝐃𝐨𝐧'𝐭 𝐭𝐫𝐞𝐚𝐭 `𝐮𝐬𝐞𝐑𝐞𝐟` 𝐥𝐢𝐤𝐞 `𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞` — 𝐢𝐭'𝐬 𝐧𝐨𝐭 𝐠𝐨𝐢𝐧𝐠 𝐭𝐨 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭'𝐬 𝐩𝐫𝐞𝐜𝐢𝐬𝐞𝐥𝐲 𝐢𝐭𝐬 𝐬𝐮𝐩𝐞𝐫𝐩𝐨𝐰𝐞𝐫! I recently helped a junior dev debug an animation issue where they were trying to trigger a re-render by updating `myRef.current`. It's a common misconception. `useRef` is designed to hold mutable values that persist across renders but don't trigger new renders themselves. This makes it perfect for: 1. Accessing DOM elements directly: `const inputRef = useRef(null); <input ref={inputRef} />` 2. Storing a mutable value that doesn't need to be reactive: Think timeouts, interval IDs, or previous state values. `const countRef = useRef(0); countRef.current++; // updates without re-render` The key takeaway: `useRef.current` updates synchronously, but React won't re-render unless state or props change. If you need UI updates, `useState` is your friend. If you need a persistent, mutable reference without the render cycle overhead, `useRef` is your ace in the hole. What's your most clever use case for `useRef`? Or a time it totally stumped you? #React #Frontend #JavaScript #WebDevelopment #ReactHooks