Animated star rating component for Framer with half-star support, wave fill animation, color range, glow effect, size presets, rating bar, and demo panel. Fully keyboard accessible. Ideal for product pages, e-commerce, feedback, content ratings, and apps.
Live Preview: https://ratingstarspro.framer.website/
Rating Stars Pro
Rating Stars Pro is a fully animated, accessible star rating component for Framer. Click any star to set a rating with smooth fill and burst animations, wave cascade effects, dynamic color range and optional glow. Includes an interactive demo panel for showcasing every feature in real time.
Animated star fill — each star animates on click with a spring bounce and burst particle effect for satisfying feedback
Wave fill mode — stars cascade one by one with a stagger delay instead of filling all at once, for a cinematic feel
Half-star support — hover left or right on any star to select precise half ratings with gradient SVG rendering
Color range — fill color interpolates from red to yellow to green based on the rating, ideal for NPS and feedback forms
Glow effect — optional drop-shadow glow on filled stars, color-matched to the current fill for dark UI and gaming contexts
5 size presets — XS / SM / MD / LG / XL instant presets plus a custom pixel input for exact sizing
Label styles — display the rating as a score (4.5), fraction (4.5 / 5), percentage (90%) or text (Excellent)
Label position — place the label to the right, left, top or bottom of the stars with a single toggle
Rating bar — optional animated progress bar below the stars that fills proportionally to the rating
Review count — show a formatted review count alongside the label, e.g. 4.5 (1,284)
Demo mode — a floating control panel lets you toggle size, glow, label, style, bar, animation and dark/light theme live on the canvas
Dark / Light theme — demo mode background switches between pure black and white with a smooth transition
Read-only mode — disable interaction for display-only use cases like product cards and review summaries
Keyboard accessible — full ARIA slider with arrow key navigation, Home and End support, screen reader friendly
Works out of the box — 3-star default, 5-star max, yellow fill, wave off; change anything from the property panel
What's Included
1 Framer component file (ratingStarsPro.tsx)
8 live demo panel controls (Size, Glow, Label, Style, Bar, Anim, Wave, Theme)
5 label display modes: Score, Fraction, Percent, Text, + Review Count
5 size presets: XS (20px) → XL (72px) + Custom
Color Range mode with 3 configurable color stops
Glow effect with adjustable intensity
Wave fill animation with per-star stagger delay
Rating bar with animated fill
Full ARIA slider with keyboard navigation
Read-only display mode
Dark and Light demo backgrounds
How It Works
Drop the component onto your Framer canvas — it renders immediately with a 3-star default rating. Open the property panel to configure colors, size, label style and animation. Enable Demo Mode to reveal the floating control panel and explore every feature interactively without touching the properties panel. Toggle Color Range to switch from a fixed fill color to a red-yellow-green gradient that responds to the rating in real time. Turn on Glow to add a color-matched drop-shadow to filled stars. Select Wave fill style to make stars animate in sequence rather than all at once. Connect the onRatingChange event to a Framer variable to pass the selected value to other components on the page.
Use Cases
E-commerce — product rating display on listing cards and detail pages
User feedback forms — NPS surveys and post-purchase review flows
Movie & content ratings — streaming UI, editorial review scores
App store UI — app rating summaries with review count
Dashboard widgets — satisfaction scores and KPI indicators
Agency & portfolio sites — interactive demos and case study metrics
SaaS onboarding — feature rating and user satisfaction checkpoints
Keywords
star rating rating component review stars animated stars interactive rating half star wave animation glow effect color range NPS feedback form product rating framer component rating bar accessible keyboard navigation ecommerce dashboard read only demo mode dark mode light mode score label review count size presets
Ahmet Loca
