Rating Stars

Beautiful animated star rating component

Use code NEW10 to receive 10% off on all my components. ⭐ Overview A production-ready Framer code component that delivers a smooth, animated star rating interface with dark mode support and complete customization options. 🎨 Visual Features Dotted Star Outlines - Empty stars display with elegant dotted borders Yellow Fill Color - Bright golden stars (#fbbf24) on selection Dark Mode by Default - Launches with sleek dark background (#1a1a1a) Smooth Animations - 135% scale on hover, 125% on click with bouncy easing Shadow Effects - Subtle golden glow on selected stars 🎯 Interactive Behavior Progressive Fill - Hover to preview rating, all stars up to cursor fill Single-Line Layout - Stars stay in one horizontal row at all sizes Fast Response - 150ms animations for instant feedback Click to Select - Rate with a click, click again to deselect Touch-Friendly - Optimized for mobile devices 🌓 Dark Mode Toggle Built-in Switch - Toggle button in top-right corner Sun/Moon Icons - Clear visual indicators Show/Hide Option - Removable via property controls Smooth Transitions - 300ms background color fade 📱 Responsive Design Fully Adaptive - Works on desktop, tablet, and mobile User Resizable - Drag handles to adjust container size No Breakpoints Needed - Automatically scales to any screen Flexible Layout - Fills parent container perfectly 🎛️ Customization Controls Star Options - Count (1-10), size (20-100px), spacing (4-40px) Colors - Background, dark background, outline, fill, stroke Styling - Border radius (0-50px), stroke width (1-4px), padding Defaults - Pre-selected star index, dark mode toggle visibility ✨ Technical Highlights Framer Motion - Buttery-smooth spring animations SVG Stars - Crisp at any resolution TypeScript Ready - Full type safety Property Panel - All settings accessible in Framer UI Zero Dependencies - Just React and Framer Motion

Beautiful animated star rating component