Canvas

Neural Noise

Animated CPPN-based neural noise rendered in WebGL. Produces continuously evolving organic color patterns driven by a compositional pattern-producing network.

Preview

Animated CPPN-based neural noise — continuously evolving organic color patterns driven by a compositional pattern-producing network.

Attributes

Installation

pnpm dlx motion-blocks add neural-noise

npx motion-blocks add neural-noise

bunx --bun motion-blocks add neural-noise

yarn dlx motion-blocks add neural-noise

Usage

---import "@/components/motion-blocks/neural-noise-element.ts";--- <motion-neural-noise  speed={1}  class="w-full h-[500px]"/>

import "@/components/motion-blocks/neural-noise-element.ts"; export default function Page() {  return (    <motion-neural-noise      speed={1}      className="w-full h-[500px]"    />  );}

<script setup>import "@/components/motion-blocks/neural-noise-element.ts";</script> <template>  <motion-neural-noise    :speed="1"    class="w-full h-[500px]"  /></template>

<script>  import "@/components/motion-blocks/neural-noise-element.ts";</script> <motion-neural-noise  speed={1}  class="w-full h-[500px]"/>

<script type="module" src="/components/motion-blocks/neural-noise-element.js"></script> <motion-neural-noise  speed="1"  class="w-full h-[500px]"/>

API Reference

Attribute	Type	Default
`speed`	`number`	`1`
`color`	`string`	`#17181A`
`highlight-color`	`string`	`#6c87bc`