Motion Core

canvas

Lava Lamp

A smooth and organic lava lamp effect using raymarching shaders and SDFs.

@threlte/corethree

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add lava-lamp

Import the component

Import the component into your Svelte file: 
import { LavaLamp } from "$lib/motion-core";
import { LavaLamp } from "$lib/motion-core";

Usage

<script lang="ts">
	import { LavaLamp } from "motion-core";
</script>

<LavaLamp
	color="#18181b"
	fresnelColor="#ff6900"
	class="h-full min-h-96 w-full"
/>

Props

LavaLamp

PropTypeDefault
color
string "#18181b"
fresnelColor
string "#ff6900"
speed
number 1.0
fresnelPower
number 3.0
radius
number 1
smoothness
number 0.1
class
string ""