A JavaScript library with zero releases is quietly running morph animations across 4000 projects flubber. 6900 stars. MIT license. Last real commit years ago. The author gave a talk in 2017 and moved on It does one thing well. Turns any 2D shape into any other 2D shape without the animation falling apart. Anyone who tried to morph an SVG triangle into a star with d3.transition() knows the failure mode — vertices teleport across the screen, the shape folds inside out, the whole thing looks like a bug report flubber fixes it with clever point-matching and hands back an interpolator function. Call it with a value from 0 to 1, get the in-between frame. The whole API fits on a screen Useful for data viz transitions, logo morphs, icon toggles, anything where one shape has to become another Correct math from 2017 is still correct math in 2026. Some libraries don't need updates. They need to still work

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

🚀 Excited to share my new React project — Guess The Number 🎲 I built a Random Number Generator with a rolling dice animation where users can generate a number and try to guess it within a selected range. ✨ Features: 🎲 Dice rolling animation 🔢 Random number generation 🎯 Guess the number game ⚡ Min & Max range selection 🧮 Attempts counter 🎨 Font Awesome icons & background image 📱 Responsive design 🛠️ Built with: React.js | JavaScript | CSS | Font Awesome | Vite This project helped me improve my understanding of: React state management Event handling Conditional rendering CSS animations UI design Learning and growing consistently with Error Makes Clever 🚀 🌐 Live Website: https://lnkd.in/gWYE6CcE 🔗 GitHub Repository: https://lnkd.in/gPsJ8AZH I would love to hear your feedback and suggestions! 😊 #reactjs #javascript #webdevelopment #frontenddeveloper #vite #css #github #learning #projects

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

Developers today don’t build websites… They assemble libraries. ❌ Animation → one library ❌ Slider → another ❌ Forms → another ❌ Scroll → another Now your project is just… dependencies glued together. ✅ More libraries ≠ better product ✅ More control ≠ more complexity You don’t need a stack of tools. You need a smarter approach. 👉Try MotionFlow.dev = one solution for motion, scroll, parallax & more. Less dependency. More clarity. 🚀 #frontend #javascript #webdev #motionflow #jslibrary #jsplugin

That 3D tilted card effect from the Tailwind CSS landing page. Built from scratch. No JavaScript. No animation library. Just Tailwind utility classes. The whole effect comes down to three things working together. First, perspective-distant on the wrapper sets up the 3D space. Without this, all the 3D transforms look completely flat. Second, transform-3d tells the browser to render children in that 3D space instead of collapsing them back to 2D. Third, the image gets rotate-x-30, -rotate-y-8, rotate-14 and translate-z-25 applied by default, which is what creates that tilted, lifted look. On hover, group-hover resets all of those back to zero with a smooth 300ms transition. The card just sits flat again. That is the entire effect. Four transform classes and a group-hover reset. #TailwindCSS #ReactJS #FrontendDevelopment #WebDev #CSS

#Day11 of My MERN Stack Journey with Skill Shikshya Today’s class was all about making websites more interactive and dynamic with CSS animations and transitions Here’s what I learned: -CSS transition for smooth changes -CSS animation for more complex effects -@keyframes to control animation steps -transform for movement, rotation, scaling -CSS custom properties (variables) for cleaner and reusable code Andrealized that I’ve now covered most of the core CSS concepts! Still practicing and exploring more to get comfortable with everything. #Day11 #MERNStack #WebDevelopment #CSS #Animation #FrontendDevelopment #skillshikshya

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

TEXT ANIMATION USING HTML AND CSS #CSS #CascadingStyleSheets #FrontendDevelopment #WebDesign #WebDevelopment #StyleYourSite #CSSGrid #CSSFlexbox #ResponsiveDesign #CodeNewbie #LearningToCode #WebDevelopmentTutorial #ProgrammingTips #DevCommunity #CreateWithCode #ProgrammingTutorial #TechSkills #WebDevLife #CSSAnimations #frontend #frontenddevelopment #webdevelopment #frontenddesign #frontenddeveloper #javascript #css #html #uxdesign #uidesign #webdesign #programming #coding #tech #developerlife #webdev #techcommunity #softwareengineering #responsive design #frontendframeworks

🟢 Matrix Hover Effect — Turning Text into a Digital Rain Illusion Experimented with a Matrix-inspired hover effect where the text transforms into a dynamic digital-style animation when the cursor moves over it. The goal wasn’t just to style text — it was to create an effect that feels cinematic and interactive. On hover: • The text transitions into a Matrix-style visual effect • Characters animate dynamically • The UI responds instantly to cursor interaction • Smooth timing creates a “digital rain” illusion This project pushed me to think beyond traditional UI design and explore creative frontend animations using DOM logic and CSS transitions. It’s fascinating how a simple hover event can completely transform the perception of a static element. Frontend development isn’t limited to layouts — it can create atmosphere, motion, and emotion. Mentor:- Sheryians Coding School | Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati 🧠 Tech Stack: HTML | CSS | SCSS | JavaScript (DOM) #JavaScript #DOM #FrontendDevelopment #CreativeCoding #WebAnimation #MatrixEffect #HoverEffect #CSS #SCSS #BuildInPublic #DeveloperJourney