⭐ 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 – 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 previews rating, fills up to cursor
• Single-Line Layout – Always stays in one row
• Fast Response – 150ms animation feedback
• Click to Select – Click to rate, click again to deselect
• Touch-Friendly – Mobile optimized

🌓 Dark Mode Toggle

• Built-in Switch – Top-right toggle
• Sun/Moon Icons – Clear indicators
• Show/Hide Option – Via property controls
• Smooth Transitions – 300ms background fade

📱 Responsive Design

• Fully Adaptive – Desktop, tablet, mobile
• User Resizable – Drag to resize
• No Breakpoints Needed – Auto scaling
• Flexible Layout – Fills parent container

🎛️ 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 – Smooth spring animations
• SVG Stars – Crisp at any resolution
• TypeScript Ready – Full type safety
• Property Panel – Framer UI controls
• Zero Dependencies – React + Framer Motion