Warp Button - glsilk

Install the shader dependency

npm install @paper-design/shaders-react

Add the component

npx shadcn@latest add https://glsilk.vercel.app/r/warp-button.json

Quick Start

app/page.tsx

import { WarpButton } from "@/components/ui/warp-button";

export default function Home() {
  return (
    <div>
      <WarpButton>Warp Button</WarpButton>
    </div>
  );
}

Default Colors: The warp button now comes with a beautiful teal color scheme by default, featuring deep slate and vibrant teal tones that work well in both light and dark modes.

Examples

Default

Open in

<WarpButton>Warp Button</WarpButton>

High Distortion Effect

Open in

<WarpButton
  colors={["#ff0080", "#ff4000", "#ff8000", "#ffb000"]}
  distortion={0.8}
  swirl={1.5}
  speed={2}
  textClassName="text-white"
>
  High Distortion
</WarpButton>

Subtle Warp Effect

Open in

<WarpButton
  colors={["#2196f3", "#00bcd4", "#009688", "#4caf50"]}
  distortion={0.1}
  swirl={0.3}
  speed={0.5}
  textClassName="text-white"
>
  Subtle Warp
</WarpButton>

Custom Shape Patterns

Open in

<WarpButton
  colors={["#ffffff", "#000000"]}
  shape="stripes"
  shapeScale={0.2}
  distortion={0.4}
  swirl={0.8}
  textClassName="text-black"
>
  Stripes Pattern
</WarpButton>

Ink Effect

Open in

Note: This ink effect uses a black and white color scheme that works well in both light and dark modes. The white text ensures readability across different themes.

<WarpButton
  colors={["#101213", "#9fadaa", "#f3fee7", "#f3fee7"]}
  proportion={0.05}
  softness={0}
  distortion={0.25}
  swirl={0.8}
  swirlIterations={10}
  shape="checks"
  shapeScale={0.28}
  speed={2.5}
  scale={1.2}
  rotation={44}
  textClassName="text-white"
>
  Ink Warp
</WarpButton>

Text Customization

Open in

<WarpButton textClassName="text-white mix-blend-difference">
  Inverted Text
</WarpButton>

Advanced Text Effects

Use the textClassName prop for custom text styling:

<WarpButton textClassName="text-white mix-blend-difference">
  Inverted Text
</WarpButton>

API Reference

Prop

Type

Credits

Website: paper-design.com
GitHub: paper-design/shaders