React Random Number Generator with Dice Animation

Building Interactive Parallax Engines with React & Framer Motion 🚀 Just finished integrating a custom Parallax Floating Component that takes user interaction to the next level. The challenge: Create a multi-layered depth effect that remains performant even with high-res imagery. The Stack: 🛠️ React & TypeScript for the component architecture. ⚡ Vite for ultra-fast HMR and building. 🎬 Framer Motion for state-of-the-art animation orchestration. 🎨 Tailwind CSS for the refined luxury styling. The logic uses a custom hook to track mouse position relative to the container’s center, applying individual 'depth' factors to each element. This creates a "magnetic" floating effect that makes the UI feel alive. Always looking for ways to push the boundaries of React animations! 👨💻 #ReactJS #TypeScript #FramerMotion #WebDev #UIEngineering #JavaScript

A fully-featured React loader overlay component — 5 animation types, full theme control, progress tracking, outside-click dismissal, and zero dependencies. just published my first npm package — loader-overlay, a React component for handling loading states cleanly. here's the thing: every React app needs a loading overlay at some point. maybe it's a form submission, an API call, or lazy-loaded content. and every time, you either hack something together or install a bloated library. so I built a lightweight one myself and published it. what it does: → wraps any content and shows an overlay while loading is active → full-page or scoped to a container → customizable spinner and styles → just a simple active prop — no complicated setup usage is simple: <LoaderOverlay active={isLoading}>  <YourComponent /> </LoaderOverlay> install it: npm install loader-overlay if you've ever copy-pasted a loading overlay between projects, this one's for you. give it a try and let me know what you think — feedback and PRs are very welcome. https://lnkd.in/dczZR7Pr #React #JavaScript #OpenSource #npm #WebDevelopment #FrontendDev #BuildInPublic

I saw this animation idea on social media while scrolling, and it stuck in my mind. This weekend, I decided to build my own version. It turned into a playful little login UI with geometric characters that follow the cursor, react to hover states, and even look away when the password field is active. Small interaction details like these are fun to build because they can make a simple interface feel much more alive. Built with plain HTML, CSS, and JavaScript. Code: https://lnkd.in/gJKaWnZZ #webdevelopment #frontend #javascript #css #html #uidesign #webanimation #creativecoding #buildinpublic

Have you ever looked at a website and thought, “How is this even built?” That was me when I saw the Anime.js website. What started as curiosity turned into one of the toughest builds I’ve ever taken on. I didn’t just explore it I rebuilt the entire experience from scratch. Every scroll, every transition, every 3D like motion detail… none of it came easy. It took hours of breaking things down, researching how animations actually behave, and retrying until it felt right. There were points where it felt almost impossible to match the smoothness and precision but that is exactly what made this project worth it. What changed for me after this: • I do not just “use” animations anymore I understand how they work • I gained real control over 3D style motion on the web • Scrollytelling finally clicked for me • My approach to frontend has completely leveled up This was not just a project it was a shift in how I think about building on the web. Curious what is the hardest thing you have ever tried to recreate? #FrontendDevelopment #JavaScript #AnimeJS #WebAnimation #Scrollytelling #3DWeb #CreativeCoding

Built a fully interactive Connect 4 Game 🎮 using HTML, CSS & JavaScript with advanced UI, animations, sound effects, and scoreboard. A great hands-on project to strengthen frontend development skills 🚀 InternPe #WebDevelopment #JavaScript #Frontend #Projects #Learning

Maximum effort? More like maximum timepass. I kept seeing this viral Deadpool website concept floating around Pinterest and finally decided to turn the static design into real code. I built this purely for fun over a casual coding session to stretch my UI and animation muscles. Translating the bold typography, the character layering, and the dark theme into the browser was a great mini-challenge. The tech stack: - React - Framer Motion (for the smooth, dynamic animations) Sometimes, as developers, we need to take a step back from serious architecture and just build things because they look cool. Check out the live deployment here (preffered dekstop view for better visual experience) : https://lnkd.in/dWdwYfRU #ReactJS #FramerMotion #FrontendDev #WebDesign #UIUX #JavaScript #WebAnimations #CreativeCoding #FrontendDeveloper #WebDevelopment

