Canvas

Lava Lamp

Raymarched metaball blobs rendered with a smooth-min SDF and Fresnel edge lighting. Creates a fluid, organic lava lamp animation.

Preview

Raymarched metaball blobs with smooth-min SDF blending and Fresnel edge lighting — fluid, organic lava lamp motion.

Attributes

Installation

pnpm dlx motion-blocks add lava-lamp

npx motion-blocks add lava-lamp

bunx --bun motion-blocks add lava-lamp

yarn dlx motion-blocks add lava-lamp

Usage

---import "@/components/motion-blocks/lava-lamp-element.ts";--- <motion-lava-lamp  color="#17181A"  fresnel-color="#6c87bc"  speed="1.0"  fresnel-power="3.0"  radius="1"  smoothness="0.1"  class="w-full h-[500px]"/>

import "@/components/motion-blocks/lava-lamp-element.ts"; export default function Page() {  return (    <motion-lava-lamp      color="#17181A"      fresnel-color="#6c87bc"      speed={1.0}      fresnel-power={3.0}      radius={1}      smoothness={0.1}      className="w-full h-[500px]"    />  );}

<script setup>import "@/components/motion-blocks/lava-lamp-element.ts";</script> <template>  <motion-lava-lamp    color="#17181A"    fresnel-color="#6c87bc"    :speed="1.0"    :fresnel-power="3.0"    :radius="1"    :smoothness="0.1"    class="w-full h-[500px]"  /></template>

<script>  import "@/components/motion-blocks/lava-lamp-element.ts";</script> <motion-lava-lamp  color="#17181A"  fresnel-color="#6c87bc"  speed={1.0}  fresnel-power={3.0}  radius={1}  smoothness={0.1}  class="w-full h-[500px]"/>

<script type="module" src="/components/motion-blocks/lava-lamp-element.js"></script> <motion-lava-lamp  color="#17181A"  fresnel-color="#6c87bc"  speed="1.0"  fresnel-power="3.0"  radius="1"  smoothness="0.1"  class="w-full h-[500px]"/>

API Reference

Attribute	Type	Default
`color`	`string`	`#17181A`
`fresnel-color`	`string`	`#6c87bc`
`speed`	`number`	`1.0`
`fresnel-power`	`number`	`3.0`
`radius`	`number`	`1`
`smoothness`	`number`	`0.1`
`scale`	`number`	`1`
`rotation`	`number`	`0`
`offset-x`	`number`	`0`
`offset-y`	`number`	`0`