Fluid Simulation — Motion Blocks

Preview

GPU fluid simulation. Move the cursor to paint fluid while the scene animates autonomously when idle.

Attributes

Installation

pnpm dlx motion-blocks add fluid-simulation

npx motion-blocks add fluid-simulation

bunx --bun motion-blocks add fluid-simulation

yarn dlx motion-blocks add fluid-simulation

Usage

---import "@/components/motion-blocks/fluid-simulation-element.ts";--- <motion-fluid-simulation  color="#6c87bc"  background-color="#17181A"  dissipation={0.96}  pointer-size={0.005}  class="w-full h-[500px]"/>

import "@/components/motion-blocks/fluid-simulation-element.ts"; export default function Page() {  return (    <motion-fluid-simulation      color="#6c87bc"      background-color="#17181A"      dissipation={0.96}      pointer-size={0.005}      className="w-full h-[500px]"    />  );}

<script setup>import "@/components/motion-blocks/fluid-simulation-element.ts";</script> <template>  <motion-fluid-simulation    color="#6c87bc"    background-color="#17181A"    :dissipation="0.96"    :pointer-size="0.005"    class="w-full h-[500px]"  /></template>

<script>  import "@/components/motion-blocks/fluid-simulation-element.ts";</script> <motion-fluid-simulation  color="#6c87bc"  background-color="#17181A"  dissipation={0.96}  pointer-size={0.005}  class="w-full h-[500px]"/>

<script type="module" src="/components/motion-blocks/fluid-simulation-element.js"></script> <motion-fluid-simulation  color="#6c87bc"  background-color="#17181A"  dissipation="0.96"  pointer-size="0.005"  class="w-full h-[500px]"/>

API Reference

Attribute	Type	Default
`dissipation`	`number`	`0.96`
`pointer-size`	`number`	`0.005`
`color`	`string`	`"#6c87bc"`
`background-color`	`string`	`"#17181A"`
`velocity-dissipation`	`number`	`0.96`
`pressure-iterations`	`number`	`10`