Motion Core

https://motion-core.dev/docs/
Admin
An open-source collection of high-quality, expressive motion components for Svelte, built on GSAP...
Tokens:25,679
Snippets:408
Trust Score:4.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### Global Installation

Source: https://motion-core.dev/docs/cli-guide/quick-start

Install the CLI globally using npm.

```bash
npm install -g @motion-core/cli
```

--------------------------------

### Configuration File

Source: https://motion-core.dev/docs/cli-guide/quick-start

Example motion-core.json configuration file.

```json
{
	"$schema": "https://motion-core.dev/registry/schema/config-schema.json",
	"tailwind": {
		"css": "src/routes/layout.css"
	},
	"aliases": {
		"components": {
			"filesystem": "src/lib/motion-core",
			"import": "$lib/motion-core"
		},
		"helpers": {
			"filesystem": "src/lib/motion-core/helpers",
			"import": "$lib/motion-core/helpers"
		},
		"utils": {
			"filesystem": "src/lib/motion-core/utils",
			"import": "$lib/motion-core/utils"
		},
		"assets": {
			"filesystem": "src/lib/motion-core/assets",
			"import": "$lib/motion-core/assets"
		}
	},
	"aliasPrefixes": {
		"components": "$lib/motion-core"
	},
	"exports": {
		"components": {
			"barrel": "src/lib/motion-core/index.ts",
			"strategy": "named"
		}
	}
}
```

--------------------------------

### Usage without installation

Source: https://motion-core.dev/docs/cli-guide/quick-start

Run the CLI directly using npx.

```bash
npx @motion-core/cli init
```

--------------------------------

### Examples of adding components

Source: https://motion-core.dev/docs/cli-guide/add

Demonstrates how to install single or multiple components and how to preview changes without modifying the filesystem.

```bash
# Install a single component
motion-core add glass-pane

# Install multiple components and all of their internal dependencies
motion-core add glass-pane image-trail

# Preview without writing
motion-core add logo-carousel --dry-run
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/floating-menu

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

```bash
npx @motion-core/cli add floating-menu
```

```bash
npx @motion-core/cli add floating-menu
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/slideshow

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

```bash
npx @motion-core/cli add slideshow
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/weight-wave

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

```bash
npx @motion-core/cli add weight-wave
```

```bash
npx @motion-core/cli add weight-wave
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/video-player

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

```bash
npx @motion-core/cli add video-player
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/halo

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

```bash
npx @motion-core/cli add halo
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/preloader

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

```bash
npx @motion-core/cli add preloader
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/flip-card-stack

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

```bash
npx @motion-core/cli add flip-card-stack
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/magnetic

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

```bash
npx @motion-core/cli add magnetic
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/interactive-grid

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

```bash
npx @motion-core/cli add interactive-grid
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/infinite-gallery

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

```bash
npx @motion-core/cli add infinite-gallery
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/card-3d

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

```bash
npx @motion-core/cli add card-3d
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/image-trail

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

```bash
npx @motion-core/cli add image-trail
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/split-reveal

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

```bash
npx @motion-core/cli add split-reveal
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/stacking-words

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

```bash
npx @motion-core/cli add stacking-words
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/text-repel

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

```bash
npx @motion-core/cli add text-repel
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/plasma-grid

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

```bash
npx @motion-core/cli add plasma-grid
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/globe

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

```bash
npx @motion-core/cli add globe
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/lava-lamp

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

```bash
npx @motion-core/cli add lava-lamp
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/text-loop

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

```bash
npx @motion-core/cli add text-loop
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/marquee

Command to install the Marquee component and its dependencies.

```bash
npx @motion-core/cli add marquee
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/split-hover

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

```bash
npx @motion-core/cli add split-hover
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/water-ripple

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

```bash
npx @motion-core/cli add water-ripple
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/ascii-renderer

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

```bash
npx @motion-core/cli add ascii-renderer
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/fluid-simulation

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

```bash
npx @motion-core/cli add fluid-simulation
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/flip-grid

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

```bash
npx @motion-core/cli add flip-grid
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/text-scramble

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

```bash
npx @motion-core/cli add text-scramble
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/infinite-physics-gallery

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

```bash
npx @motion-core/cli add infinite-physics-gallery
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/specular-band

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

