Components
Loading preview...
A minimal emoji rating component with smooth blur/scale text transitions and grayscale-to-color hover effects.
@jatin-yadav05
npx shadcn@latest add https://21st.dev/r/jatin-yadav05/emoji-ratingimport { RatingInteraction } from "@/components/ui/emoji-rating"
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-background p-8 w-full">
<div className="flex flex-col items-center gap-8">
<p className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground/60">
How was your experience?
</p>
<RatingInteraction />
<div className="mt-4 h-px w-24 bg-gradient-to-r from-transparent via-border to-transparent" />
</div>
</main>
)
}