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

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

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

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

Usage

---
import "@/components/motion-kit/lava-lamp-element.ts";
---

<motion-lava-lamp
  color="#17181A"
  fresnel-color="#ff6900"
  speed="1.0"
  fresnel-power="3.0"
  radius="1"
  smoothness="0.1"
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/lava-lamp-element.ts";

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

<script setup>
import "@/components/motion-kit/lava-lamp-element.ts";
</script>

<template>
  <motion-lava-lamp
    color="#17181A"
    fresnel-color="#ff6900"
    :speed="1.0"
    :fresnel-power="3.0"
    :radius="1"
    :smoothness="0.1"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/lava-lamp-element.ts";
</script>

<motion-lava-lamp
  color="#17181A"
  fresnel-color="#ff6900"
  speed={1.0}
  fresnel-power={3.0}
  radius={1}
  smoothness={0.1}
  class="w-full h-[500px]"
/>

<script type="module" src="/components/motion-kit/lava-lamp-element.js"></script>

<motion-lava-lamp
  color="#17181A"
  fresnel-color="#ff6900"
  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`	`#ff6900`
`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`