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 shadcn@latest add https://motion-kit-astro.vercel.app/r/plasma-grid.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/plasma-grid.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/plasma-grid.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/plasma-grid.json

Usage

---
import "@/components/motion-kit/plasma-grid-element.ts";
---

<motion-plasma-grid
  color="#17181A"
  highlight-color="#FF6900"
  speed={0.5}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/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-kit/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-kit/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-kit/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`