A production-ready Framer code component that delivers a smooth, animated star rating interface with dark mode support and complete customization options.
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
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
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
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
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
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
Mohd Qasim