```bash
npx @motion-core/cli add specular-band
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/card-stack

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

```bash
npx @motion-core/cli add card-stack
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/glitter-cloth

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

```bash
npx @motion-core/cli add glitter-cloth
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/glass-pane

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

```bash
npx @motion-core/cli add glass-pane
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/neural-noise

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

```bash
npx @motion-core/cli add neural-noise
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/macos-dock

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

```bash
npx @motion-core/cli add macos-dock
```

--------------------------------

### Example

Source: https://motion-core.dev/docs/stacking-words

Example of how to use the StackingWords component in a Svelte file.

```typescript
<script lang="ts">
	import { StackingWords } from "motion-core";
	import { onMount } from "svelte";
	import type { ComponentProps } from "svelte";

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

	let scrollElement = $state<HTMLElement | null>(null);
	let { scrub = 1.234, stagger = 0.21 }: Props = $props();

	onMount(() => {
		scrollElement = document.getElementById("component-preview-live");
	});
</script>

<div
	class="flex h-full min-h-150 w-full items-center justify-center text-center"
>
	<p class="text-3xl font-medium tracking-tight text-foreground">Scroll Down</p>
</div>

<StackingWords
	{scrollElement}
	{scrub}
	{stagger}
	class="mx-auto w-sm p-4 text-2xl md:w-3xl md:text-5xl"
>
	<p>
		We craft interfaces where motion carries meaning, guiding each transition
		with rhythm, contrast, and intention so every section unfolds with clarity
		as you scroll.
	</p>
</StackingWords>

<div
	class="flex h-full min-h-150 w-full items-center justify-center text-center"
>
	<p class="text-3xl font-medium tracking-tight text-foreground">You Made It</p>
</div>

```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/logo-carousel

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

```bash
npx @motion-core/cli add logo-carousel
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/god-rays

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

```bash
npx @motion-core/cli add god-rays
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/glass-logo

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

```bash
npx @motion-core/cli add glass-logo
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/fake-3d-image

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

```bash
npx @motion-core/cli add fake-3d-image
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/glass-slideshow

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

```bash
npx @motion-core/cli add glass-slideshow
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/pixelated-image

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

```bash
npx @motion-core/cli add pixelated-image
```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/dithered-image

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

```bash
npx @motion-core/cli add dithered-image
```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/weight-wave

Example of how to use the WeightWave component in a Svelte file.

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

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

	let {
		baseWeight = 200,
		hoverWeight = 800,
		influenceRadius = 3,
		falloffPower = 1.5,
		duration = 1,
	}: Props = $props();
</script>

<WeightWave
	class="font-variable text-6xl md:text-8xl"
	{baseWeight}
	{hoverWeight}
	{influenceRadius}
	{falloffPower}
	{duration}
>
	Motion Core
</WeightWave>

```

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

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

	let {
		baseWeight = 200,
		hoverWeight = 800,
		influenceRadius = 3,
		falloffPower = 1.5,
		duration = 1,
	}: Props = $props();
</script>

<WeightWave
	class="font-variable text-6xl md:text-8xl"
	{baseWeight}
	{hoverWeight}
	{influenceRadius}
	{falloffPower}
	{duration}
>
	Motion Core
</WeightWave>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/plasma-grid

Example of how to use the PlasmaGrid component in a Svelte file.

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

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

	let { color = "#17181A", highlightColor = "#572400" }: Props = $props();
</script>

<PlasmaGrid
	class="h-full min-h-96 w-full bg-[#17181A]"
	{color}
	{highlightColor}
/>

```

--------------------------------

### Install the component

Source: https://motion-core.dev/docs/fluid-image-reveal

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

```bash
npx @motion-core/cli add fluid-image-reveal
```

--------------------------------

### Usage Example

Source: https://motion-core.dev/docs/video-player

Example of how to use the VideoPlayer component in a Svelte file.

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

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

	let {
		autoplay = false,
		muted = true,
		loop = true,
		hideControls = false,
	}: Props = $props();
</script>

<div class="flex items-center justify-center px-8 py-16">
	<VideoPlayer
		src="https://videos.pexels.com/video-files/35217201/14919167_1920_1080_30fps.mp4"
		{autoplay}
		{muted}
		{loop}
		{hideControls}
	/>
</div>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/lava-lamp