Struggled with animating height: auto in Vue? I did too—and finally built a clean, reusable solution. I’ve published a new article where I break down a global expand/collapse transition component in Vue 3 (same idea can be used in React), explained step by step (beginner-friendly): 🔹 How Vue <transition> actually works 🔹 Using slots to make the component reusable 🔹 The trick to animating height: auto smoothly 🔹 Why requestAnimationFrame and forced reflow matter 🔹 Real usage examples (accordion, dropdowns, etc.) If you’re building UI-heavy apps, this is one of those small details that makes a big difference in user experience. Read the full article here 👇 Would love to hear how you’re handling transitions in your projects 🚀 #VueJS #FrontendDevelopment #WebDevelopment #JavaScript #UIUX #SoftwareEngineering

✨ Custom animations — smooth scrolling & micro-interactions 🖤 Design: clean black & white with bold orange accents 5 sections, fully built: Hero · About · Awards · Portfolio · Footer Where I actually struggled (the good stuff): → Animations that don't kill performance → Mobile responsiveness that doesn't just "kinda work" → Reusable components that don't become a mess → Getting Tailwind to do EXACTLY what the design says Every struggle taught me something a tutorial never would. If you're learning React + Tailwind — clone a design you love. Build it. Break it. Fix it. That's the real curriculum. 📚 Drop 🔥 for the GitHub link. Drop ❓ if you want a breakdown of any part! #ReactJS #TailwindCSS #Vite #FrontendDevelopment #JavaScript #WebDesign #Portfolio #100DaysOfCode #OpenToWork

I just created a new #rstats package named kwidgets At this stage, it basically wraps the code of two explorations I've been working on last lately: 1. use of SVG based widgets 2. automatically manage JavaScript dependencies Not everything requires a plot, and not everything needs to be fully rendered again upon update. HTML widgets that include custom JavaScript let you update only what's required (typically a progress value) in no time and with animation. While this is a great approach, it usually involves user to manually include the JavaScript dependencies from the ui side, even if they may create and update the widget from the server side. Because I find it truly annoying, I spent some time exploring how this could be done automatically from within the package functions. Et voilà! It's right here. The very few template widgets (at this stage they are demonstrators of how it will work) do not require any call to a use_* function to insert the JavaScript dependencies. Instead, it will be done internally when you either call a widget or an update widget function from the server side. If you create the widget from the ui side, the JavaScript will be inserted right before the update call is sent to the client from the server side. So that: 1. no JavaScript code will be inserted on client side if you don't need it 2. dependencies will be managed per widget type, no extra code hanging there for no reason 3. insert will be remembered, no duplication in case of multiple widgets or updates 4. one will never forget to include the JS dependency Package documentation: https://lnkd.in/e5Web_x3 Next step(s) will be to improve the widgets, most probably based on things I want to replace in existing apps. #rstats #shiny #javascript #svg

Many developers still rely on custom CSS variables or even JavaScript to define scroll-driven animations, creating unnecessary complexity and brittle codebases. This often leads to animations that are hard to debug, poorly performant, and challenging to synchronize across different scroll containers. Historically, achieving robust scroll-driven effects meant juggling Intersection Observer APIs or custom scroll event listeners, then manipulating CSS properties with JavaScript. Even with early CSS `animation-timeline` drafts, developers had to declare a custom timeline name using `--scroll-timeline` (as seen in the old method example), which added an extra, often redundant, step. Ignoring the native `view()` timeline means your animations remain less declarative and potentially less optimized by the browser. You lose out on the built-in efficiency and simplicity of the platform's dedicated solution, leading to more code, more bugs, and a slower development experience. Are you still defining custom timelines for scroll-driven animations? #css #webdev #frontend #animation #scrollanimation