Installation
Install the component
Run the following command to install the component and its dependencies:
npx @motion-core/cli add fluid-image-revealnpx @motion-core/cli add fluid-image-revealpnpm dlx @motion-core/cli add fluid-image-revealpnpm dlx @motion-core/cli add fluid-image-revealbunx @motion-core/cli add fluid-image-revealbunx @motion-core/cli add fluid-image-revealyarn dlx @motion-core/cli add fluid-image-revealyarn dlx @motion-core/cli add fluid-image-revealImport the component
Import the component into your Svelte file:
import { FluidImageReveal } from "$lib/motion-core";import { FluidImageReveal } from "$lib/motion-core";Usage
Props
0.960
0.005
0.960
10
0.220
<script lang="ts">
import { FluidImageReveal } from "motion-core";
import type { ComponentProps } from "svelte";
const baseImage = "/images/photos/sample-image-12.webp";
const revealImage = "/images/photos/sample-image-12-xray.png";
type Props = Partial<ComponentProps<typeof FluidImageReveal>>;
let {
dissipation = 0.96,
pointerSize = 0.005,
velocityDissipation = 0.96,
pressureIterations = 10,
blendSoftness = 0.22,
}: Props = $props();
</script>
<FluidImageReveal
{baseImage}
{revealImage}
class="h-full min-h-96 w-full"
{dissipation}
{pointerSize}
{velocityDissipation}
{pressureIterations}
{blendSoftness}
/>
<script lang="ts">
import { FluidImageReveal } from "motion-core";
import type { ComponentProps } from "svelte";
const baseImage = "/images/photos/sample-image-12.webp";
const revealImage = "/images/photos/sample-image-12-xray.png";
type Props = Partial<ComponentProps<typeof FluidImageReveal>>;
let {
dissipation = 0.96,
pointerSize = 0.005,
velocityDissipation = 0.96,
pressureIterations = 10,
blendSoftness = 0.22,
}: Props = $props();
</script>
<FluidImageReveal
{baseImage}
{revealImage}
class="h-full min-h-96 w-full"
{dissipation}
{pointerSize}
{velocityDissipation}
{pressureIterations}
{blendSoftness}
/>
Props
FluidImageReveal
| Prop | Type | Default |
|---|---|---|
baseImage | string | — |
revealImage | string | — |
dissipation | number | 0.96 |
pointerSize | number | 0.005 |
velocityDissipation | number | 0.96 |
pressureIterations | number | 10 |
blendSoftness | number | 0.22 |
class | string | "" |