Optimize React SVGs with SVGR

I just open-sourced ArcTimer — a countdown circle timer library for React, React Native, and Expo. Here's the backstory: react-countdown-circle-timer is one of the most popular timer components on npm with 40K+ weekly downloads. But it's been unmaintained for a while now, and it has a fundamental problem — the arc animation updates once per second, creating a visible "jump" instead of a smooth sweep. That bugged me enough to build something better. ArcTimer runs at 60fps. The arc sweeps smoothly while the text updates at natural one-second intervals. It sounds like a small thing, but the difference in perceived quality is night and day. What else is different: → Spring physics — damped harmonic oscillator, not just CSS ease-in-out → Bounce & pulse effects — scale animation at configurable thresholds → Timer groups — run multiple timers sequentially (Pomodoro), in parallel, or staggered → 5 built-in themes with auto dark mode detection → WCAG 2.1 AA accessible — ARIA labels, keyboard navigation, screen reader support → Imperative API — ref.play(), ref.pause(), ref.reset() → Under 5KB gzipped, tree-shakable, zero dependencies in core The architecture follows a "thick core, thin renderer" pattern. 90% of the logic lives in a platform-agnostic core package. The React, React Native, and Expo packages are thin wrappers that just handle rendering. Same hook, different output. Migration from the old library takes about 30 seconds: - import { CountdownCircleTimer } from 'react-countdown-circle-timer' + import { CountdownCircleTimer } from '@toankhontech/arctimer-react' Same props. Same API. Just better animation underneath. The project is MIT licensed and I'd love feedback from the community — especially from anyone building with React Native or Expo where smooth animation matters even more. GitHub: https://lnkd.in/gqvcudxn npm: https://lnkd.in/g7Di4jjM #OpenSource #ReactJS #ReactNative #Expo #TypeScript #WebDevelopment #FrontendDevelopment #JavaScript

𝐄𝐯𝐞𝐫 𝐬𝐩𝐨𝐭𝐭𝐞𝐝 𝐚 𝐰𝐞𝐢𝐫𝐝 𝐟𝐥𝐢𝐜𝐤𝐞𝐫 𝐨𝐫 𝐥𝐚𝐲𝐨𝐮𝐭 𝐬𝐡𝐢𝐟𝐭 𝐢𝐧 𝐲𝐨𝐮𝐫 𝐑𝐞𝐚𝐜𝐭 𝐚𝐩𝐩 𝐭𝐡𝐚𝐭 𝐣𝐮𝐬𝐭 𝐰𝐨𝐮𝐥𝐝𝐧'𝐭 𝐠𝐨 𝐚𝐰𝐚𝐲? 𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐮𝐬𝐢𝐧𝐠 𝐭𝐡𝐞 𝐰𝐫𝐨𝐧𝐠 𝐞𝐟𝐟𝐞𝐜𝐭 𝐡𝐨𝐨𝐤 𝐟𝐨𝐫 𝐭𝐡𝐞 𝐣𝐨𝐛. Most of us reach for `useEffect` almost reflexively, and for good reason—it's incredibly powerful for side effects. But `useEffect` runs asynchronously after the browser has already painted to the screen. Sometimes, this timing is your enemy. If you need to perform DOM measurements (like getting a `div`'s actual width) and then immediately make a visual adjustment before the user sees anything, `useEffect` can cause a brief, visible "flash" of an incorrect state. That's where `useLayoutEffect` shines. `useLayoutEffect` fires synchronously after all DOM mutations have been calculated but before the browser paints. This makes it perfect for scenarios like: * Measuring a DOM element's size and using that value to position another element. * Manipulating the DOM directly (though generally discouraged in React, sometimes it's necessary for third-party libs). * Preventing scroll jumps or ensuring a fluid animation sequence. Essentially, if you're dealing with anything that needs to happen before the user perceives the next frame, `useLayoutEffect` is your hook. It keeps your UI visually consistent and smooth. When have you had to reach for `useLayoutEffect` to debug a tricky visual bug? Share your stories! #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #ReactHooks

