Stop building boring UIs. ReactBits just changed the game. If you've been copy-pasting CSS animations or fighting with Framer Motion configs for hours — ReactBits is exactly what you needed. What is ReactBits? It's an open-source collection of 80+ high-quality, animated, and fully customizable React components — text effects, background animations, interactive UI pieces, and more. All free. All beautiful. How to use it? Install any component in seconds via CLI using jsrepo or shadcn: npx jsrepo add [component-name] Each component comes with props for full customization — no black-box styling. You get the actual source code in your project, not a locked npm package. Why I love it: ✅ 80+ components — text, backgrounds, animations & more ✅ 4 style variants per component (fits any design system) ✅ Minimal dependencies — no bloat ✅ Drop-in ready for Vite, Next.js, or any React setup ✅ Actively growing — new components added every week This is the library I wish existed when I started building React apps. If you're a frontend dev who cares about craft — go check out reactbits.dev right now. Drop a comment if you're adding this to your next project!

You know useEffect. But how many of you have actually used useLayoutEffect? Most React devs haven't. I hadn't either, until a scroll bug forced me to understand the difference. useEffect runs after the browser paints. The user sees the old UI first, then the update happens. That flicker is small but on mobile it feels broken. useLayoutEffect runs after the DOM updates but before the browser paints. Same frame. No flicker. No jump. It is the right tool whenever your code needs to touch the DOM before the user sees it: - Scroll to a position after a state change - Measure an element's size or position and adjust layout - Synchronize animations that depend on DOM dimensions - Prevent flash of unstyled or mis-positioned content useEffect is fine for data fetching, subscriptions, logging. Anything that does not need to happen before the next paint. The rule is simple: if your side effect reads or writes the DOM and the user should never see the in-between state, reach for useLayoutEffect.

🚀 Just built an advanced Tic Tac Toe Game using HTML, CSS, and JavaScript! This project helped me dive deeper into DOM manipulation, event handling, and game logic implementation. 🎯 Key Features: Dynamic player name input Real-time turn-based gameplay Winner detection with result display Automatic disabling of board after win New Game & Reset functionality Fully responsive design for mobile devices 💡 Through this project, I improved my ability to handle user interaction, manage game state, and build interactive web applications. 🔗 Live Demo: https://lnkd.in/d829cDrB⁠� I’m currently focusing on strengthening my JavaScript and frontend development skills by building real-world projects. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css

A product page loads. Beautiful UI, polished animations… but it takes 5 seconds to become usable. Why? Because we ship JavaScript for everything, even parts that never needed it. This is the inefficiency most frontend systems quietly carry. Now consider a different approach, popularized by Astro. Render the majority of the page as pure HTML on the server. No hydration. No client-side overhead. Then selectively activate only the components that truly require interactivity, search, filters, dynamic widgets. Nothing more. The impact is immediate, smaller bundles, faster time-to-interactive, and significantly better performance on constrained devices. This isn't just an optimization. It's a shift in thinking. Instead of asking "what needs JavaScript?" Start asking "what doesn't?" That question alone can transform how we build for the web. #technology #astro #javascript #ui

You don't need to learn WebGL. You don't need a game dev background. You don't even need to be a developer. React Three Fiber lets you build 3D experiences using React — with JSX you already know (or can learn in a day). I used it to build my entire 3D portfolio: → Floating torus knot that follows your scroll → Scroll-driven section transitions → Custom cursor with hover effects → Ambient lighting + shadows And I'm not a developer. I'm a #marketingmanager who builds with Claude Code. Here's how to create your first 3D scene in 30 minutes: (swipe ↓) Step 1: Install React Three Fiber + Drei Step 2: Create the Canvas Step 3: Add your first 3D shape Step 4: Add lighting Step 5: Add orbit controls (rotate with mouse) Step 6: Animate it with useFrame Step 7: Add environment and shadows Step 8: Make it responsive Every step has the exact code. Save this and try it this weekend. What I'm building next with R3F: 🔹 3D hero section for a website redesign 🔹 Interactive product showcases 🔹 Scroll-driven 3D storytelling pages React Three Fiber turned me from "I don't know 3D" to "I ship 3D websites." If I can do it, you can too. What would YOU build in 3D? Drop it below 👇 — Follow me for daily tutorials on building with AI + modern web tech. No CS degree. Just Claude Code and curiosity. #ReactThreeFiber #ThreeJS #WebDev #3D #React #BuildInPublic #Tutorial #FrontendDev #CreativeCoding

