Canvas

Specular Band

Animated specular band effect with lens distortion and hue-shifted color palettes. Creates flowing, organic light bands with adaptive blending for different background brightness levels.

Preview

Animated specular band effect with lens distortion — flowing organic light bands with hue-shifted color palettes and adaptive brightness blending.

Attributes

Installation

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

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

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

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

Usage

---
import "@/components/motion-kit/specular-band-element.ts";
---

<motion-specular-band
  color="#FF6900"
  background-color="#17181A"
  speed={1.0}
  distortion={0.2}
  hue-shift={30}
  intensity={1.0}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/specular-band-element.ts";

export default function Page() {
  return (
    <motion-specular-band
      color="#FF6900"
      background-color="#17181A"
      speed={1.0}
      distortion={0.2}
      hue-shift={30}
      intensity={1.0}
      className="w-full h-[500px]"
    />
  );
}

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

<template>
  <motion-specular-band
    color="#FF6900"
    background-color="#17181A"
    :speed="1.0"
    :distortion="0.2"
    :hue-shift="30"
    :intensity="1.0"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/specular-band-element.ts";
</script>

<motion-specular-band
  color="#FF6900"
  background-color="#17181A"
  speed={1.0}
  distortion={0.2}
  hueShift={30}
  intensity={1.0}
  class="w-full h-[500px]"
/>

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

<motion-specular-band
  color="#FF6900"
  background-color="#17181A"
  speed="1.0"
  distortion="0.2"
  hue-shift="30"
  intensity="1.0"
  class="w-full h-[500px]"
/>

API Reference

Attribute	Type	Default
`color`	`string`	`#FF6900`
`background-color`	`string`	`#17181A`
`speed`	`number`	`1.0`
`distortion`	`number`	`0.2`
`hue-shift`	`number`	`30.0`
`intensity`	`number`	`1.0`