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 motion-blocks add specular-band

npx motion-blocks add specular-band

bunx --bun motion-blocks add specular-band

yarn dlx motion-blocks add specular-band

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`