CrystalMesh Gradient

CrystalMesh Gradient
CrystalMesh Gradient

About CrystalMesh Gradient

Elevate your website with Crystal Mesh Gradient, a high-performance generative background that combines low-poly aesthetics with a dynamic plexus network. This component renders floating geometric shards and connected nodes using HTML5 Canvas, ensuring buttery-smooth performance even on mobile devices.

It creates a sophisticated, "tech-savvy" atmosphere, making it the ideal choice for crypto platforms, AI startups, and modern portfolios. Choose from beautiful built-in presets like "Neon Night" and "Ocean Blue," or fully customize the palette to match your brand identity.

Functions (Key Features):

  • 💎 Dual Effect: Combines semi-transparent crystal shards (triangles) with a connected line network (plexus).

  • 🎨 Theme Presets: Includes 6 ready-to-use themes (Neon, Ocean, Sunset, Forest, Royal) plus a Custom mode.

  • ⚡ Canvas Rendering: Built on the HTML Canvas API for ultra-fast, lag-free animation compared to heavy video files.

  • 🎛️ Adjustable Complexity: Control the Density to make the mesh sparse and clean, or dense and complex.

  • 🚀 Custom Motion: Tweak the animation Speed to create a calm ambient effect or a high-energy background.

How to Use:

  1. Insert: Drag the Crystal Mesh Gradient component onto your canvas.

  2. Sizing: Set Width and Height to "Fill" (100%) to cover the entire section.

  3. Theme: In the properties panel, select a Theme (e.g., "Neon Night"). If you want specific colors, switch to "Custom".

  4. Customize: If using "Custom", pick your Start/End Colors for the gradient and the Line/Shard Colors.

  5. Fine Tune: Adjust Density (try 6-8 for balanced looks) and Speed (0.1 for slow, 1 for fast) to suit your vibe.

From Sirrah Space

React Particles
Particle Globe 3D
Fluid Scroll Mesh
Scroll Glass Grid

Related Components

Vertical Grid Lines
Interactive Pattern
PixelPattern
Wave Background 3D