Portal Button

NewPremium

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

buttonsportalvortexclickanimationcanvas

Installation

Terminalbash

npx motion-primitives-website add portal-button

portal-button.tsxtsx

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

<PortalButton portalColor="#06b6d4">
  Enter Portal
</PortalButton>

Prop	Type	Default	Description
children*	ReactNode	—	Button content
portalColor	string	#6366f1	Portal color (hex)
className	string	—	Additional CSS classes
onClick	() => void	—	Click handler

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

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

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

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