Installation
Install the component
Run the following command to install the component and its dependencies:
npx @motion-core/cli add liquid-metalnpx @motion-core/cli add liquid-metalpnpm dlx @motion-core/cli add liquid-metalpnpm dlx @motion-core/cli add liquid-metalbunx @motion-core/cli add liquid-metalbunx @motion-core/cli add liquid-metalyarn dlx @motion-core/cli add liquid-metalyarn dlx @motion-core/cli add liquid-metalImport the component
Import the component into your Svelte file:
import { LiquidMetal } from "$lib/motion-core";import { LiquidMetal } from "$lib/motion-core";Usage
Props
1.000
1.000
3.500
2.000
3.000
1.000
<script lang="ts">
import { LiquidMetal } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof LiquidMetal>>;
let {
color = "#FFFFFF",
backgroundColor = "#17181A",
speed = 1,
scale = 1,
frequency = 3.5,
refraction = 2,
chromaticAberration = 3,
blur = 1,
}: Props = $props();
</script>
<LiquidMetal
class="h-full min-h-96 w-full"
{color}
{backgroundColor}
{speed}
{scale}
{frequency}
{refraction}
{chromaticAberration}
{blur}
/>
<script lang="ts">
import { LiquidMetal } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof LiquidMetal>>;
let {
color = "#FFFFFF",
backgroundColor = "#17181A",
speed = 1,
scale = 1,
frequency = 3.5,
refraction = 2,
chromaticAberration = 3,
blur = 1,
}: Props = $props();
</script>
<LiquidMetal
class="h-full min-h-96 w-full"
{color}
{backgroundColor}
{speed}
{scale}
{frequency}
{refraction}
{chromaticAberration}
{blur}
/>
Props
LiquidMetal
| Prop | Type | Default |
|---|---|---|
color | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#FFFFFF" |
backgroundColor | stringnumber[number, number, number]{ r: number; g: number; b: number } | "#17181A" |
speed | number | 1.0 |
scale | number | 1.0 |
frequency | number | 3.5 |
refraction | number | 2.0 |
chromaticAberration | number | 3.0 |
blur | number | 1.0 |
class | string | "" |