Motion Blocks

Canvas

Plasma Grid

Animated plasma grid effect rendered in WebGL. Creates a checkerboard grid pattern with flowing plasma noise gradients. Colors are customizable via props.

  • lit Preview of https://lit.devLitSimple. Fast. Web Components.
  • ogl Preview of https://github.com/oframe/oglOGLMinimal WebGL framework.

Preview

Animated plasma grid effect — a checkerboard grid pattern with flowing plasma noise gradients.
Attributes

Installation

pnpm dlx motion-blocks add plasma-grid

Usage

---import "@/components/motion-blocks/plasma-grid-element.ts";--- <motion-plasma-grid  color="#17181A"  highlight-color="#FF6900"  speed={0.5}  class="w-full h-[500px]"/>

API Reference

Attribute Type Default
color The base background color of the effect. string #17181A
highlight-color The color used for the plasma noise gradients. string #FF6900
speed Animation speed multiplier. Higher values make the plasma flow faster. number 0.5