EmojiRating
Interactive, animated emoji rating component for Framer. Features custom fonts & colors, smooth transitions, and built-in webhook support for instant data collection.
Make it with Workshop
Build your own component with AI
About this Component
The Emoji Rating component is a polished, production-ready UI element designed to capture user sentiment with a high-quality aesthetic. Built specifically for Framer using React and Framer Motion, it replicates the modern feel of Shadcn/Tailwind interfaces without requiring external dependencies.
Key Features:
Rich Interactivity: Features smooth, spring-loaded animations where emojis scale and transition from grayscale to vibrant, specific colors (e.g., Red for "Terrible", Green for "Amazing") upon hover and selection.
Smart Typography: Utilizes AnimatePresence to ensure label text ("Rate us" vs. "Good") transitions seamlessly without overlapping or layout shifts.
Full Customization: Equipped with extensive Property Controls, allowing you to adjust fonts (Family, Weight, Size), colors (Header, Placeholder, Active Text), and spacing directly from the Framer sidebar.
Data-First Architecture: Unlike purely visual components, this includes a Webhook URL property. Simply paste a Zapier or API endpoint to instantly send user ratings, labels, and page URLs to your database or Slack channel—no code overrides required.
