Rating Stars

⭐ 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