Every AI coding agent defaults to the same icon library. That is why every website looks identical right now. Claude, Codex, Cursor, Replit. They all reach for Lucide Icons by default. Same sparkles, same zap bolt, same stars on every project. Visitors notice even if they cannot explain why. Lucide also only offers outline style. No filled, no solid, no duotone. Here are 3 packs that fix this in under 60 seconds. 1. Huge Icons 51,000 icons across 10 visual styles. Stroke, solid, twotone, duotone, bulk, rounded and more from a single library. Visual hierarchy through icon style not just size and color. Install: pnpm add @hugeicons/react 2. Hero Icons 316 hand-crafted icons by the Tailwind Labs team. Every icon drawn by hand, every size variant independently optimized for its pixel grid. Built specifically for Tailwind CSS. Install: pnpm add @heroicons/react 3. Phosphor Icons 9,072 icons with 6 weights per icon. Thin, light, regular, bold, fill and duotone. Switch weights with a single prop. No hunting for separate files. Install: pnpm add @phosphor-icons/react Simple rule: Tailwind project? Hero Icons. Need maximum variety? Huge Icons. Need weight flexibility? Phosphor. Save this for your next build and share it with a developer still shipping Lucide on everything. Which one are you switching to first? 👇 #WebDevelopment #UIDesign #React #TailwindCSS #AITools #FrontendDevelopment #Coding

Building "Bloom": How to turn a static UI into a living, breathing ecosystem. 🌿 I recently wrapped up the frontend development for Bloom, an AI plant and floral design platform. The goal wasn't just to make it look good—it had to feel tactile, cinematic, and premium. Here is how we pushed it to the next level: ✨ Liquid Glassmorphism: Built a custom 2-tier glass effect using strict grayscale HSL values, SVG noise textures, and complex gradient masking. 🚀 The Botanical Boot Sequence: Replaced the standard loading bar with an immersive HUD that tracks latency/memory, ending in an iridescent SVG portal wipe that reveals the looping video background. 🧲 Fluid Physics: Built a custom, physics-based cursor that intelligently morphs and blends using Framer Motion. The tech stack: React, Tailwind CSS, and Framer Motion. Check out the Live website below to see the micro-interactions and staggered entry animations in action. Let me know what you think of the preloader! 👇 https://lnkd.in/dXq2Mj8Y #FrontendDevelopment #UIUX #WebDesign #React #FramerMotion #CreativeCoding #WebDevelopment Contra React Framer

Post Headline: 📱✨ Beyond Glassmorphism: Master the "Liquid Glass" UI in React Native As React Native developers, we are always pushing the boundaries of mobile UI. We’ve mastered flat design, neumorphism, and the frosted depth of glassmorphism. But what if your interface could feel more fluid, organic, and physically reactive? Welcome to the Liquid Glass Method. While standard glassmorphism uses background blurs and borders to simulate depth, "Liquid Glass" focuses on simulating viscosity and dynamic refraction. It transforms your UI components from static windows into interactive, translucent materials that respond to touch and light like a viscous fluid. Here are 3 fundamental principles to achieve this effect in React Native, while maintaining optimal performance: 🎨 1. Dynamic Refraction Simulation Static blur is not enough. To simulate "liquid," you must distort the content behind the glass dynamically based on the component's movement or touch interaction. In React Native, this requires clever manipulation of image assets or utilizing advanced Skia shaders to skew and warp the background coordinates in real-time. 💡 2. Specular Highlights & Depth Matching Liquid reflects light intensely. Instead of a simple uniform border, use multiple subtle linear gradients or MaskedView to create sharp, concentrated highlights that shift across the object’s edge, giving it 3D roundness. Match this with complex shadowOffset and depth layers to make the component look truly suspended. ⚡ 3. Performance & Texture management This is where developers get stuck! Achieving fluid liquid effects can cripple JS performance. Do not: Recalculate Gaussian blurs on the main thread during interaction. Do: Use libraries like react-native-skia to offload complex shader rendering to the GPU, keeping your animations locked at 60 FPS. If Skia is unavailable, pre-render static textures and manipulate their opacity/offset using the Animated API with native drivers. We are shifting from designing static layouts to engineering digital materials. The Liquid Glass Method requires a blend of creative physics and raw performance engineering. Have you experimented with advanced material rendering in your apps? What tools are you using to achieve complex refraction without sacrificing performance? Let’s discuss below. 👇 #ReactNative #MobileDev #UIUX #Glassmorphism #Skia #AppDesign #FrontendEngineering #LiquidGlassDesign

