Components
Loading preview...
Add beautiful, performant ripple animations to any React element with zero configuration. Ripple Effect Generator brings Material Design's signature touch feedback to your components with intelligent sizing that ensures perfect coverage from any click point. This component can create a customized ripple effect on anything
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/ripple-effect-creator// app/ripple-demo/page.tsx
"use client";
import React, { useState } from 'react';
import { RippleEffect } from "@/components/ui/ripple-effect-creator";
const ShowcaseContainer = ({ children }: { children: ReactNode }) => (
<div className="min-h-screen w-screen flex items-center justify-center border-b border-gray-700">
{children}
</div>
);
export default function RippleShowcasePage() {
return (
<div className="dark">
<ShowcaseContainer>
<RippleEffect rippleColor="#030303">
<button className="px-10 py-5 text-xl font-bold text-white bg-blue-600 rounded-xl shadow-lg">
Standard Button
</button>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect>
<a href="#" onClick={e=>e.preventDefault()} className="inline-block px-12 py-5 text-xl font-bold text-white bg-teal-500 rounded-full shadow-lg hover:bg-teal-600 transform hover:scale-105 transition-transform">
Pill-Shaped Link
</a>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect>
<img
src="https://i.pravatar.cc/250?img=35"
alt="Avatar"
className="w-48 h-48 rounded-full object-cover shadow-2xl cursor-pointer border-4 border-gray-600 transform hover:scale-105 transition-transform"
/>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect>
<div className="w-[400px] h-[300px] bg-indigo-600 text-white rounded-2xl flex flex-col items-center justify-center cursor-pointer shadow-xl transform transition-transform">
<p className="font-bold text-3xl">Interactive Card</p>
<p className="text-lg opacity-80">(a div element)</p>
</div>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect rippleColor="#FBFF01">
<button className="px-10 py-5 text-xl font-bold text-white bg-purple-600 rounded-xl shadow-lg">
Custom Ripple yellow color
</button>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect rippleDuration={2000}>
<button className="px-10 py-5 text-xl font-bold text-white bg-green-600 rounded-xl shadow-lg hover:bg-green-700 transform hover:scale-105 transition-transform">
Slow Duration (2s)
</button>
</RippleEffect>
</ShowcaseContainer>
<ShowcaseContainer>
<RippleEffect disabled>
<button className="px-10 py-5 text-xl font-bold text-white bg-gray-500 rounded-xl cursor-not-allowed opacity-70">
Disabled
</button>
</RippleEffect>
</ShowcaseContainer>
</div>
);
}