EmojiRating — nteractive, animated emoji rating.

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.