Glass Logo

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/glass-logo.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/glass-logo.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/glass-logo.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/glass-logo.json

---
import "@/components/motion-kit/glass-logo-element.ts";

const svgLogo = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="white"/></svg>`;
---

<motion-glass-logo
  svg-source={svgLogo}
  speed={1}
  scale={1}
  rotation={0}
  refraction={1}
  chromatic-aberration={1}
  blur={1}
  swirl-color-a="#222326"
  swirl-color-b="#ff6900"
  class="w-full h-[400px]"
/>

import "@/components/motion-kit/glass-logo-element.ts";

const svgLogo = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="white"/></svg>`;

export default function Page() {
  return (
    <motion-glass-logo
      svg-source={svgLogo}
      speed={1}
      scale={1}
      rotation={0}
      refraction={1}
      chromatic-aberration={1}
      blur={1}
      swirl-color-a="#222326"
      swirl-color-b="#ff6900"
      className="w-full h-[400px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/glass-logo-element.ts";

const svgLogo = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="white"/></svg>`;
</script>

<template>
  <motion-glass-logo
    :svg-source="svgLogo"
    :speed="1"
    :scale="1"
    :rotation="0"
    :refraction="1"
    :chromatic-aberration="1"
    :blur="1"
    swirl-color-a="#222326"
    swirl-color-b="#ff6900"
    class="w-full h-[400px]"
  />
</template>

<script>
  import "@/components/motion-kit/glass-logo-element.ts";

  const svgLogo = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="white"/></svg>`;
</script>

<motion-glass-logo
  svg-source={svgLogo}
  speed={1}
  scale={1}
  rotation={0}
  refraction={1}
  chromatic-aberration={1}
  blur={1}
  swirl-color-a="#222326"
  swirl-color-b="#ff6900"
  class="w-full h-[400px]"
/>

<script type="module" src="/components/motion-kit/glass-logo-element.js"></script>

<motion-glass-logo
  svg-source="<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='40' fill='white'/></svg>"
  speed="1"
  scale="1"
  rotation="0"
  refraction="1"
  chromatic-aberration="1"
  blur="1"
  swirl-color-a="#222326"
  swirl-color-b="#ff6900"
  class="w-full h-[400px]"
/>