44/100 React-JS projects Hard challenge 🌗 Light & Dark Theme Personal Portfolio React A modern, responsive personal portfolio built with React , featuring light/dark theme, smooth animations, Sliders, EmailJs intigrate and many other things and a clean UI to showcase projects and skills. Key Features Light & Dark theme toggle Fully responsive layout, Smooth animations using Framer Motion Project slider with react-slick Clean, minimal, and modern UI. EmailJs intigration for receiving email from ( yahoo, gmail etc ) The useEffect hook manages side effects such as theme handling and slider setup Remix Icons are used for navigation, theme icons, and social links etc Theme preference is handled dynamically for better user experience. Check out the project and let me know what you think # #TailwindCSS #Ecommerce #FrontendDevelopment #WebDevelopment #Coding #ProjectShowcase #ReactJS #100DaysOfCode #100DaysOfReactProjects #JavaScript #FrontendDevelopment #WebDevelopment #CoderLife #Programming #SoftwareEngineer #DevCommunity #OpenSource #TechJourney #CodeNewbie #Developer #FrontendEngineer #ReactDeveloper #JSDeveloper #WebDevCommunity #DailyCoding #CodeChallenge #ModernWeb #CodingChallenge

I set myself a challenge: Build an Awwwards-level experience with React 🏆 ⏱ Built in 2 weeks as a solo project We all know those stunning, cinematic websites on Awwwards. They feel less like "web pages" and more like interactive stories. I wanted to stop just admiring them and start building one The Mission: My goal was to engineer a Digital Garden—a space that feels organic, fluid, and alive. This project sharpened my skills in animation architecture, performance profiling, and creative frontend engineering The Experiment: I pushed the boundaries of the modern frontend stack to bridge the gap between creative design and technical performance 🚀 The Stack: Motion: orchestrated complex timelines with GSAP (GreenSock) to create smooth, scroll-driven storytelling Core: Built on React to leverage the latest concurrent rendering features Style: Styled with Tailwind CSS v4 for a zero-runtime, high-performance UI The Result: Turning a static design into a 60fps interactive experience taught me that performance is a feature. Managing micro-interactions without blocking the main thread was the real engineering puzzle here 👇 Check out the result below. I’d love to hear your feedback on the animations #reactjs #gsap #awwwards #frontend #webdesign #creativecoding #javascript #tailwindcss

Built an animated night sky using React + Tailwind CSS 🌌 I recently created an interactive background experience using React 19, Vite, and Tailwind CSS, focusing on clean component architecture and smooth UI animations. 🔧 How it works: React components handle each visual element independently (stars, meteors, theme toggle) Tailwind CSS utility classes manage layout, responsiveness, transitions, and colors without writing custom CSS files Dark / Light theme toggle is implemented using localStorage, allowing the app to remember user preferences across sessions Animated stars & meteor effects are created using lightweight animations for smooth performance 🌙 The result is a dynamic, immersive sky that feels alive — responsive on all devices and optimized for modern browsers. Tech Stack React 19 Vite Tailwind CSS JavaScript #React #TailwindCSS #FrontendDevelopment #WebAnimation #UIUX #JavaScript #Vite

So you want to add some flair to your website. It's all about the details. And, let's be real, a flickering flame component can be pretty cool. You can create one using Styled-Components, Typescript, ReactJS, and CSS3 - it's like building with blocks, but instead of blocks, you're using code. The component structure is made with Styled-Components, which is like the foundation of a house, it's what holds everything together. But the real magic happens when you combine Styled-Components helper methods with CSS3 animations and transforms - it's like adding a dash of magic to your code, and suddenly, your flame is flickering. I mean, think about it, the flicker effect is what makes it look real, like a flame dancing in the wind. And the best part is, you can customize it to fit your style, like adding a personal touch to your website. So, if you want to learn more about creating a flickering flame component, check out this article - https://lnkd.in/gAfbgmfH It's all about innovation, creativity, and strategy. #WebDevelopment #ReactJS #StyledComponents