20+ animated UI components with a live playground 🎨🧩 A production-ready component library where every component has spring physics, real-time prop editing, and copyable code — all in one interactive showcase. What's inside 👇 🧲 Magnetic Button — pulls toward cursor with spring physics 🪟 Spring Modal — scale entry with backdrop blur 🔔 Toast Notifications — stack, swipe to dismiss, auto-progress bar 📂 Accordion + Tabs + Dropdown — sliding indicators with `layoutId` 💬 Tooltip + Command Palette — Cmd+K with fuzzy search 🎚️ Toggle Switch + Progress Bar + Stepper 🃏 3D Tilt Card — perspective transform tracking mouse position 🗄️ Drawer with swipe gesture 🧑🤝🧑 Avatar Group with hover expansion ⭐ Rating Stars + Pagination + File Upload (with drag zone pulse) But the real centerpiece is the playground 👇 🎛️ Live prop editor — toggle booleans, drag sliders, pick colors, switch variants — components hot-reload as you tweak 📋 Code snippet panel — Shiki syntax highlighting + one-click copy 👁️ Responsive preview — mobile / tablet / desktop modes 🌗 Dark/light theme toggle that affects the preview live 🔍 Sidebar with fuzzy search and category grouping (Basic, Input, Feedback, Layout, Navigation) Every component is built with Radix UI primitives underneath for accessibility — proper ARIA, keyboard navigation, focus management, and `prefers-reduced-motion` support out of the box. Animations run on GPU-accelerated transforms only (translate, scale, opacity) — no layout thrashing, smooth 60fps even on lower-end devices. ⚙️ Next.js • TypeScript • Framer Motion • GSAP • Radix UI • Tailwind CSS • Shiki Built with Claude Code 🤖 🔗 https://lnkd.in/gyY5jp5U 🌐 https://lnkd.in/g9ekEPiY #FrontendDevelopment #DesignSystems #UIComponents #FramerMotion #BuildInPublic

🚀 I am pleased to share my recent project — a real-time hand tracking application built entirely for the web, enabling users to interact with dynamic visual elements using natural hand gestures. 🚀 This project focuses on combining computer vision with frontend development to create an intuitive, responsive and immersive user experience directly in the browser. Key Features • Real-Time Hand Detection Accurate tracking of multiple hands using live webcam input • Gesture Recognition Identification of gestures such as open hand, fist and pinch, with real-time response • Interactive Visual System Dynamic particle effects, gesture-based interactions, and visually rich themes including Rainbow, Cyberpunk, Lava, Ocean and Galaxy • Performance Optimization Smooth rendering with stable frame rates for a seamless experience • Browser-Based Implementation No external installations required; runs entirely on modern web browsers Technology Stack • JavaScript • HTML5 Canvas • MediaPipeline (Hand Tracking Model) • OpenCV • Web APIs for camera access and rendering optimization Key Learnings This project helped me strengthen my understanding of: • Real-time gesture mapping and coordinate transformations • Efficient rendering loops and performance tuning • Designing interactive and visually engaging interfaces • Integrating computer vision models into frontend applications Objective The goal of this project was to explore how natural human gestures can be used as an alternative input method, contributing to more intuitive and immersive digital interactions. This work represents a step toward browser-based AR/VR-like experiences. Future Scope • Gesture-controlled interactive games • Integration of audio-reactive visual systems • Multi-user collaborative interaction environments Live Demo: https://lnkd.in/gZpcAViP GitHub repo: https://lnkd.in/g9RfkjaE #WebDevelopment #JavaScript #ComputerVision #HandTracking #FrontendDevelopment #CreativeCoding #TechProjects #Innovation

Building fadedvisuals: A Technical Deep Dive into Modern Creative Design I’ve always believed that the process is just as important as the final product. Over the past few months, I’ve been building the new digital home for fadedvisuals, and it’s finally ready to share. This wasn't just about creating a portfolio; it was about building a high-performance bridge between creative design and modern engineering. Here is a look at the stack behind the site: The Architecture Frontend: Built with React and Tailwind CSS. I wanted a "quiet luxury" aesthetic—editorial layouts with fluid responsiveness. Tailwind allowed for that precise, granular control over typography and spacing without the overhead. Backend: Powered by FastAPI. I chose this for its speed and the robust nature of Python, ensuring the data structure for my branding and service packages remains scalable. State Management & Logic: Focused on a clean, modular structure to reflect the way I approach branding projects—logic first, pixels second. The Innovation vs. Reality Check One of the most exciting parts of this build was integrating a local AI assistant using Ollama. I successfully developed a custom chat feature to help users navigate my services and design philosophy in real-time. However, as a developer, you eventually hit the "resource wall." Due to the infrastructure costs and server requirements needed to host a high-performing LLM at scale, I’ve decided to keep the AI component in the "Lab" for now rather than the final production build. It was a tough call, but part of Building in Public is being honest about the trade-offs between ambition and budget. The site is now live, representing a blend of my work as a digital artist and a full-stack developer. LINK in the comment section #FullStackDevelopment #WebDesign #ReactJS #FastAPI #TailwindCSS #UIUX #BuildingInPublic #CreativeDirector #DigitalArt #TechInnovation #Ollama #SoftwareEngineering

