Mesh Gradient Shader

A flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@paper-design/shaders-react, motion

Install

npx shadcn@latest add @sona-ui/mesh-gradient-shader

Files

• src/registry/sonaui/mesh-gradient-shader/mesh-gradient-shader.tsx
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Backdrop Components
• React Backdrop Components
• Tailwind CSS Backdrop Components
• Animated Backdrop Components
• Gradient Background Components
• React Gradient Background Components
• Tailwind CSS Gradient Background Components
• Mesh Gradient Components
• Tailwind CSS Mesh Gradient Components
• Shader Background Components
• React Shader Background Components
• Tailwind CSS Shader Background Components

More from Sona UI

• Dot Orbit Shader
• Accordion
• Activity Graph
• Animated Checkbox
• Animated Dialog
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Animated Tabs
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton