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.

Preview

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

Attributes

Installation

pnpm dlx motion-blocks add plasma-grid

npx motion-blocks add plasma-grid

bunx --bun motion-blocks add plasma-grid

yarn 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]"/>

import "@/components/motion-blocks/plasma-grid-element.ts"; export default function Page() {  return (    <motion-plasma-grid      color="#17181A"      highlight-color="#FF6900"      speed={0.5}      className="w-full h-[500px]"    />  );}

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

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

<script type="module" src="/components/motion-blocks/plasma-grid-element.js"></script> <motion-plasma-grid  color="#17181A"  highlight-color="#FF6900"  speed="0.5"  class="w-full h-[500px]"/>

API Reference

Attribute	Type	Default
`color`	`string`	`#17181A`
`highlight-color`	`string`	`#FF6900`
`speed`	`number`	`0.5`