Have you ever wanted to bridge the gap between a real-world physical puzzle and an interactive 3D environment? 🧊✨ I’ve just rolled out a massive update to the Rubik’s Cube engine inside our 3D design workspace! It’s no longer just a visual toy that remembers how you scrambled it—it’s now mathematically aware and capable of true algorithmic problem-solving. Here are the powerful new capabilities we just added: 🧩 Real-World Synchronization ( Got a scrambled Rubik's cube on your desk? You can now map its exact layout to our 3D model instantly using a 54-character string block. The virtual cube will dynamically repaint itself to match your physical puzzle perfectly. 🤖 Mathematical Solving using Kociemba's Algorithm ( Instead of just "rewinding" a digital scramble, the engine now utilizes Kociemba's Two-Phase Algorithm (via cubejs) to calculate the optimal path out of any arbitrary state. Feed it a scrambled cube, and it will discover the sequence and animate the mechanical solution step-by-step! 📜 Full Sequence Execution ( Want to test out a specific algorithm or pattern? You can now type full sequences using standard Singmaster notation (e.g., /rubiks sequence @Cube R U R' U' R' F R2 U' R' U' R U R' F') and watch the 3D model execute the entire chain seamlessly. Whether you're an algorithm enthusiast, a speedcuber, or just someone who loves interactive 3D coding, the latest solver update has something incredibly fun to offer. Check it out, map your physical cube, and let the algorithm show you the way home! 👇 https://lnkd.in/dYkCMNRJ #3DModeling #RubiksCube #Engineering #ThreeJS #JavaScript #Algorithms #SoftwareDevelopment #TechInnovation

Mastering CSS: How to Set Background Opacity Without Breaking UX Directly applying the opacity property to a parent container is a common pitfall in web development. It forces the entire node tree—including text and CTA buttons—to become transparent, which often violates WCAG accessibility standards and kills your conversion rates. In professional UI development, the goal is Layer Isolation: keeping the background atmospheric while ensuring the content remains 100% crisp. The Solution: Isolated Pseudo-layers Instead of affecting the whole DOM node, we decouple the background’s visual weight from the content using the ::before pseudo-element. Implementation Strategy: css /* 1. Positioning Context */ .hero-section { position: relative; background-color: #0d0d0d; /* Provides a solid tint base */ overflow: hidden; } /* 2. Isolated Background Layer */ .hero-section::before { content: ""; position: absolute; inset: 0; /* Modern shorthand for top/left/right/bottom: 0 */ background: url('hero-bg.webp') center/cover no-repeat; opacity: 0.4; /* Adjusted independently of the text */ z-index: 1; } /* 3. Elevating the Content */ .hero-content { position: relative; z-index: 2; /* Ensures text stays above the background layer */ } Используйте код с осторожностью. Why this is the Industry Standard: Accessibility First: Maintains maximum contrast ratio for typography, ensuring readability across all devices. Performance: Transitions or animations on isolated layers (like opacity or transform) are better handled by the GPU, resulting in smoother 60fps effects. Clean Architecture: Keeps HTML lean by avoiding unnecessary "wrapper" divs for background images. Pro Tip: For an even more premium feel, combine this with backdrop-filter: blur(8px) to create a sophisticated glassmorphism effect without sacrificing performance. How do you handle complex layering in your projects? Let’s discuss in the comments. #WebDevelopment #CSS #FrontendArchitecture #UIUX #LinkedInLearning #CleanCode

The moodboard that used to take hours? Now takes 1–2 minutes. I built an AI Moodboard Generator through vibe coding using Claude Code. Here’s how it works: User input → Server builds prompts → AI generates images → Poll until done → Display Behind the scenes, the system creates 4 distinct visual directions: 1. Hero Concept – homepage look & feel 2. Color Story – palette visualization 3. Product Layout – showcase structure 4. Typography Study – font & brand identity Each prompt is sent to Kie.ai (nano-banana-2), which generates the visuals and returns a taskId for tracking until everything is ready. Tech stack: 1. Frontend: HTML / CSS / JS 2. Backend: Vercel Serverless Functions 3. Image AI: Kie.ai API (nano-banana-2) 4. No database — fully real-time No more spending hours digging through Pinterest or hunting for the right open-source images. Just input → generate → refine. Comment or DM me if you want to try it. #Claude #ClaudeCode #VibeCoding #Marketing #DigitalMarketing

🚀 Built an AI-Powered Air Drawing System using Hand Tracking ✋🎨 Just finished developing a real-time drawing app where you can draw in the air using your fingers — no mouse, no touch! 💡 How it works: Using computer vision, the system tracks hand landmarks and converts finger movement into drawing strokes on a canvas. 🔧 Tech Stack: • React + Next.js • MediaPipe Hands • HTML5 Canvas ✨ Key Features: • ✍️ Draw using your index finger • 🎨 Change brush colors (red, blue, green, black) • ✌️ Gesture-based eraser (two fingers up) • 🧽 Clear canvas • 💾 Save drawing as image • ⚡ Smooth real-time rendering 🧠 This project helped me explore: • Real-time hand tracking • Gesture recognition • Canvas-based drawing systems • Interactive UI with React Excited to keep improving this with more advanced gesture controls and features 🚀 #React #NextJS #ComputerVision #MediaPipe #JavaScript #WebDevelopment #AI #OpenCV #FrontendDevelopment