🚀 GSAP Makes Life Easier: The Secret to High-End Web Motion Stop fighting with "janky" CSS keyframes or complex scroll logic. If you’re building modern web experiences, GSAP (GreenSock Animation Platform) is the ultimate cheat code. Why? Because it turns "impossible" scroll-driven animations into a few lines of readable code. The Game Changer: ScrollTrigger 🛠️ Instead of manually calculating window scroll positions, ScrollTrigger lets you: ✅ Pin elements in place while the background changes. ✅ Scrub animations so they play perfectly in sync with the user's thumb. ✅ Trigger reveals exactly when an element enters the viewport. ✅ Create parallax effects that actually feel smooth, not nauseating. The Workflow: It’s framework-agnostic. Whether you're a React fan, a Webflow pro, or a vanilla JS purist, GSAP handles the heavy lifting so you can focus on the creative side of coding. No more math. No more browser compatibility headaches. Just butter-smooth motion. BTW, what is your favorite GSAP plugin? ScrollTrigger, Draggable, or Flip? 👇 #WebDevelopment #GSAP #Frontend #UIUX #Animation #JavaScript #ScrollTrigger GitHub: https://lnkd.in/dfUd4TGt

𝐘𝐨𝐮'𝐫𝐞 𝐩𝐫𝐨𝐛𝐚𝐛𝐥𝐲 𝐮𝐬𝐢𝐧𝐠 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐟𝐨𝐫 𝐞𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠, 𝐛𝐮𝐭 𝐬𝐨𝐦𝐞𝐭𝐢𝐦𝐞𝐬 𝐢𝐭'𝐬 𝐭𝐨𝐨 𝐥𝐚𝐭𝐞. Ever notice a quick flash or jank when your React component tries to measure or manipulate the DOM right after render? That's often `useEffect` running after the browser has painted, causing a visual flicker as the UI re-renders with new dimensions. This is where `useLayoutEffect` shines. It runs synchronously after all DOM mutations, but before the browser paints. Perfect for: 1. **DOM measurements:** Getting clientWidth, scrollHeight, etc., to make immediate layout adjustments. 2. **Imperative animations:** When you need to sync with the browser's render cycle to avoid visual glitches. 3. **Preventing flickering:** Ensuring any layout-dependent updates happen before the user sees the page. Think of it as the `componentDidMount` and `componentDidUpdate` lifecycle methods, but for layout-related side effects. If your effect needs to block the browser's paint to prevent an inconsistent UI state, `useLayoutEffect` is your go-to. Just remember: it's a blocking hook, so use it sparingly and only when `useEffect` causes visible issues. Unnecessary use can hurt performance. When do you find yourself reaching for `useLayoutEffect`? Share your war stories! #React #Frontend #Performance #JavaScript #WebDev

Just Finished Recreating the Sable Rubber Website! I recently came across Sable Rubber's website on Land-Book and was immediately captivated by its smooth animations and scroll-driven interactions. As someone who loves working with GSAP, I couldn't resist the challenge of recreating it from scratch. The Build: Framework: Next.js with TypeScript Animations: GSAP + ScrollTrigger Smooth Scrolling: Lenis Styling: Tailwind CSS What Made This Fun: Working with GSAP never gets old. The combination of ScrollTrigger for scroll-based animations and Lenis for buttery-smooth scrolling created that premium feel I was going for. From parallax effects to horizontal scroll sections, every interaction was a learning opportunity. Key Features I Implemented: ✓ Horizontal scroll product/application sections ✓ Scroll-triggered stagger animations ✓ Parallax marquee effects ✓ Video backgrounds with overlay ✓ Smooth page transitions -- " Desktop Heavy" Lessons Learned: This project reinforced how powerful GSAP is for creating premium web experiences. The declarative nature of ScrollTrigger makes complex scroll animations manageable, and combining it with Lenis takes the smoothness to another level. Check it out: https://sablee.vercel.app/ Original: https://sablerubber.com/ Always excited to push the boundaries of what's possible with modern web animations. What's your go-to animation library? #WebDevelopment #GSAP #NextJS #Frontend #WebDesign #JavaScript #ScrollAnimation #WebAnimation #Lenis #TailwindCSS #TypeScript #LandBook #ReactJS #WebDev #UXDesign

🎨 Practice Project: Real-Time Color Picker UI Built this project to practice real-time color updates, interactive UI, and smooth animations using HTML, CSS, and JavaScript. You can instantly change: Text color Background color Border color Primary & secondary theme colors All updates happen live, making it easy to visualize and experiment with color combinations. 🔗 Live Demo: 👉 https://lnkd.in/gHfBQ2Zf Always learning, experimenting, and improving 🚀 #HTML #CSS #JavaScript #ColorPicker #FrontendDevelopment #UIUX #PracticeProject #LearningByDoing