Hero Shader for Tunepact

Shaders

About

Sound wave inspired shader to celebrate the spirit of musicians.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Shader for Tunepact to your project and fits it to your theme.

Code

How Hero Shader for Tunepact is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DitheringShader } from "@/components/ui/hero-shader-for-tunepact";

export default function DemoOne() {
  return (
    <div className="relative flex h-[274px] w-[274px] items-center justify-center overflow-hidden bg-[#1f2423]">
      <DitheringShader
        shape="wave"
        type="8x8"
        colorBack="#1f2423"
        colorFront="#ff66c4"
        pxSize={1.5}
        speed={1.5}
        width={274}
        height={274}
        className="absolute inset-0 h-full w-full"
        style={{
          width: "274px",
          height: "274px",
        }}
      />
    </div>
  );
}