Shockwave Click
NewPro
An expanding ring that bends the content under it where clicked, using an SVG displacement filter with a CSS fallback.
Customize
26px
460px
1.1s
#ff784f
Mode
When to use it
- Big moments in a game menu, such as starting a match or a boss reveal
- The call to action of a launch or campaign page
- Unlocks and rewards, fired from code with the ref
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 283
Installation
Shockwave Click is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy shockwave-click.tsx into components/ui.
Usage
import { ShockwaveClick } from "@/components/ui/shockwave-click";
<ShockwaveClick strength={26} className="rounded-3xl">
<section className="p-10">Season 4 is live</section>
</ShockwaveClick>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content that bends. Put the size on className. |
| strength | number | 26 | How far the content bends under the ring, in pixels. |
| radius | number | 460 | How far the ring travels from the click, in pixels. |
| duration | number | 1.1 | Length of one wave, in seconds. |
| color | string | "#ff784f" | Color of the visible ring. |
| mode | "auto" | "filter" | "css" | "auto" | "filter" bends the content with an SVG filter, "css" uses the fallback, "auto" uses the fallback on Safari and iOS only. |
| fireOnClick | boolean | true | Fire on every click inside the area. Turn off to fire only from code. |
| ref | Ref<ShockwaveClickHandle> | — | fire(x, y) fires a wave at a viewport position, or from the center without one. |
| className | string | — | Extra classes for the area. |