Example of how to use the LavaLamp component in a Svelte file.

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

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

	let { 
		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"
	{color}
	{fresnelColor}
	{speed}
	{fresnelPower}
	{radius}
	{smoothness}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/infinite-gallery

Example of how to use the InfiniteGallery component in a Svelte file.

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

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

	let { speed = 1, visibleCount = 8 }: Props = $props();

	const images = [
		"/images/demos/sample-8.jpg",
		"/images/demos/sample-9.jpg",
		"/images/demos/sample-10.jpg",
		"/images/demos/sample-11.jpg",
		"/images/demos/sample-12.jpg",
		"/images/demos/sample-13.jpg",
		"/images/demos/sample-14.jpg",
		"/images/demos/sample-15.jpg",
	];
</script>

<InfiniteGallery
	class="h-full min-h-96 w-full"
	{images}
	{speed}
	{visibleCount}
/>

```

--------------------------------

### Usage Example

Source: https://motion-core.dev/docs/interactive-grid

Example of how to use the InteractiveGrid component in a Svelte file.

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

	const demoImage = "/images/demos/sample-14.jpg";
	type Props = Partial<ComponentProps<typeof InteractiveGrid>>;

	let {
		grid = 15,
		mouseSize = 0.15,
		strength = 0.35,
		relaxation = 0.9,
	}: Props = $props();
</script>

<InteractiveGrid
	image={demoImage}
	class="h-full min-h-96 w-full"
	{grid}
	{mouseSize}
	{strength}
	{relaxation}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/glass-pane

Example of how to use the GlassPane component with various props.

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

	const demoImage = "/images/demos/sample-6.jpg";
	type Props = Partial<ComponentProps<typeof GlassPane>>;

	let {
		distortion = 0.5,
		chromaticAberration = 0.005,
		waviness = 0,
		speed = 0.5,
		rods = 3,
	}: Props = $props();
</script>

<GlassPane
	image={demoImage}
	class="h-full min-h-96 w-full"
	{distortion}
	{chromaticAberration}
	{waviness}
	{speed}
	{rods}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/god-rays

Example of how to use the GodRays component in a Svelte file.

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

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

	let {
		color = "#FFFFFF",
		intensity = 0.35,
		speed = 1,
		lightSpread = 1,
		rayLength = 1,
		pulsating = false,
	}: Props = $props();
</script>

<GodRays
	class="h-full min-h-96 w-full"
	{color}
	{intensity}
	{speed}
	{lightSpread}
	{rayLength}
	{pulsating}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/glass-slideshow

Example of how to use the GlassSlideshow component in a Svelte file.

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

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

	const images = [
		"/images/demos/sample-7.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-4.jpg",
	];

	let {
		transitionDuration = 2000,
		intensity = 1,
		distortion = 1,
		chromaticAberration = 1,
		refraction = 1,
		autoplay = true,
		autoplayInterval = 5000,
	}: Props = $props();
</script>

<GlassSlideshow
	class="h-full min-h-96 w-full"
	{images}
	{transitionDuration}
	{intensity}
	{distortion}
	{chromaticAberration}
	{refraction}
	{autoplay}
	{autoplayInterval}
/>

```

--------------------------------

### Sample output (human-readable)

Source: https://motion-core.dev/docs/cli-guide/list

Example of the human-readable table output for the 'motion-core list' command.

```bash
› Motion Core Registry components
› Motion Core Registry v0.1.0 - 28 components
› Curated Motion Core Svelte components

› canvas
› 13 components
›   ASCII Renderer
›     A retro-styled renderer that converts images into character-based visuals with configurable scanlines.
›     slug: ascii-renderer
›   Dithered Image
›     An image display component that applies various ordered dithering algorithms (Bayer, Halftone, Void & Cluster).
›     slug: dithered-image

› Install components
›   motion-core add glass-pane
›   motion-core add logo-carousel --dry-run
```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/infinite-physics-gallery

Example of how to use the InfinitePhysicsGallery component in a Svelte file.

```typescript
<script lang="ts">
	import {
		InfinitePhysicsGallery,
		type InfinitePhysicsGalleryItem,
	} from "motion-core";

type Props = {
		cellWidth?: number;
		cellHeight?: number;
		gap?: number;
		friction?: number;
		wheelSpeed?: number;
		edgeThreshold?: number;
		edgeScrollSpeed?: number;
	};

	const items: InfinitePhysicsGalleryItem[] = [
		{
			id: "img-1",
			type: "image",
			image: {
				src: "/images/demos/sample-1.jpg",
				alt: "Alt 1",
			},
		},
		{
			id: "img-2",
			type: "image",
			image: {
				src: "/images/demos/sample-4.jpg",
				alt: "Alt 2",
			},
		},
		{
			id: "img-3",
			type: "image",
			image: {
				src: "/images/demos/sample-10.jpg",
				alt: "Alt 3",
			},
		},
		{
			id: "img-4",
			type: "image",
			image: {
				src: "/images/demos/sample-12.jpg",
				alt: "Alt 4",
			},
		},
	];

	let {
		cellWidth = 280,
		cellHeight = 360,
		gap = 20,
		friction = 0.95,
		wheelSpeed = 1.4,
		edgeThreshold = 120,
		edgeScrollSpeed = 1.6,
	}: Props = $props();
</script>

<InfinitePhysicsGallery
	class="h-full min-h-160 w-full"
	{items}
	{cellWidth}
	{cellHeight}
	{gap}
	cellClass="rounded-md"
	{friction}
	scrollSettings={{
		wheelSpeed,
		friction,
		edgeThreshold,
		edgeScrollSpeed,
	}}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/glass-logo

Example of how to use the GlassLogo component in a Svelte file.

```typescript
<script lang="ts">
	import { GlassLogo } from "motion-core";
	import type { ComponentProps } from "svelte";
	import defaultLogoSvg from "$lib/assets/motion-core-logo.svg?raw";

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

	let {
		svgSource = defaultLogoSvg,
		speed = 1,
		scale = 1,
		offsetX = 0,
		offsetY = 0,
		rotation = 0,
		refraction = 1,
		chromaticAberration = 1,
		blur = 1,
		swirlColorA = "#222326",
		swirlColorB = "#ff6900",
	}: Props = $props();
</script>

<GlassLogo
	class="h-full min-h-96 w-full"
	{svgSource}
	{speed}
	{scale}
	{offsetX}
	{offsetY}
	{rotation}
	{refraction}
	{chromaticAberration}
	{blur}
	{swirlColorA}
	{swirlColorB}
/>

```

--------------------------------

### Install Radial Gallery

Source: https://motion-core.dev/docs/radial-gallery

Command to install the Radial Gallery component and its dependencies.

```bash
npx @motion-core/cli add radial-gallery
```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/flip-grid

This is an example of how to use the FlipGrid component in a Svelte file.

```svelte
<script lang="ts">
	import { FlipGrid, FlipGridItem } from "motion-core";

type Props = {
	columns?: number;
	duration?: number;
	stagger?: number;
	ease?: string;
};

const images = [
	"/images/demos/sample-8.jpg",
	"/images/demos/sample-9.jpg",
	"/images/demos/sample-10.jpg",
	"/images/demos/sample-11.jpg",
];

let {
	columns = 4,
	duration = 0.5,
	stagger = 0.1,
	ease = "power2.inOut",
}: Props = $props();
</script>

<div class="relative h-full min-h-96 w-full">
	<div class="h-full p-4">
		<FlipGrid class="w-full gap-4" {columns} {duration} {stagger} {ease}>
			{#each images as src, i (src)}
				<FlipGridItem
					id={`img-${i}`}
					class="relative aspect-square w-full overflow-hidden rounded-lg shadow-md"
				>
					<img {src} alt="Demo {i}" class="h-full w-full object-cover" />
				</FlipGridItem>
			{/each}
		</FlipGrid>
	</div>
</div>

```

--------------------------------

### Install Rubiks Cube Component

Source: https://motion-core.dev/docs/rubiks-cube

Command to install the Rubiks Cube component and its dependencies.

```bash
npx @motion-core/cli add rubiks-cube
```

--------------------------------

### ExampleMacosDock.svelte

Source: https://motion-core.dev/docs/macos-dock

Example usage of the MacosDock component.

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

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

	const items = [
		{
			src: "/images/demos/logo-notion.png",
			alt: "Notion",
			label: "Notion",
			href: "#",
		},
		{
			src: "/images/demos/logo-asana.png",
			alt: "Asana",
			label: "Asana",
			href: "#",
		},
		{
			src: "/images/demos/logo-slack.png",
			alt: "Slack",
			label: "Slack",
			href: "#",
		},
		{
			src: "/images/demos/logo-loom.png",
			alt: "Loom",
			label: "Loom",
			href: "#",
		},
		{
			src: "/images/demos/logo-spotify.png",
			alt: "Spotify",
			label: "Spotify",
			href: "#",
		},
		{
			src: "/images/demos/logo-illustrator.png",
			alt: "Adobe Illustrator",
			label: "Adobe Illustrator",
			href: "#",
		},
		{
			src: "/images/demos/logo-figma.png",
			alt: "Figma",
			label: "Figma",
			href: "#",
		},
		{
			src: "/images/demos/logo-photoshop.png",
			alt: "Adobe Photoshop",
			label: "Adobe Photoshop",
			href: "#",
		},
		{
			src: "/images/demos/logo-premiere.png",
			alt: "Premiere Pro",
			label: "Premiere Pro",
			href: "#",
		}
	];

	let { baseWidth = 4, magnification = 1.5, distance = 3 }: Props = $props();
</script>

<div
	class="relative flex h-full min-h-96 w-full items-center justify-center overflow-hidden"
>
	<div class="absolute bottom-0">
		<MacosDock {items} {baseWidth} {magnification} {distance} />
	</div>
</div>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/fake-3d-image

Example of how to use the Fake3DImage component with its props.

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

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

	let { xThreshold = 8, yThreshold = 8, sensitivity = 0.25 }: Props = $props();
</script>

<Fake3DImage
	colorSrc="/images/demos/sample-16.jpg"
	depthSrc="/images/demos/sample-16-depth-map.webp"
	class="h-full min-h-96 w-full"
	{xThreshold}
	{yThreshold}
	{sensitivity}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/ascii-renderer

Example of how to use the AsciiRenderer component in a Svelte file.

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

	const demoImage = "/images/demos/sample-11.jpg";
		type Props = Partial<ComponentProps<typeof AsciiRenderer>>;

	let {
		density = 25,
		strength = 3,
		color = "#00ff00",
		backgroundColor = "#17181A",
	}: Props = $props();
</script>

<AsciiRenderer
	src={demoImage}
	class="h-full min-h-96 w-full"
	{density}
	{strength}
	{color}
	{backgroundColor}
/>

```

--------------------------------

### ExampleFluidSimulation.svelte

Source: https://motion-core.dev/docs/fluid-simulation

Example usage of the FluidSimulation component.

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

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

	let {
		dissipation = 0.96,
		pointerSize = 0.005,
		color = "#ff6900",
		velocityDissipation = 0.96,
		pressureIterations = 10,
	}: Props = $props();
</script>

<FluidSimulation
	class="h-full min-h-96 w-full"
	{dissipation}
	{pointerSize}
	{color}
	{velocityDissipation}
	{pressureIterations}
/>

```

--------------------------------

### Example

Source: https://motion-core.dev/docs/split-reveal

SplitReveal.svelte

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

	type SplitRevealProps = ComponentProps<typeof SplitReveal>;
	type SplitMode = NonNullable<SplitRevealProps["mode"]>;

	ttype Props = Partial<
		Pick<SplitRevealProps, "mode" | "delay"> &
		{
			duration: number;
			stagger: number;
		}
	>;

	let { mode = "lines", duration = 0.8, stagger = 0.08, delay = 0 }: Props = $props();

	const config = $derived({
		[mode]: {
			duration,
			stagger,
		},
	});
</script>

{#key `${mode}-${duration}-${stagger}-${delay}`}
	<SplitReveal
		{mode}
		{config}
		{delay}
		class="absolute top-1/2 left-1/2 block w-sm -translate-x-1/2 -translate-y-1/2 p-8 text-center text-lg md:w-3xl"
	>
		We’re using GSAP’s SplitText to break this content into lines, words, and
		individual characters. Experiment with staggered tweens, custom ease
		functions, and dynamic transforms to bring your headlines to life.
	</SplitReveal>
{/key}

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/image-trail

This is an example of how to use the ImageTrail component in a Svelte file, including its props and configuration.

```typescript
<script lang="ts">
	import { ImageTrail } from "motion-core";

type Props = {
		mouseThreshold?: number;
		imageLifespan?: number;
		inDuration?: number;
		outDuration?: number;
		baseRotation?: number;
		maxRotationFactor?: number;
		minImageSize?: number;
		maxImageSize?: number;
	};

	const demoImages = [
		"/images/demos/sample-1.jpg",
		"/images/demos/sample-2.jpg",
		"/images/demos/sample-3.jpg",
		"/images/demos/sample-4.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-6.jpg",
		"/images/demos/sample-7.jpg",
	];

	let {
		mouseThreshold = 40,
		imageLifespan = 600,
		inDuration = 600,
		outDuration = 800,
		baseRotation = 30,
		maxRotationFactor = 3,
		minImageSize = 260,
		maxImageSize = 340,
	}: Props = $props();
</script>

<ImageTrail
	images={demoImages}
	class="absolute inset-0 flex h-full w-full items-center justify-center"
	config={{
		mouseThreshold,
		imageLifespan,
		inDuration,
		outDuration,
		baseRotation,
		maxRotationFactor,
		minImageSize,
		maxImageSize,
	}}
/>

```

--------------------------------

### ExampleHalo.svelte

Source: https://motion-core.dev/docs/halo

Example usage of the Halo component in a Svelte file.

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

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

	let {
		rotationSpeed = 0.5,
		backgroundColor = "#17181A",
		cameraDistance = 3,
		fov = 55,
		intensity = 2.2,
	}: Props = $props();
</script>

<Halo
	class="h-full min-h-96 w-full"
	{rotationSpeed}
	{backgroundColor}
	{cameraDistance}
	{fov}
	{intensity}
/>

```

--------------------------------

### ExampleFloatingMenu.svelte

Source: https://motion-core.dev/docs/floating-menu

Example usage of the FloatingMenu component.

```svelte
<script lang="ts">
	import { FloatingMenu } from "motion-core";
	import motionCoreLogo from "$lib/assets/motion-core-logo.svg?raw";

	const menuGroups = [
		{
			title: "Platform",
			variant: "muted" as const,
			links: [
				{ label: "Home", href: "#" },
				{ label: "Components", href: "#" },
				{ label: "Showcase", href: "#" },
			],
		},
		{
			title: "Resources",
			variant: "default" as const,
			links: [
				{ label: "Documentation", href: "#" },
				{ label: "API Reference", href: "#" },
				{ label: "Community", href: "#" },
			],
		},
		{
			title: "Company",
			variant: "muted" as const,
			links: [
				{ label: "About Us", href: "#" },
				{ label: "Blog", href: "#" },
				{ label: "Careers", href: "#" },
			],
		},
	];
	let demoContainer: HTMLElement;
</script>

<div
	bind:this={demoContainer}
	class="relative flex h-full min-h-150 w-full scale-[1] transform items-center justify-center overflow-hidden p-4"
>
	<p class="text-center">
		Due to the nature of the component, testing in full-screen mode is
		recommended.
	</p>
	<FloatingMenu
		portalTarget={demoContainer}
		{menuGroups}
		primaryButton={{ label: "Get Started", href: "#" }}
	>
		{#snippet logo()}
			<a href="/" class="flex items-center">
				<span
					class="inline-flex shrink-0 items-center text-accent [&>svg]:h-6 [&>svg]:w-auto [&>svg]:fill-current"
					aria-hidden="true"
				>
					{@html motionCoreLogo}
				</span>
			</a>
		{/snippet}
	</FloatingMenu>
</div>

```

```svelte
<script lang="ts">
	import { FloatingMenu } from "motion-core";
	import motionCoreLogo from "$lib/assets/motion-core-logo.svg?raw";

	const menuGroups = [
		{
			title: "Platform",
			variant: "muted" as const,
			links: [
				{ label: "Home", href: "#" },
				{ label: "Components", href: "#" },
				{ label: "Showcase", href: "#" },
			],
		},
		{
			title: "Resources",
			variant: "default" as const,
			links: [
				{ label: "Documentation", href: "#" },
				{ label: "API Reference", href: "#" },
				{ label: "Community", href: "#" },
			],
		},
		{
			title: "Company",
			variant: "muted" as const,
			links: [
				{ label: "About Us", href: "#" },
				{ label: "Blog", href: "#" },
				{ label: "Careers", href: "#" },
			],
		},
	];
	let demoContainer: HTMLElement;
</script>

<div
	bind:this={demoContainer}
	class="relative flex h-full min-h-150 w-full scale-[1] transform items-center justify-center overflow-hidden p-4"
>
	<p class="text-center">
		Due to the nature of the component, testing in full-screen mode is
		recommended.
	</p>
	<FloatingMenu
		portalTarget={demoContainer}
		{menuGroups}
		primaryButton={{ label: "Get Started", href: "#" }}
	>
		{#snippet logo()}
			<a href="/" class="flex items-center">
				<span
					class="inline-flex shrink-0 items-center text-accent [&>svg]:h-6 [&>svg]:w-auto [&>svg]:fill-current"
					aria-hidden="true"
				>
					{@html motionCoreLogo}
				</span>
			</a>
		{/snippet}
	</FloatingMenu>
</div>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/fluid-image-reveal

Example of how to use the FluidImageReveal component in a Svelte file, including setting various props.

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

	const baseImage = "/images/demos/night.png";
	const revealImage = "/images/demos/day.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
/>

```

--------------------------------

### Example

Source: https://motion-core.dev/docs/flip-card-stack

Content layout is fully controlled in the snippet.

```typescript
<script lang="ts">
	import { FlipCardStack } from "motion-core";

type DemoCard = {
		image: string;
		alt: string;
		title: string;
		description: string;
	};

type Props = {
		stackOffset?: number;
		stackRotation?: number;
		dragThreshold?: number;
		duration?: number;
	};

	const items: DemoCard[] = [
		{
			image: "/images/demos/sample-9.jpg",
			alt: "Blue and orange abstract texture",
			title: "Frame One",
			description: "Drag the top card and release past threshold.",
		},
		{
			image: "/images/demos/sample-12.jpg",
			alt: "Neon gradient waves",
			title: "Frame Two",
			description: "Only the top card is draggable at any moment.",
		},
		{
			image: "/images/demos/sample-15.jpg",
			alt: "Warm red and yellow gradient",
			title: "Frame Three",
			description: "Content layout is fully controlled in the snippet.",
		},
	];

	let {
		stackOffset = 10,
		stackRotation = -8,
		dragThreshold = 80,
		duration = 0.3,
	}: Props = $props();
</script>

<div class="flex min-h-150 w-full items-center justify-center p-8">
	<FlipCardStack
		{items}
		{stackOffset}
		{stackRotation}
		{dragThreshold}
		{duration}
	>
		{#snippet children(item)}
			<div class="relative h-96 w-[320px] overflow-hidden rounded-lg">
				<img
					src={item.image}
					alt={item.alt}
					class="pointer-events-none h-full w-full object-cover select-none"
				/>
				<div
					class="absolute inset-x-0 bottom-0 bg-linear-to-t from-black/80 via-black/35 to-transparent p-6 text-left text-white"
				>
					<h3 class="text-lg font-medium text-white">{item.title}</h3>
					<p class="mt-1 text-sm text-white/80">{item.description}</p>
				</div>
			</div>
		{/snippet}
	</FlipCardStack>
</div>

```

--------------------------------

### ExampleTextLoop.svelte

Source: https://motion-core.dev/docs/text-loop

Example usage of the TextLoop component.

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

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

	let { interval = 2000 }: Props = $props();
</script>

<p class="text-center text-5xl font-medium text-foreground">
	Create <TextLoop
		class="text-accent"
		texts={["magic", "wonder", "impact", "value"]}
		{interval}
	/> today
</p>

```

--------------------------------

### ExampleSlideshow.svelte

Source: https://motion-core.dev/docs/slideshow

Example usage of the Slideshow component with images.

```svelte
<script lang="ts">
	import { Slideshow } from "motion-core";

	const images = [
		{
			src: "/images/demos/sample-1.jpg",
			alt: "Alt 1",
		},
		{
			src: "/images/demos/sample-2.jpg",
			alt: "Alt 2",
		},
		{
			src: "/images/demos/sample-3.jpg",
			alt: "Alt 3",
		},
	];
</script>

<Slideshow class="h-full min-h-96 w-full" {images} />

```

--------------------------------

### Invoke CLI

Source: https://motion-core.dev/docs/cli-guide/quick-start

Invoke the CLI directly using the motion-core command.

```bash
motion-core --help
```

--------------------------------

### Usage

Source: https://motion-core.dev/docs/cli-guide/list

Demonstrates how to list components in a human-readable table or as structured JSON.

```bash
# Human-readable table grouped by category
motion-core list

# Structured JSON for tooling or scripts
motion-core list --json
```

--------------------------------

### Init Command Usage

Source: https://motion-core.dev/docs/cli-guide/init

The basic command to initialize Motion Core in a Svelte workspace.

```bash
motion-core init [--dry-run]
```

```bash
motion-core init [--dry-run]
```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/text-repel

Example of how to use the TextRepel component in a Svelte file.

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

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

	let {
		mode = "words",
		strength = 18,
		radius = 160,
		falloffPower = 1.5,
		duration = 0.45,
		ease = "power3.out",
	}: Props = $props();
</script>

<TextRepel
	class="max-w-3xl px-6 text-center text-4xl leading-tight font-medium tracking-tight text-foreground md:text-6xl"
	{mode}
	{strength}
	{radius}
	{falloffPower}
	{duration}
	{ease}
>
	Motion reacts to the cursor with a soft field of spatial tension.
</TextRepel>

```

--------------------------------

### Sample output (JSON)

Source: https://motion-core.dev/docs/cli-guide/list

Example of the JSON output for the 'motion-core list --json' command.

```json
{
	"components": [
		{
			"category": "canvas",
			"description": "A retro-styled renderer that converts images into character-based visuals with configurable scanlines.",
			"name": "ASCII Renderer",
			"slug": "ascii-renderer"
		},
		{
			"category": "canvas",
			"description": "An image display component that applies various ordered dithering algorithms (Bayer, Halftone, Void & Cluster).",
			"name": "Dithered Image",
			"slug": "dithered-image"
		}
	],
	"registry": {
		"components": 28,
		"description": "Curated Motion Core Svelte components",
		"name": "Motion Core Registry",
		"version": "0.1.0"
	}
}
```

--------------------------------

### Usage Example

Source: https://motion-core.dev/docs/water-ripple

Example of how to use the WaterRipple component in a Svelte file.

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

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

	let { brushSize = 100 }: Props = $props();
</script>

<WaterRipple
	src="/images/demos/sample-15.jpg"
	class="h-full min-h-96 w-full"
	{brushSize}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/neural-noise

Example of how to use the NeuralNoise component in a Svelte file.

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

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

	let { speed = 0.5 }: Props = $props();
</script>

<NeuralNoise {speed} class="h-full min-h-96 w-full" />

```

--------------------------------

### Magnetic Button Example

Source: https://motion-core.dev/docs/magnetic

Example usage of the Magnetic component in a Svelte file.

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

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

	let { duration = 1, ease = "elastic.out(1, 0.3)" }: Props = $props();
</script>

<Magnetic {duration} {ease}>
	<button
		class="h-8 gap-1.5 rounded-sm bg-background-muted px-3 text-xs font-medium tracking-wide text-foreground uppercase card"
	>
		Magnetic Button
	</button>
</Magnetic>

```

--------------------------------

### Usage Example

Source: https://motion-core.dev/docs/pixelated-image

Example of how to use the PixelatedImage component in a Svelte file.

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

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

	let { initialGridSize = 2, stepDuration = 0.2 }: Props = $props();
</script>

<PixelatedImage
	src="/images/demos/sample-13.jpg"
	class="h-full min-h-96 w-full"
	{initialGridSize}
	{stepDuration}
/>

```

--------------------------------

### Example Usage

Source: https://motion-core.dev/docs/glitter-cloth

Example of how to use the GlitterCloth component in a Svelte file.

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

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

	let {
		color = "#222326",
		speed = 1,
		brightness = 1,
		blendStrength = 0.02,
		noiseScale = 4,
		vignetteStrength = 50,
		vignettePower = 0.5,
	}: Props = $props();
</script>

<GlitterCloth
	class="h-full min-h-96 w-full"
	{color}
	{speed}
	{brightness}
	{blendStrength}
	{noiseScale}
	{vignetteStrength}
	{vignettePower}
/>

```
Tokens:
Raw