Ink Bleed Button

NewPremium

Click triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.

buttonsfluidinkclickcanvasorganic

Installation

Terminalbash

npx motioncraft add ink-bleed-button

Usage

ink-bleed-button.tsxtsx

import { InkBleedButton } from "@/components/buttons/premium-buttons";

<InkBleedButton inkColor="rgba(236, 72, 153, 0.8)">
  Create
</InkBleedButton>

Props

Prop	Type	Default	Description
children*	ReactNode	—	Button content
inkColor	string	rgba(99, 102, 241, 0.8)	Ink color (rgba format)
className	string	—	Additional CSS classes
onClick	() => void	—	Click handler

Related Components

Portal Button

New

Click tears open a spiraling vortex/wormhole from the click point. Organic distorted rings with center glow.

Shader Distortion Button

New

WebGL-powered button with GPU-computed water-warp distortion on hover. Real-time ripple displacement mapping.

Cloth Button

New

Button surface simulates fabric using verlet integration physics. Cursor pushes dents into the cloth mesh.

Swarm Button

New

Text rendered as particle swarm that scatters on hover and reforms using boid flocking behavior.