Built an interactive 3D portfolio using React Three Fiber, GSAP, and Next.js 🚀 Recently pushed an update to improve the overall visual experience and make the scene feel more cinematic. What’s new: • Improved lighting setup with better contrast and rim light for depth 💡 • Added soft contact shadows to properly ground the model 🌑 • Introduced atmospheric fog for a more realistic sense of space 🌫️ • Subtle camera motion to make the scene feel alive 🎥 • Refined environment settings for better mood and background blending 🌅 Core features: • Scroll-driven sections controlling UI + 3D 🎯 • GLTF model integration using gltfjsx with animations 🧠 • GSAP-powered transitions across sections ⚡ Tech stack: React, Next.js, React Three Fiber, Drei, GSAP, Tailwind CSS What I learned: • Lighting and composition matter more than adding features • Small details like fog, shadows, and motion drastically improve realism • How to sync UI and 3D through a shared state system Still improving: • Camera choreography based on scroll • Section-based lighting transitions • Performance optimization This project is helping me understand how modern landing pages create immersive, interactive experiences. Would love feedback 🙌 #react #threejs #reactthreefiber #gsap #webdevelopment #frontend #javascript #nextjs #webgl #uiux #portfolio #developers

I’ve been refining my portfolio by focusing on micro-interactions and UI details that elevate the overall experience ✨ Instead of just building sections, I worked on making the interface feel more interactive and intentional 🎯 Here’s what I implemented: »Custom animated cursor with smooth trailing effect 🖱️ »Hover interactions and dynamic scaling for better feedback ⚡ »Custom sliders built from scratch (no default inputs) 🎚️ »Styled scrollbars with gradient + minimal design 🎨 »Animated skill section with staggered progress bars 📊 »Subtle motion using Framer Motion for smoother transitions 🎬 Integrated with a Three.js scene for a more immersive feel 🌐 The goal was simple: Move from “it works” → “it feels good to use” 🚀 Tech stack: React Tailwind CSS Framer Motion Three.js / React Three Fiber Still improving animations and planning to add more interaction between UI and 3D elements. Would appreciate any feedback 🙌 #frontend #webdevelopment #reactjs #threejs #javascript #tailwindcss #framermotion #uiux #webdesign #developers

I used useEffect… everywhere 😅 Until it caused a weird UI flicker I couldn’t explain. That’s when I learned the real difference 👇 👉 useEffect Runs AFTER the browser paints the screen Best for: API calls, logging, side effects 👉 useLayoutEffect Runs BEFORE the screen updates Best for: measuring DOM, fixing layout issues 💡 Real example: I was calculating an element’s width on load With useEffect → UI rendered first, then adjusted (flicker ⚡) With useLayoutEffect → no flicker, smooth UI ✅ ⚠️ But don’t overuse it — it can block rendering and slow your app That one small change improved my UI a lot. Have you faced this issue before? 👇 #reactjs #frontend #webdevelopment #javascript

Small wins matter. 🎯 I built StyleSnap — a Chrome extension that lets you hover over any element on any webpage and instantly inspect its CSS. No DevTools gymnastics. No setup. Just hover and see. It also lets you copy styles as CSS, Tailwind, SCSS, or JS objects with one click — and even export full components as React, Vue, or HTML+CSS. Today it crossed 29 installs — all organic. No paid ads, no influencer shoutouts. Just people discovering it and finding it useful. 🚀 29 might sound like a small number, but knowing that real developers out there searched for a tool like this, found StyleSnap, and decided to install it? That's a genuinely great feeling. Every builder remembers their first users. These are mine. 💙 If you work with CSS and want a faster way to inspect and grab styles, give it a try — it's free 👇 https://lnkd.in/gzH6rGrc #buildinpublic #chromeextension #css #webdevelopment #indiedev #frontend #code #ai #ui #uiux #design #web

🚀 Just launched my latest project: Hand Betting Game - a Mahjong tile betting game! The Challenge: Build a strategic betting game where special tiles (Dragons/Winds) dynamically change values based on wins/losses, all while keeping the UI smooth and responsive. The Result: ✅ 1000+ lines of TypeScript ✅ Real-time leaderboard with Supabase ✅ Smooth animations with Framer Motion ✅ Fully responsive (mobile → tablet → desktop) ✅ Live on Vercel Tech Stack: Next.js 14 (App Router) TypeScript Tailwind CSS Supabase (PostgreSQL) Framer Motion Lucide Icons Timeline: Completed within 4 days How I Built It: Handwritten by me: Core game logic & betting mechanics Tile value mutation system (non-number tiles change strategically) Game state management Responsive 3-column layout AI-Assisted (Claude/ChatGPT): Project scaffolding TypeScript type definitions Animation implementation UI polish & pagination Key Features: Start with 1000 points, bet higher/lower on Mahjong hands Win → add hand value | Lose → subtract hand value Game ends when any tile hits 0 or 10 (or 3 reshuffles) Top 5 leaderboard + paginated all-scores view Color-coded scores with progress bars Live Demo: https://lnkd.in/dugbTKF6 GitHub: https://lnkd.in/dngx8Vvj Video Walkthrough: https://lnkd.in/dKA4Zv6e This was a fun challenge that tested my ability to balance complex game logic with a polished user experience. The dynamic tile values add real strategic depth - you're not just guessing, you're tracking how each tile evolves! Open to feedback and connections! 🙌 #NextJS #TypeScript #Supabase #WebDevelopment #GameDev #Mahjong #React #TailwindCSS #FullStack