Glass Logo

Installation

Install the component

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

npx @motion-core/cli add glass-logo

npx @motion-core/cli add glass-logo

Import the component

Import the component into your Svelte file:

import { GlassLogo } from "$lib/motion-core";

import { GlassLogo } from "$lib/motion-core";

Usage

Props

Logo SVG

Choose SVG

Swirl Dark

Swirl Light

Speed

1.000

Scale

1.000

Offset X

0.000

Offset Y

0.000

Rotation

0deg

Refraction

1.000

Chromatic Aberration

1.000

Blur

1.000

<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}
/>

<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}
/>

Props

GlassLogo

Prop	Type	Default
`svgSource`	`string`	`Motion Core logo SVG`
`speed`	`number`	`1.0`
`scale`	`number`	`1.0`
`offsetX`	`number`	`0.0`
`offsetY`	`number`	`0.0`
`rotation`	`number`	`0.0`
`refraction`	`number`	`1.0`
`chromaticAberration`	`number`	`1.0`
`blur`	`number`	`1.0`
`swirlColorA`	`ColorRepresentation`	`"#222326"`
`swirlColorB`	`ColorRepresentation`	`"#ff6900"`
`class`	`string`	`""`