Lava Lamp

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add lava-lamp

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

Props

Scale

1.000

Offset X

0.000

Offset Y

0.000

Rotation

0deg

Color

Fresnel Color

Speed

1.000

Fresnel Power

3.000

Radius

1.000

Smoothness

0.100

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

	type Props = Partial<ComponentProps<typeof LavaLamp>>;

	let {
		scale = 1,
		offsetX = 0,
		offsetY = 0,
		rotation = 0,
		color = "#17181A",
		fresnelColor = "#ff6900",
		speed = 1,
		fresnelPower = 3,
		radius = 1,
		smoothness = 0.1,
	}: Props = $props();
</script>

<LavaLamp
	class="h-full min-h-96 w-full"
	{scale}
	{offsetX}
	{offsetY}
	{rotation}
	{color}
	{fresnelColor}
	{speed}
	{fresnelPower}
	{radius}
	{smoothness}
/>

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

	type Props = Partial<ComponentProps<typeof LavaLamp>>;

	let {
		scale = 1,
		offsetX = 0,
		offsetY = 0,
		rotation = 0,
		color = "#17181A",
		fresnelColor = "#ff6900",
		speed = 1,
		fresnelPower = 3,
		radius = 1,
		smoothness = 0.1,
	}: Props = $props();
</script>

<LavaLamp
	class="h-full min-h-96 w-full"
	{scale}
	{offsetX}
	{offsetY}
	{rotation}
	{color}
	{fresnelColor}
	{speed}
	{fresnelPower}
	{radius}
	{smoothness}
/>

Props

LavaLamp

Prop	Type	Default
`scale`	`number`	`1`
`offsetX`	`number`	`0`
`offsetY`	`number`	`0`
`rotation`	`number`	`0`
`color`	`string`	`"#17181A"`
`fresnelColor`	`string`	`"#ff6900"`
`speed`	`number`	`1.0`
`fresnelPower`	`number`	`3.0`
`radius`	`number`	`1`
`smoothness`	`number`	`0.1`
`class`	`string`	`""`