===== COMPONENT: book =====
Title: Book
Description: A book component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/book.tsx ---
import type React from 'react';
import type { CSSProperties } from 'react';
import '@/registry/styles/book.css';
import { cn } from '@/lib/utils';
import { VercelLogoIcon } from '@radix-ui/react-icons';

const defaultIllustration = (
  <svg
    fill="none"
    height="56"
    viewBox="0 0 36 56"
    width="36"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      clipRule="evenodd"
      d="M3.03113 28.0005C6.26017 23.1765 11.7592 20.0005 18 20.0005C24.2409 20.0005 29.7399 23.1765 32.9689 28.0005C29.7399 32.8244 24.2409 36.0005 18 36.0005C11.7592 36.0005 6.26017 32.8244 3.03113 28.0005Z"
      fill="#0070F3"
      fillRule="evenodd"
    />
    <path
      clipRule="evenodd"
      d="M32.9691 28.0012C34.8835 25.1411 36 21.7017 36 18.0015C36 8.06034 27.9411 0.00146484 18 0.00146484C8.05887 0.00146484 0 8.06034 0 18.0015C0 21.7017 1.11648 25.1411 3.03094 28.0012C6.25996 23.1771 11.7591 20.001 18 20.001C24.2409 20.001 29.74 23.1771 32.9691 28.0012Z"
      fill="#45DEC4"
      fillRule="evenodd"
    />
    <path
      clipRule="evenodd"
      d="M32.9692 28.0005C29.7402 32.8247 24.241 36.001 18 36.001C11.759 36.001 6.25977 32.8247 3.03077 28.0005C1.11642 30.8606 0 34.2999 0 38C0 47.9411 8.05887 56 18 56C27.9411 56 36 47.9411 36 38C36 34.2999 34.8836 30.8606 32.9692 28.0005Z"
      fill="#E5484D"
      fillRule="evenodd"
    />
  </svg>
);

const Book = ({
  title,
  enableTexture,
  width = 196,
  variant = 'stripe',
  color = '#e79d13',
  textColor = '#ffffff',
  illustration,
}: {
  title: string;
  enableTexture?: boolean;
  variant?: 'stripe' | 'simple';
  width?: number;
  color?: string;
  textColor?: string;
  illustration?: React.ReactNode;
}) => {
  return (
    <div
      className="book-perspective"
      style={{ '--book-width': width } as React.CSSProperties}
    >
      <div
        className={cn('book-rotate-wrapper book-color', {
          'book-stripe': variant === 'stripe',
          'book-simple': variant === 'simple',
        })}
        style={
          {
            '--book-color': color,
            '--book-text-color': textColor,
          } as React.CSSProperties
        }
      >
        <div
          className="stack-stack stack book-book"
          data-version="v1"
          style={
            {
              '--stack-flex': 'initial',
              '--stack-direction': 'column',
              '--stack-align': 'stretch',
              '--stack-justify': 'flex-start',
              '--stack-padding': '0px',
              '--stack-gap': '0px',
            } as React.CSSProperties
          }
        >
          <div
            className="stack-stack stack book-stripe"
            data-version="v1"
            aria-hidden="true"
            style={
              {
                '--stack-flex': 'initial',
                '--stack-direction': 'row',
                '--stack-align': 'stretch',
                '--stack-justify': 'flex-start',
                '--stack-padding': '0px',
                '--stack-gap': '8px',
              } as React.CSSProperties
            }
          >
            {variant === 'stripe' && illustration && (
              <div className="book-illustration">{illustration}</div>
            )}
            <div className="book-bind" />
          </div>
          <div
            className="stack-stack stack book-body"
            data-version="v1"
            style={
              {
                '--stack-flex': 'initial',
                '--stack-direction': 'row',
                '--stack-align': 'stretch',
                '--stack-justify': 'flex-start',
                '--stack-padding': '0px',
                '--stack-gap': '0px',
              } as React.CSSProperties
            }
          >
            <div aria-hidden="true" className="book-bind" />
            <div
              className="stack-stack stack book-content"
              data-version="v1"
              style={
                {
                  '--stack-flex': 'initial',
                  '--stack-direction': 'column',
                  '--stack-align': 'stretch',
                  '--stack-justify':
                    variant === 'stripe' ? 'space-between' : 'flex-start',
                  '--stack-padding': '0px',
                  '--stack-gap': '0px',
                } as React.CSSProperties
              }
            >
              <span className="book-title" data-version="v1">
                {title}
              </span>
              {variant === 'simple' && (
                <div className="book-illustration">
                  {illustration ? illustration : defaultIllustration}
                </div>
              )}
              {variant === 'stripe' && (
                <VercelLogoIcon
                  fill="black"
                  className=" geist-hide-on-dark text-black"
                />
              )}
            </div>
          </div>
          {enableTexture && (
            <div
              aria-hidden="true"
              className="book-texture"
              style={
                {
                  transform: 'rotate(0deg)',
                } as CSSProperties
              }
            />
          )}
        </div>
        <div aria-hidden="true" className="book-pages" />
        <div aria-hidden="true" className="book-back" />
      </div>
    </div>
  );
};

export default Book;

--- file: styles/book.css ---
.book-perspective {
  --book-default-width: 196;
  --book-depth: 29cqw;
  --book-border-radius: 6px 4px 4px 6px;
  --hover-rotate: -20deg;
  --hover-scale: 1.066;
  --hover-translate-x: -8px;
  --aspect-ratio: 49 / 60;
  --bg-shadow: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0) 12%,
      hsla(0, 0%, 100%, 0.25) 29.25%,
      hsla(0, 0%, 100%, 0) 50.5%,
      hsla(0, 0%, 100%, 0) 75.25%,
      hsla(0, 0%, 100%, 0.25) 91%,
      hsla(0, 0%, 100%, 0)
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.1) 12%,
      transparent 30%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.2) 73.5%,
      rgba(0, 0, 0, 0.5) 75.25%,
      rgba(0, 0, 0, 0.15) 85.25%,
      transparent
    );
  perspective: 900px;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}

@media (hover: hover) {
  .book-perspective:hover .book-rotate-wrapper {
    transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))
      translateX(var(--hover-translate-x));
  }
}

.book-rotate-wrapper {
  aspect-ratio: var(--aspect-ratio);
  width: -moz-fit-content;
  width: fit-content;
  transform: rotate(0deg);
  position: relative;
  transform-style: preserve-3d;
  min-width: calc(var(--book-width) * 1px);
  transition: transform .25s ease-out;
  container-type: inline-size;
}

.book-rotate-wrapper > :first-child {
  position: absolute;
  min-width: calc(var(--book-width) * 1px);
}

.book-rotate-wrapper .book-pages {
  background: linear-gradient(90deg, #eaeaea, transparent 70%),
    linear-gradient(#fff, #fafafa);
}

.book-rotate-wrapper .book-pages.book-textured {
  background: repeating-linear-gradient(
    90deg,
    #fff,
    #efefef 1px,
    #fff 3px,
    #9a9a9a 0
  );
}

.book-rotate-wrapper .book-pages {
  height: calc(100% - 2 * 3px);
  width: calc(var(--book-depth) - 2px);
  top: 3px;
  position: absolute;
  transform: translateX(
      calc(var(--book-width) * 1px - var(--book-depth) / 2 - 3px)
    )
    rotateY(90deg) translateX(calc(var(--book-depth) / 2));
}

.book-rotate-wrapper .book-back {
  position: absolute;
  left: 0;
  width: calc(var(--book-width) * 1px);
  height: 100%;
  border-radius: var(--book-border-radius);
  transform: translateZ(calc(-1 * var(--book-depth)));
}

.book-rotate-wrapper.book-stripe .book-content {
  gap: calc((24px / var(--book-default-width)) * var(--book-width));
}

.book-rotate-wrapper.book-stripe .book-content .book-title {
  line-height: 1.25em;
  font-size: 10.5cqw;
  letter-spacing: -.02em;
}

.book-rotate-wrapper.book-stripe .book-back {
  background-color: var(--book-color);
}

.book-rotate-wrapper.book-stripe .book-stripe {
  background: var(--book-color);
  width: 100%;
  position: relative;
  flex: 1 1;
  overflow: hidden;
}

.book-rotate-wrapper.book-stripe .book-stripe .book-illustration {
  -o-object-fit: cover;
  object-fit: cover;
}

.book-rotate-wrapper.book-stripe .book-stripe .book-bind {
  position: absolute;
  background: var(--bg-shadow);
  mix-blend-mode: overlay;
}

.book-rotate-wrapper.book-simple.book-color .book-book {
  background: var(--book-color);
}

.book-rotate-wrapper.book-simple.book-color .book-bind {
  mix-blend-mode: overlay;
  opacity: 1;
}

.book-rotate-wrapper.book-simple:not(.book-color) .book-book:after {
  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.1);
}

.book-rotate-wrapper.book-simple .book-back {
  background: var(--book-color);
}

.book-rotate-wrapper.book-simple .book-body {
  width: 100%;
  height: 100%;
}

.book-rotate-wrapper.book-simple .book-content {
  gap: calc((16px / var(--book-default-width)) * var(--book-width));
}

.book-rotate-wrapper.book-simple .book-content .book-title {
  line-height: 1.25em;
  font-size: 12cqw;
  letter-spacing: -.02em;
  text-shadow: 0 .025em .5px hsla(0, 0%, 100%, 0.5), -.02em -.02em .5px
    rgba(0, 0, 0, 0.5);
  text-shadow: 0 .025em .5px color-mix(in srgb, var(--book-color) 80%, #fff 20%),
    -.02em -.02em .5px color-mix(in srgb, var(--book-color) 80%, #000 20%);
}

.book-book {
  width: calc(var(--book-width) * 1px);
  height: 100%;
  border-radius: var(--book-border-radius);
  overflow: hidden;
  /* background: var(--ds-background-200); */
  position: relative;
  /* box-shadow: 0 1px 1px 0 rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.1),0 16px 24px -8px rgba(0,0,0,.03); */
  background: linear-gradient(
      180deg,
      hsla(0, 0%, 100%, 0.1),
      hsla(0, 0%, 100%, 0) 50%,
      hsla(0, 0%, 100%, 0)
    ), #1f1f1f;
  box-shadow:
    0 1.8px 3.6px rgba(0, 0, 0, 0.05), 0 10.8px 21.6px rgba(0, 0, 0, 0.08), inset 0 -.9px 0 rgba(
      0,
      0,
      0,
      0.1
    ), inset 0 1.8px 1.8px hsla(0, 0%, 100%, 0.1), inset 3.6px 0 3.6px rgba(
      0,
      0,
      0,
      0.1
    );
}

.book-book .book-texture {
  background-image: url(https://assets.vercel.com/image/upload/v1720554484/front/design/book-texture.avif);
  background-size: cover;
  position: absolute;
  inset: 0;
  border-radius: var(--book-border-radius);
  mix-blend-mode: hard-light;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  filter: brightness(1.1);
}

.book-book .book-texture {
  opacity: 1;
  filter: brightness(1);
}

.book-book:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ds-gray-alpha-400);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.3);
  pointer-events: none;
}

.book-book:after {
  border: none;
}

.book-book .book-bind {
  height: 100%;
  width: 8.2%;
}

.book-book .book-content {
  padding: 6.1%;
  container-type: inline-size;
  width: 100%;
}

.book-book .book-content .book-title {
  text-wrap: balance;
  color: var(--book-text-color);
}

.book-body .book-bind {
  min-width: 8.2%;
  background: var(--bg-shadow);
  opacity: 0.2;
}

@media screen and (max-width: 400px) {
  .book-perspective {
    --book-width: var(--xs-book-width, var(--sm-book-width));
  }
}

@media screen and (min-width: 401px) and (max-width: 600px) {
  .book-perspective {
    --book-width: var(--sm-book-width);
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  .book-perspective {
    --book-width: var(
      --smd-book-width,
      var(--md-book-width, var(--sm-book-width))
    );
  }
}

@media screen and (min-width: 769px) and (max-width: 960px) {
  .book-perspective {
    --book-width: var(
      --md-book-width,
      var(--smd-book-width, var(--sm-book-width))
    );
  }
}

@media screen and (min-width: 961px) {
  .book-perspective {
    --book-width: var(
      --lg-book-width,
      var(--md-book-width, var(--smd-book-width, var(--sm-book-width)))
    );
  }
}

@layer geist {
  .stack-stack {
    display: flex;
    flex-direction: var(--stack-direction, column);
    align-items: var(--stack-align, stretch);
    justify-content: var(--stack-justify, flex-start);
    flex: var(--stack-flex, initial);
    gap: var(--stack-gap, 0);
  }

  /* .stack_padding__ox8JS {
        padding: var(--stack-padding,0)
    } */

  @media screen and (max-width: 600px) {
    .stack-stack {
      --stack-direction: var(--sm-stack-direction);
      --stack-align: var(--sm-stack-align);
      --stack-justify: var(--sm-stack-justify);
      --stack-padding: var(--sm-stack-padding);
      --stack-gap: var(--sm-stack-gap);
    }
  }

  @media screen and (min-width: 601px) and (max-width: 960px) {
    .stack-stack {
      --stack-direction: var(--md-stack-direction, var(--sm-stack-direction));
      --stack-align: var(--md-stack-align, var(--sm-stack-align));
      --stack-justify: var(--md-stack-justify, var(--sm-stack-justify));
      --stack-padding: var(--md-stack-padding, var(--sm-stack-padding));
      --stack-gap: var(--md-stack-gap, var(--sm-stack-gap));
    }
  }

  @media screen and (min-width: 961px) and (max-width: 1200px) {
    .stack-stack {
      --stack-direction: var(
        --lg-stack-direction,
        var(--md-stack-direction, var(--sm-stack-direction))
      );
      --stack-align: var(
        --lg-stack-align,
        var(--md-stack-align, var(--sm-stack-align))
      );
      --stack-justify: var(
        --lg-stack-justify,
        var(--md-stack-justify, var(--sm-stack-justify))
      );
      --stack-padding: var(
        --lg-stack-padding,
        var(--md-stack-padding, var(--sm-stack-padding))
      );
      --stack-gap: var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)));
    }
  }

  @media screen and (min-width: 1201px) {
    .stack-stack {
      --stack-direction: var(
        --xl-stack-direction,
        var(
          --lg-stack-direction,
          var(--md-stack-direction, var(--sm-stack-direction))
        )
      );
      --stack-align: var(
        --xl-stack-align,
        var(--lg-stack-align, var(--md-stack-align, var(--sm-stack-align)))
      );
      --stack-justify: var(
        --xl-stack-justify,
        var(
          --lg-stack-justify,
          var(--md-stack-justify, var(--sm-stack-justify))
        )
      );
      --stack-padding: var(
        --xl-stack-padding,
        var(
          --lg-stack-padding,
          var(--md-stack-padding, var(--sm-stack-padding))
        )
      );
      --stack-gap: var(
        --xl-stack-gap,
        var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)))
      );
    }
  }
}


===== EXAMPLE: book-demo =====
Title: Book Demo

--- file: example/book-demo.tsx ---
import Book from '../bucharitesh/book';

const BookDemo = () => {
  return (
    <div className="grid w-full grid-cols-3 gap-10 rounded-xl bg-white p-6">
      <Book title="The user experience of the Frontend Cloud" />
    </div>
  );
};

export default BookDemo;


===== EXAMPLE: book-variant-demo =====
Title: Book Variant Demo

--- file: example/book-variant-demo.tsx ---
import { Leaf } from 'lucide-react';
import Book from '../bucharitesh/book';

const BookDemo = () => {
  return (
    <div className="grid w-full grid-cols-1 gap-8 rounded-xl bg-white p-6 md:grid-cols-2">
      <Book title="The user experience of the Frontend Cloud" />
      <Book
        title="The user experience of the Frontend Cloud"
        variant="simple"
        width={196}
      />
      <Book
        color="#9D2127"
        title="How Vercel improves your website's search engine ranking"
        enableTexture={true}
      />
      <Book
        color="#7DC1C1"
        textColor="white"
        title="Design Engineering at Vercel"
        variant="simple"
        enableTexture={true}
      />
      <Book color="#FED954" title="The user experience of the Frontend Cloud" />
      <Book
        illustration={
          <svg
            fill="none"
            height="149"
            viewBox="0 0 197 149"
            width="197"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect fill="#FED954" height="149" width="197" />
            <path
              d="M147 48.4995H172C185.531 48.4995 196.5 59.4685 196.5 72.9995V148.427"
              stroke="#ECAF14"
            />
            <path
              d="M0 48.5H24.5C38.031 48.5 49 37.531 49 24V0"
              stroke="#ECAF14"
            />
            <path
              d="M147.5 48.5H172C185.531 48.5 196.5 37.531 196.5 24V0"
              stroke="#ECAF14"
            />
            <path
              d="M0 48.5H24.5C38.031 48.5 49 59.469 49 73V98"
              stroke="#ECAF14"
            />
            <path
              d="M146 48.5H73.5C59.969 48.5 49 37.531 49 24V0"
              stroke="#ECAF14"
            />
            <path
              d="M196 48.5H122.5C108.969 48.5 98 37.531 98 24V0"
              stroke="#ECAF14"
            />
            <path
              d="M97 48.5H73.5C59.969 48.5 49 59.469 49 73V99.5"
              stroke="#ECAF14"
            />
            <path
              d="M98 132.5H122.5C136.031 132.5 147 121.531 147 108V98.9512"
              stroke="#ECAF14"
            />
            <path
              d="M196 132.5H171.5C157.969 132.5 147 121.531 147 108V48.5"
              stroke="#ECAF14"
            />
            <path
              d="M147 48.5H122.5C108.969 48.5 98 59.469 98 73V132"
              stroke="#ECAF14"
            />
            <path
              d="M98 132.5H73.5C59.969 132.5 49 121.531 49 108V98.9512"
              stroke="#ECAF14"
            />
          </svg>
        }
        title="The user experience of the Frontend Cloud"
      />
      <Book
        illustration={<Leaf />}
        title="The user experience of the Frontend Cloud"
        variant="simple"
      />
    </div>
  );
};

export default BookDemo;



===== COMPONENT: game-of-life =====
Title: Game of Life
Description: A game of life component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/game-of-life.tsx ---
'use client';

import { cn } from '@/lib/utils';
import * as React from 'react';

interface GameOfLifeProps
  extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
  size?: number;
  interval?: number;
  backgroundColor?: string;
  cellColor?: string;
  density?: number; // Value between 0 and 1, default 0.1 (10% cells alive)
}

const GameOfLife = React.forwardRef<HTMLCanvasElement, GameOfLifeProps>(
  (
    {
      className,
      size = 12,
      interval = 150,
      backgroundColor = '#000000',
      cellColor = '#1e1e1e',
      density = 0.1,
      ...props
    },
    ref
  ) => {
    const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
    const frameRef = React.useRef<number>(0);
    const gridRef = React.useRef<boolean[][]>([]);
    const lastUpdateRef = React.useRef<number>(0);
    const transitionRef = React.useRef<{
      from: boolean[][];
      to: boolean[][];
      progress: number;
    } | null>(null);
    const [isReady, setIsReady] = React.useState(false);
    const isInitialRender = React.useRef(true);

    React.useEffect(() => {
      const canvas = canvasRef.current;
      if (!canvas) return;

      const ctx = canvas.getContext('2d', { alpha: false });
      if (!ctx) return;

      const parent = canvas.parentElement;
      if (!parent) return;

      // Keep size constant
      const cellSize = size;
      let width = parent.clientWidth;
      let height = parent.clientHeight;
      let cols = Math.floor(width / cellSize);
      let rows = Math.floor(height / cellSize);

      const createGrid = (): boolean[][] => {
        const parent = canvas.parentElement;
        if (!parent)
          return Array.from({ length: cols }, () =>
            new Array(rows).fill(false)
          );

        width = parent.clientWidth;
        height = parent.clientHeight;
        cols = Math.floor(width / cellSize);
        rows = Math.floor(height / cellSize);

        // Update canvas size to match parent
        canvas.width = width;
        canvas.height = height;

        // Create a random initial pattern based on density prop
        const grid = Array.from({ length: cols }, () =>
          Array.from({ length: rows }, () => Math.random() < density)
        );

        return grid;
      };

      const updateGrid = (grid: boolean[][]): boolean[][] => {
        const next: boolean[][] = Array.from({ length: cols }, () =>
          new Array(rows).fill(false)
        );

        for (let i = 0; i < cols; i++) {
          for (let j = 0; j < rows; j++) {
            let neighbors = 0;

            for (let dx = -1; dx <= 1; dx++) {
              for (let dy = -1; dy <= 1; dy++) {
                if (dx === 0 && dy === 0) continue;
                const nx = (i + dx + cols) % cols;
                const ny = (j + dy + rows) % rows;
                neighbors += grid[nx][ny] ? 1 : 0;
              }
            }

            next[i][j] = neighbors === 3 || (grid[i][j] && neighbors === 2);
          }
        }

        return next;
      };

      const interpolateGrids = (fromGrid: boolean[][], toGrid: boolean[][]) => {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);

        for (let i = 0; i < cols; i++) {
          for (let j = 0; j < rows; j++) {
            const fromState = fromGrid[i][j];
            const toState = toGrid[i][j];

            if (fromState || toState) {
              ctx.fillStyle = cellColor;
              ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
            }
          }
        }
      };

      const render = (grid: boolean[][]) => {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);

        ctx.fillStyle = cellColor;

        for (let i = 0; i < cols; i++) {
          for (let j = 0; j < rows; j++) {
            if (grid[i][j]) {
              ctx.fillRect(i * size, j * size, size, size);
            }
          }
        }
      };

      const startTransition = (fromGrid: boolean[][], toGrid: boolean[][]) => {
        transitionRef.current = {
          from: fromGrid.map((row) => [...row]),
          to: toGrid.map((row) => [...row]),
          progress: 0,
        };
      };

      const animate = (timestamp: number) => {
        if (timestamp - lastUpdateRef.current >= interval) {
          if (gridRef.current) {
            const nextGrid = updateGrid(gridRef.current);
            startTransition(gridRef.current, nextGrid);
            gridRef.current = nextGrid;
          }
          lastUpdateRef.current = timestamp;
        }

        if (transitionRef.current) {
          const { from, to } = transitionRef.current;
          interpolateGrids(from, to);

          transitionRef.current.progress += 0.1;
          if (transitionRef.current.progress >= 1) {
            transitionRef.current = null;
            render(gridRef.current);
          }
        }

        frameRef.current = requestAnimationFrame(animate);
      };

      let resizeTimeout: NodeJS.Timeout;
      const handleResize = () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
          const parent = canvasRef.current?.parentElement;
          if (!parent) return;

          setIsReady(false);
          const newGrid = createGrid();

          if (gridRef.current) {
            startTransition(gridRef.current, newGrid);
          }

          gridRef.current = newGrid;
          setTimeout(() => setIsReady(true), 50);
        }, 250);
      };

      gridRef.current = createGrid();
      lastUpdateRef.current = performance.now();
      frameRef.current = requestAnimationFrame(animate);
      window.addEventListener('resize', handleResize);
      setIsReady(true);
      isInitialRender.current = false;

      return () => {
        cancelAnimationFrame(frameRef.current);
        window.removeEventListener('resize', handleResize);
        clearTimeout(resizeTimeout);
      };
    }, [size, interval, backgroundColor, cellColor]);

    return (
      <canvas
        ref={React.useMemo(
          () => (node: HTMLCanvasElement | null) => {
            if (typeof ref === 'function') ref(node);
            else if (ref) ref.current = node;
            canvasRef.current = node;
          },
          [ref]
        )}
        className={cn(
          'absolute inset-0 h-full w-full transition-opacity duration-500',
          isReady ? 'opacity-100' : 'opacity-0',
          className
        )}
        {...props}
      />
    );
  }
);

GameOfLife.displayName = 'GameOfLife';

export { GameOfLife };
export type { GameOfLifeProps };


===== EXAMPLE: game-of-life-demo =====
Title: Game of Life Demo

--- file: example/game-of-life-demo.tsx ---
import { GameOfLife } from '@/registry/bucharitesh/game-of-life';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative z-20 h-[500px] w-full overflow-hidden rounded-lg border bg-black">
      <GameOfLife
        size={10}
        interval={200}
        backgroundColor="#000000"
        cellColor="#1e1e1e"
      />
    </div>
  );
}


===== EXAMPLE: game-of-life-demo-2 =====
Title: Game of Life Demo 2

--- file: example/game-of-life-demo-2.tsx ---
import { GameOfLife } from '@/registry/bucharitesh/game-of-life';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative z-20 h-[500px] w-full overflow-hidden rounded-lg border bg-black">
      <GameOfLife
        size={20}
        interval={500}
        backgroundColor="#000000"
        cellColor="#ff0000"
      />
    </div>
  );
}



===== COMPONENT: magical-mouse =====
Title: Magical Mouse
Description: A magical mouse component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/magical-mouse.tsx ---
'use client';

import { cn } from '@/lib/utils';
import { Sparkle } from 'lucide-react';
import * as React from 'react';
import { createRoot } from 'react-dom/client';

interface Point {
  x: number;
  y: number;
}

interface MouseSparklesProps {
  /**
   * Custom icon component to render instead of the default Sparkle
   * @default Sparkle from lucide-react
   */
  icon?: React.ReactNode;
  /**
   * Duration of the star animation in milliseconds
   * @default 1500
   */
  starAnimationDuration?: number;
  /**
   * Minimum time between star spawns in milliseconds
   * @default 250
   */
  minimumTimeBetweenStars?: number;
  /**
   * Minimum distance between star spawns in pixels
   * @default 75
   */
  minimumDistanceBetweenStars?: number;
  /**
   * Duration of the glow effect in milliseconds
   * @default 75
   */
  glowDuration?: number;
  /**
   * Maximum spacing between glow points in pixels
   * @default 10
   */
  maximumGlowPointSpacing?: number;
  /**
   * Colors for the stars in RGB format
   * @default ["249 146 253", "252 254 255"]
   */
  colors?: string[];
  /**
   * Sizes for the stars
   * @default ["1.4rem", "1rem", "0.6rem"]
   */
  sizes?: string[];
  /**
   * Custom class name
   */
  className?: string;
}

const MouseSparkles = React.forwardRef<HTMLDivElement, MouseSparklesProps>(
  (
    {
      icon: Icon = <Sparkle className="h-full w-full" />,
      starAnimationDuration = 1500,
      minimumTimeBetweenStars = 250,
      minimumDistanceBetweenStars = 75,
      glowDuration = 75,
      maximumGlowPointSpacing = 10,
      colors = ['249 146 253', '252 254 255'],
      sizes = ['1.4rem', '1rem', '0.6rem'],
      className,
      ...props
    },
    ref
  ) => {
    const configRef = React.useRef({
      starAnimationDuration,
      minimumTimeBetweenStars,
      minimumDistanceBetweenStars,
      glowDuration,
      maximumGlowPointSpacing,
      colors,
      sizes,
      animations: ['fall-1', 'fall-2', 'fall-3'],
    });

    const lastRef = React.useRef({
      starTimestamp: Date.now(),
      starPosition: { x: 0, y: 0 },
      mousePosition: { x: 0, y: 0 },
    });

    let count = 0;

    const createStar = React.useCallback(
      (position: Point) => {
        const wrapper = document.createElement('div');
        const color = selectRandom(configRef.current.colors);
        const size = selectRandom(configRef.current.sizes);

        wrapper.className = cn(
          'absolute z-[10000] pointer-events-none',
          className
        );
        wrapper.style.left = `${position.x}px`;
        wrapper.style.top = `${position.y}px`;
        wrapper.style.fontSize = size;
        wrapper.style.color = `rgb(${color})`;
        wrapper.style.textShadow = `0px 0px 1.5rem rgb(${color} / 0.5)`;
        wrapper.style.animationName = configRef.current.animations[count++ % 3];
        wrapper.style.animationDuration = `${configRef.current.starAnimationDuration}ms`;
        wrapper.style.animationFillMode = 'forwards';

        document.body.appendChild(wrapper);

        const root = createRoot(wrapper);
        root.render(Icon);

        setTimeout(() => {
          root.unmount();
          document.body.removeChild(wrapper);
        }, configRef.current.starAnimationDuration);
      },
      [Icon, className]
    );

    const createGlowPoint = React.useCallback(
      (position: Point) => {
        const glow = document.createElement('div');
        glow.className = cn('absolute z-[9999] pointer-events-none', className);
        glow.style.left = `${position.x}px`;
        glow.style.top = `${position.y}px`;
        glow.style.boxShadow = '0rem 0rem 1.2rem 0.6rem rgb(239 42 201)';

        document.body.appendChild(glow);
        setTimeout(
          () => document.body.removeChild(glow),
          configRef.current.glowDuration
        );
      },
      [className]
    );

    const createGlow = React.useCallback(
      (last: Point, current: Point) => {
        const distance = calcDistance(last, current);
        const quantity = Math.max(
          Math.floor(distance / configRef.current.maximumGlowPointSpacing),
          1
        );

        const dx = (current.x - last.x) / quantity;
        const dy = (current.y - last.y) / quantity;

        Array.from({ length: quantity }).forEach((_, index) => {
          const x = last.x + dx * index;
          const y = last.y + dy * index;
          createGlowPoint({ x, y });
        });
      },
      [createGlowPoint]
    );

    const handleOnMove = React.useCallback(
      (e: { clientX: number; clientY: number }) => {
        const mousePosition = { x: e.clientX, y: e.clientY };

        if (
          lastRef.current.mousePosition.x === 0 &&
          lastRef.current.mousePosition.y === 0
        ) {
          lastRef.current.mousePosition = mousePosition;
        }

        const now = Date.now();
        const hasMovedFarEnough =
          calcDistance(lastRef.current.starPosition, mousePosition) >=
          configRef.current.minimumDistanceBetweenStars;
        const hasBeenLongEnough =
          now - lastRef.current.starTimestamp >
          configRef.current.minimumTimeBetweenStars;

        if (hasMovedFarEnough || hasBeenLongEnough) {
          createStar(mousePosition);
          lastRef.current.starTimestamp = now;
          lastRef.current.starPosition = mousePosition;
        }

        createGlow(lastRef.current.mousePosition, mousePosition);
        lastRef.current.mousePosition = mousePosition;
      },
      [createStar, createGlow]
    );

    React.useEffect(() => {
      window.addEventListener('mousemove', handleOnMove);
      window.addEventListener('touchmove', (e) => handleOnMove(e.touches[0]));
      document.body.addEventListener('mouseleave', () => {
        lastRef.current.mousePosition = { x: 0, y: 0 };
      });

      return () => {
        window.removeEventListener('mousemove', handleOnMove);
        window.removeEventListener('touchmove', (e) =>
          handleOnMove(e.touches[0])
        );
        document.body.removeEventListener('mouseleave', () => {
          lastRef.current.mousePosition = { x: 0, y: 0 };
        });
      };
    }, [handleOnMove]);

    return null;
  }
);

export function rand(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

export function selectRandom<T>(items: T[]): T {
  return items[rand(0, items.length - 1)];
}

export function calcDistance(a: Point, b: Point) {
  const diffX = b.x - a.x;
  const diffY = b.y - a.y;
  return Math.sqrt(diffX ** 2 + diffY ** 2);
}

MouseSparkles.displayName = 'MouseSparkles';

export { MouseSparkles };


===== EXAMPLE: magical-mouse-demo =====
Title: Magical Mouse Demo

--- file: example/magical-mouse-demo.tsx ---
import { MouseSparkles } from '@/registry/bucharitesh/magical-mouse';

const MagicalMouseDemo = () => {
  return (
    <div
      className="h-[400px] w-full overflow-hidden rounded-xl bg-white"
      style={{
        background:
          'linear-gradient(145deg, rgb(119, 46, 195), rgb(58, 18, 153))',
      }}
    >
      <MouseSparkles />
    </div>
  );
};

export default MagicalMouseDemo;



===== COMPONENT: metallic-button =====
Title: Metallic Button
Description: A liquid metal button with WebGL shader background and prismatic outline ring.

--- file: bucharitesh/metallic-button.tsx ---
'use client';

import { cn } from '@/lib/utils';
import { LiquidMetal } from '@paper-design/shaders-react';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';

const metallicButtonVariants = cva(
  'group relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none select-none transition-transform active:scale-95 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      size: {
        sm: 'size-12 [&_svg:not([class*=size-])]:size-4',
        default: 'size-16 [&_svg:not([class*=size-])]:size-5',
        lg: 'size-20 [&_svg:not([class*=size-])]:size-6',
      },
    },
    defaultVariants: {
      size: 'default',
    },
  }
);

export interface MetallicButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof metallicButtonVariants> {
  /** Inner face gradient top color */
  lightColor?: string;
  /** Inner face gradient bottom color */
  darkColor?: string;
  /** Icon / content color */
  iconColor?: string;
  /** Shader animation speed (0 = static) */
  speed?: number;
  /** Shader pattern stripe density */
  repetition?: number;
  /** Shader noise distortion (0-1) */
  distortion?: number;
  /** Shader pattern angle (0-360) */
  angle?: number;
}

const MetallicButton = React.forwardRef<HTMLButtonElement, MetallicButtonProps>(
  (
    {
      children,
      className,
      size,
      lightColor = '#444',
      darkColor = '#000',
      iconColor = '#65615f',
      speed = 0.5,
      repetition = 1.5,
      distortion = 0,
      angle = 100,
      ...props
    },
    ref
  ) => {
    return (
      <button
        ref={ref}
        className={cn(metallicButtonVariants({ size }), className)}
        {...props}
      >
        <div className="absolute inset-0 overflow-hidden rounded-full">
          <LiquidMetal
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
            }}
            speed={speed}
            repetition={repetition}
            distortion={distortion}
            softness={0.5}
            shiftRed={0.3}
            shiftBlue={0.3}
            contour={0}
            angle={angle}
            scale={1.5}
            shape="circle"
            offsetX={0.1}
            offsetY={-0.1}
          />
        </div>

        <div
          className="absolute inset-[5%] rounded-full"
          style={{
            background: `linear-gradient(${lightColor}, ${darkColor})`,
            boxShadow: 'inset 0 2px 2px 2px rgba(255,255,255,0.3)',
          }}
        />

        <div
          className="pointer-events-none absolute inset-[-2%] rounded-full grayscale transition-[filter] duration-300 group-hover:grayscale-0"
          style={{
            padding: 2,
            WebkitMask:
              'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
            WebkitMaskComposite: 'xor',
            mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
            maskComposite: 'exclude',
          }}
        />

        <span className="relative z-10" style={{ color: iconColor }}>
          {children}
        </span>
      </button>
    );
  }
);
MetallicButton.displayName = 'MetallicButton';

export { MetallicButton, metallicButtonVariants };


===== EXAMPLE: metallic-button-demo =====
Title: Metallic Button Demo

--- file: example/metallic-button-demo.tsx ---
import { MetallicButton } from '@/registry/bucharitesh/metallic-button';

export default function MetallicButtonDemo() {
  return (
    <div className="flex items-center justify-center gap-10 p-20">
      <MetallicButton size="sm" aria-label="Send">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          fill="currentColor"
          className="-rotate-45"
        >
          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
        </svg>
      </MetallicButton>

      <MetallicButton aria-label="Send">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          fill="currentColor"
          className="-rotate-45"
        >
          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
        </svg>
      </MetallicButton>

      <MetallicButton size="lg" aria-label="Send">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          fill="currentColor"
          className="-rotate-45"
        >
          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
        </svg>
      </MetallicButton>
    </div>
  );
}



===== COMPONENT: modern-progress =====
Title: Modern Progress
Description: A modern progress component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/modern-progress.tsx ---
import { cn } from '@/lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';

const progressVariants = cva(
  'relative flex w-full items-center justify-center overflow-hidden',
  {
    variants: {
      variant: {
        default: 'border-4 border-primary bg-neutral-950',
        secondary: 'border-4 border-secondary bg-neutral-900',
        destructive: 'border-4 border-destructive bg-neutral-950',
      },
      radius: {
        default: 'rounded-3xl',
        full: 'rounded-full',
        none: 'rounded-none',
      },
    },
    defaultVariants: {
      variant: 'default',
      radius: 'default',
    },
  }
);

const indicatorVariants = cva(
  'absolute bottom-0 left-0 z-20 w-full transition-[height,background-color] duration-300',
  {
    variants: {
      variant: {
        default: 'bg-primary',
        secondary: 'bg-secondary',
        destructive: 'bg-destructive',
      },
      striped: {
        true: '[&>div]:bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] [&>div]:bg-size-1',
        false: '',
      },
    },
    defaultVariants: {
      variant: 'default',
      striped: true,
    },
  }
);

export interface ProgressProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof progressVariants> {
  value?: number;
  max?: number;
  striped?: boolean;
  indicatorClassName?: string;
  showText?: boolean;
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  (
    {
      className,
      value = 0,
      max = 100,
      variant,
      radius,
      striped = true,
      indicatorClassName,
      showText,
      ...props
    },
    ref
  ) => {
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);

    return (
      <div
        ref={ref}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={value}
        className={cn(progressVariants({ variant, radius }), className)}
        {...props}
      >
        <div className="relative aspect-video w-full">
          <div
            className={cn(
              indicatorVariants({ variant, striped }),
              indicatorClassName
            )}
            style={{
              height: `${percentage}%`,
            }}
          >
            <div
              data-pattern="stripes"
              className="relative z-10 h-full w-full transition-colors duration-300"
            />
          </div>
          {showText && (
            <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 z-20 flex h-full w-full items-center justify-center">
              <span className="font-bold text-5xl text-white">
                {percentage.toFixed(0)}
                <span className="font-medium text-base text-white">%</span>
              </span>
            </div>
          )}
        </div>
      </div>
    );
  }
);
Progress.displayName = 'Progress';

export { Progress };


===== EXAMPLE: modern-progress-demo =====
Title: Modern Progress Demo

--- file: example/modern-progress-demo.tsx ---
'use client';

import { Progress } from '@/registry/bucharitesh/modern-progress';
import { useState } from 'react';
import { useEffect } from 'react';

const ProgressDemo = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(progress + 1);
    }, 100);
    return () => clearInterval(interval);
  }, [progress]);

  return (
    <div className="flex h-full w-full items-center justify-center p-10">
      <Progress
        value={progress}
        className="border-purple-500"
        indicatorClassName="bg-purple-500"
        showText
      />
    </div>
  );
};

export default ProgressDemo;



===== COMPONENT: pixel-icon =====
Title: Pixel Icon
Description: A pixel icon component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/pixel-icon.tsx ---
'use client';

import type React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

interface PixelIconProps {
  icon: number[][];
  baseColor: string;
  flickerColor: string;
  secondaryColor?: string;
  size?: number;
  flickerChance?: number;
  pixelShape?: 'circle' | 'square';
  className?: string;
}

const PixelIcon: React.FC<PixelIconProps> = ({
  icon,
  baseColor,
  flickerColor,
  secondaryColor = 'gray',
  size = 80,
  flickerChance = 0.3,
  pixelShape = 'circle',
  className,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isHovering, setIsHovering] = useState(false);
  const [isInView, setIsInView] = useState(false);

  const memoizedColors = useMemo(() => {
    const toRGB = (color: string): [number, number, number] => {
      if (typeof window === 'undefined') {
        return [0, 0, 0];
      }
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 1;
      const ctx = canvas.getContext('2d');
      if (!ctx) return [255, 0, 0];
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, 1, 1);
      const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
      return [r, g, b];
    };

    const createShades = (
      color: [number, number, number],
      isDarker: boolean
    ) => {
      const shades: any = [];
      if (isDarker) {
        // Create more distinct dark shades
        const darkFactors = [0.7, 0.8, 0.9, 1.0];
        for (const factor of darkFactors) {
          shades.push(
            color.map((c) => Math.floor(c * factor)) as [number, number, number]
          );
        }
      } else {
        // Keep the original logic for lighter shades
        for (let i = 0; i < 4; i++) {
          const factor = 0.7 + (0.6 * i) / 3; // Range from 0.7 to 1.3
          shades.push(
            color.map((c) => Math.min(255, Math.floor(c * factor))) as [
              number,
              number,
              number,
            ]
          );
        }
      }
      return shades;
    };

    const baseRGB = toRGB(baseColor);
    const flickerRGB = toRGB(flickerColor);
    const secondaryRGB = toRGB(secondaryColor);

    return {
      base: `rgb(${baseRGB.join(',')})`,
      flickerDark: createShades(flickerRGB, true),
      flickerLight: createShades(flickerRGB, false),
      secondary: `rgb(${secondaryRGB.join(',')})`,
    };
  }, [baseColor, flickerColor, secondaryColor]);

  const setupCanvas = useCallback(
    (canvas: HTMLCanvasElement) => {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = size * dpr;
      canvas.height = size * dpr;
      canvas.style.width = `${size}px`;
      canvas.style.height = `${size}px`;

      const pixelSize = size / icon.length;
      const pixelStates = icon.map((row) =>
        row.map((pixel) => ({
          type: pixel,
          shadeIndex: 3, // Start with the brightest shade
        }))
      );

      return {
        pixelSize,
        pixelStates,
        dpr,
      };
    },
    [icon, size]
  );

  const updatePixels = useCallback(
    (
      pixelStates: { type: number; shadeIndex: number }[][],
      deltaTime: number
    ) => {
      if (!isHovering) return;

      pixelStates.forEach((row) => {
        row.forEach((pixel) => {
          if (pixel.type !== 0 && Math.random() < flickerChance * deltaTime) {
            if (pixel.type === 1) {
              // Darker shades for type 1
              pixel.shadeIndex = Math.floor(Math.random() * 4); // 0 to 3
            } else if (pixel.type === 2) {
              // Lighter shades for type 2
              pixel.shadeIndex = Math.floor(Math.random() * 4); // 0 to 3
            }
          }
        });
      });
    },
    [isHovering, flickerChance]
  );

  const drawIcon = useCallback(
    (
      ctx: CanvasRenderingContext2D,
      pixelSize: number,
      pixelStates: { type: number; shadeIndex: number }[][],
      dpr: number
    ) => {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      pixelStates.forEach((row, y) => {
        row.forEach((pixel, x) => {
          if (pixel.type === 0) return;

          let color: any;

          if (isHovering) {
            if (pixel.type === 2) {
              color = `rgb(${memoizedColors.flickerDark[pixel.shadeIndex].join(',')})`;
            } else if (pixel.type === 1) {
              color = `rgb(${memoizedColors.flickerLight[pixel.shadeIndex].join(',')})`;
            }
          } else {
            color =
              pixel.type === 1 ? memoizedColors.base : memoizedColors.secondary;
          }

          ctx.fillStyle = (color as string) ?? '';

          if (pixelShape === 'circle') {
            ctx.beginPath();
            ctx.arc(
              (x * pixelSize + pixelSize / 2) * dpr,
              (y * pixelSize + pixelSize / 2) * dpr,
              (pixelSize / 2) * dpr,
              0,
              Math.PI * 2
            );
            ctx.fill();
          } else {
            ctx.fillRect(
              x * pixelSize * dpr,
              y * pixelSize * dpr,
              pixelSize * dpr,
              pixelSize * dpr
            );
          }
        });
      });
    },
    [memoizedColors, isHovering, pixelShape]
  );

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let animationFrameId: number;
    const { pixelSize, pixelStates, dpr } = setupCanvas(canvas);

    let lastTime = 0;
    const animate = (time: number) => {
      if (!isInView) return;

      const deltaTime = (time - lastTime) / 1000;
      lastTime = time;

      updatePixels(pixelStates, deltaTime);
      drawIcon(ctx, pixelSize, pixelStates, dpr);
      animationFrameId = requestAnimationFrame(animate);
    };

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting);
      },
      { threshold: 0 }
    );

    observer.observe(canvas);

    if (isInView) {
      animationFrameId = requestAnimationFrame(animate);
    }

    return () => {
      cancelAnimationFrame(animationFrameId);
      observer.disconnect();
    };
  }, [setupCanvas, updatePixels, drawIcon, isInView]);

  return (
    <div
      role="img"
      aria-label="Pixel icon"
      className={`box-border cursor-pointer ${className}`}
      style={{ width: `${size}px`, height: `${size}px` }}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <canvas
        ref={canvasRef}
        className="h-full w-full"
        width={size}
        height={size}
      />
    </div>
  );
};

export default PixelIcon;


===== EXAMPLE: pixel-icon-demo =====
Title: Pixel Icon Demo

--- file: example/pixel-icon-demo.tsx ---
'use client';
import PixelIcon from '@/registry/bucharitesh/pixel-icon';

export const PixelIconData = [
  {
    name: 'nextjs',
    color: '#005738',
    code: [
      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
  {
    name: 'astro',
    color: '#005738',
    code: [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
  {
    name: 'angular',
    color: '#B8032B',
    code: [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 0, 0, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
  {
    name: 'svelte',
    color: '#FF3801',
    code: [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
  {
    name: 'mic',
    color: '#FF3801',
    code: [
      [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
      [0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0],
      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
      [0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0],
      [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1],
      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1],
      [1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1],
      [0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
      [0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0],
      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
  {
    name: 'test',
    color: '#B8032B',
    code: [
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
      [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
  },
];

const PixelIconDemo = () => {
  return (
    <div className="relative flex w-full items-center justify-center overflow-hidden rounded-lg bg-white p-10">
      <div className="grid w-full grid-cols-3 place-items-center gap-4">
        {PixelIconData.map((icon) => {
          return (
            <div
              key={icon.name}
              className="group relative flex items-center justify-center p-4"
            >
              <PixelIcon
                icon={icon.code}
                baseColor="#000000"
                flickerColor={icon.color}
                secondaryColor="gray"
                size={60}
                flickerChance={0.2}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default PixelIconDemo;



===== COMPONENT: split-text-effect =====
Title: Split Text Effect
Description: A split text effect component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/split-text-effect.tsx ---
'use client';

import { cn } from '@/lib/utils';
import { motion, useSpring, useTransform } from 'motion/react';
import * as React from 'react';

interface CrossProps extends React.HTMLAttributes<HTMLDivElement> {
  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  color?: string;
}

const Cross = React.forwardRef<HTMLDivElement, CrossProps>(
  ({ position, className, color, ...props }, ref) => {
    const positionClasses = {
      'top-left': '-top-px -left-px rotate-0',
      'top-right': '-top-px -right-px rotate-90',
      'bottom-left': 'bottom-[-2px] -left-px -rotate-90',
      'bottom-right': 'bottom-[-2px] -right-px -rotate-180',
    };

    return (
      <div
        ref={ref}
        aria-hidden="true"
        className={cn(
          'absolute h-[15px] w-[15px] cursor-pointer',
          positionClasses[position],
          className
        )}
        data-position={position}
        {...props}
      >
        <div
          className="absolute top-0 left-0 h-px w-[15px]"
          style={{ backgroundColor: color }}
        />
        <div
          className="absolute bottom-0 left-0 h-[15px] w-px"
          style={{ backgroundColor: color }}
        />
      </div>
    );
  }
);
Cross.displayName = 'Cross';

interface SplitTextEffectProps extends React.HTMLAttributes<HTMLDivElement> {
  text: string | React.ReactNode;
  fill?: number;
  accent?: string;
}

const SplitTextEffect = React.forwardRef<HTMLDivElement, SplitTextEffectProps>(
  ({ text, fill = 0.5, accent = '#006efe', className, ...props }, ref) => {
    const containerRef = React.useRef<HTMLDivElement>(null);
    const lineRef = React.useRef<HTMLDivElement>(null);
    const [hasMounted, setHasMounted] = React.useState(false);

    React.useEffect(() => {
      setHasMounted(true);
    }, []);

    const smoothY = useSpring(0, {
      stiffness: 100,
      damping: 20,
    });

    React.useEffect(() => {
      if (!hasMounted || !containerRef.current) return;

      const container = containerRef.current;
      const height = container.offsetHeight;
      const initialY = Math.min(
        Math.max(height * (1 - fill), height * 0.1),
        height * 0.9
      );

      smoothY.set(initialY);
    }, [hasMounted, fill]);

    const handleMouseMove = (e: React.MouseEvent) => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      const height = rect.height;

      // Calculate y position and clamp between 20% and 80% of height
      const rawY = e.clientY - rect.top;
      const clampedY = Math.min(Math.max(rawY, height * 0.1), height * 0.9);
      smoothY.set(clampedY);
    };

    const handleMouseLeave = () => {
      if (!containerRef.current) return;
      const height = containerRef.current.offsetHeight;
      // Reset to initial fill position, but respect the 20%-80% bounds
      const resetY = Math.min(
        Math.max(height * (1 - fill), height * 0.1),
        height * 0.9
      );
      smoothY.set(resetY);
    };

    return (
      <div
        ref={containerRef}
        className={cn(
          'relative flex h-full w-full items-center justify-center bg-white p-20 text-5xl dark:bg-black',
          className
        )}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        {...props}
      >
        <Cross position="top-left" color={accent} />
        <Cross position="top-right" color={accent} />
        <Cross position="bottom-left" color={accent} />
        <Cross position="bottom-right" color={accent} />

        <div className="z-0 flex h-full w-full items-center justify-center text-black dark:text-white">
          {text}
        </div>

        <motion.div
          ref={lineRef}
          aria-hidden="true"
          className="absolute inset-0 z-20 h-1 select-none border-t-white dark:border-t-black"
          style={{
            opacity: 1,
            y: smoothY,
            borderTopWidth: '2px',
            borderBottomWidth: '2px',
            borderBottomColor: accent,
          }}
        />

        <motion.div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 bottom-0 left-0 z-2 flex select-none items-center justify-center"
          style={{
            opacity: 1,
            clipPath: useTransform(
              smoothY,
              (value) => `inset(${value}px 0 0 0)`
            ),
          }}
        >
          <div
            className="absolute inset-0"
            style={{
              background: `linear-gradient(180deg, ${accent} 0, transparent 100%)`,
            }}
          />
          <div
            className="text-white dark:text-black"
            style={{
              textShadow: `-1px -1px 0 ${accent}, 1px -1px 0 ${accent}, -1px 1px 0 ${accent}, 1px 1px 0 ${accent}`,
            }}
          >
            {text}
          </div>
        </motion.div>
      </div>
    );
  }
);
SplitTextEffect.displayName = 'SplitTextEffect';

export { SplitTextEffect };


===== EXAMPLE: split-text-effect-demo =====
Title: Split Text Effect Demo

--- file: example/split-text-effect-demo.tsx ---
import { SplitTextEffect } from '@/registry/bucharitesh/split-text-effect';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative w-full bg-black">
      <div className="h-72">
        <SplitTextEffect text="Grow Together" fill={0.5} accent="#2ecc71" />
      </div>
    </div>
  );
}


===== EXAMPLE: split-text-effect-demo-2 =====
Title: Split Text Effect Demo 2

--- file: example/split-text-effect-demo-2.tsx ---
import { SplitTextEffect } from '@/registry/bucharitesh/split-text-effect';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative w-full bg-black">
      <div className="h-96">
        <SplitTextEffect
          text={
            <>
              MAKE AN
              <br />
              IMPACT
            </>
          }
          accent="#ed8936"
          className="font-black tracking-tight"
        />
      </div>
    </div>
  );
}


===== EXAMPLE: split-text-effect-demo-3 =====
Title: Split Text Effect Demo 3

--- file: example/split-text-effect-demo-3.tsx ---
import { SplitTextEffect } from '@/registry/bucharitesh/split-text-effect';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative w-full bg-black">
      <div className="h-72">
        <SplitTextEffect
          text={
            <>
              Security that <br /> scales with you.
            </>
          }
          fill={0.45}
          accent="#006efe"
        />
      </div>
    </div>
  );
}



===== COMPONENT: text-highlight =====
Title: Text Highlight
Description: A highlighted text effect component using CSS conic and linear gradients with multiple color presets.

--- file: bucharitesh/text-highlight.tsx ---
import { cn } from '@/lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';

function buildHighlightBackground(rgb: string, angle: string) {
  return [
    `conic-gradient(at 0 100%, rgb(${rgb} / 100%) 1%, #fff0 3%) no-repeat 0 0 / auto 120%`,
    `conic-gradient(from 180deg at 100% 0, #fff0, rgb(${rgb} / 100%) 1%, #fff0 4%) no-repeat 100% 100% / auto 120%`,
    `linear-gradient(${angle}, rgb(${rgb} / 60%), rgb(${rgb} / 20%) 75%, rgb(${rgb} / 55%)) no-repeat center / auto`,
  ].join(', ');
}

const textHighlightVariants = cva(
  'relative inline-block w-fit select-none whitespace-nowrap text-center font-semibold',
  {
    variants: {
      size: {
        sm: 'px-2 py-1 text-lg',
        default: 'px-3 py-1.5 text-2xl',
        lg: 'px-4 py-2 text-4xl',
      },
    },
    defaultVariants: {
      size: 'default',
    },
  }
);

export interface TextHighlightProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof textHighlightVariants> {
  /** RGB values (space-separated, e.g. "255 232 62") */
  color: string;
  /** Gradient angle (e.g. "50deg") */
  angle?: string;
  /** Rotation applied to the highlight (e.g. "1deg") */
  rotate?: string;
  /** Scale applied to the highlight (e.g. "1.1") */
  scale?: string;
  /** Skew applied to the highlight (e.g. "-5deg") */
  skew?: string;
}

const TextHighlight = React.forwardRef<HTMLSpanElement, TextHighlightProps>(
  (
    {
      children,
      className,
      size,
      color,
      angle = '50deg',
      rotate = '0deg',
      scale = '1',
      skew = '0deg',
      ...props
    },
    ref
  ) => {
    return (
      <span
        ref={ref}
        className={cn(textHighlightVariants({ size }), className)}
        {...props}
      >
        <span
          aria-hidden="true"
          className="absolute inset-0"
          style={{
            zIndex: -1,
            borderRadius: '3px 5px 3px 5px',
            background: buildHighlightBackground(color, angle),
            rotate,
            scale,
            transform: `skew(${skew})`,
          }}
        />
        {children}
      </span>
    );
  }
);
TextHighlight.displayName = 'TextHighlight';

export { TextHighlight, textHighlightVariants };


===== EXAMPLE: text-highlight-demo =====
Title: Text Highlight Demo

--- file: example/text-highlight-demo.tsx ---
import { TextHighlight } from '@/registry/bucharitesh/text-highlight';

export default function TextHighlightDemo() {
  return (
    <div className="flex flex-col items-center justify-center gap-5 p-10">
      <TextHighlight
        color="255 232 62"
        angle="50deg"
        rotate="1deg"
        scale="1.1"
        skew="-5deg"
      >
        this is important
      </TextHighlight>
      <TextHighlight
        color="91 233 92"
        angle="30deg"
        scale="0.92"
        skew="7deg"
      >
        wait, this is also important
      </TextHighlight>
      <TextHighlight
        color="255 100 185"
        angle="150deg"
        rotate="0.5deg"
        skew="5deg"
      >
        wow, almost forgot this
      </TextHighlight>
    </div>
  );
}



===== COMPONENT: view-magnifier =====
Title: View Magnifier
Description: A view magnifier component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.

--- file: bucharitesh/view-magnifier.tsx ---
'use client';

import { cn } from '@/lib/utils';
import { animate, motion, useMotionValue, useTransform } from 'motion/react';
import type React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';

interface ViewMagnifierProps {
  children: React.ReactNode;
  className?: string;
  maxScale?: number;
  onScaleChange?: (isActive: boolean) => void;
  onMaxScaleReached?: (isAtMax: boolean) => void;
}

const ViewMagnifier: React.FC<ViewMagnifierProps> = ({
  className,
  children,
  maxScale = 1.8,
  onScaleChange,
  onMaxScaleReached,
  ...props
}) => {
  const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
  const [zoomLevel, setZoomLevel] = useState<number>(100);
  const [isAtMaxScale, setIsAtMaxScale] = useState<boolean>(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const startX = useRef<number>(0);
  const initialScale = useRef<number>(1);
  const scale = useMotionValue(1);
  const opacity = useTransform(scale, [1, maxScale], [0, 1]);
  const containerScale = useTransform(scale, [1, maxScale], [1, 1.6]);

  // Monitor scale changes for max scale callback
  useEffect(() => {
    const unsubscribe = scale.on('change', (latestScale) => {
      const newIsAtMaxScale = Math.abs(latestScale - maxScale) < 0.01;
      if (newIsAtMaxScale !== isAtMaxScale) {
        setIsAtMaxScale(newIsAtMaxScale);
        onMaxScaleReached?.(newIsAtMaxScale);
      }
    });

    return () => unsubscribe();
  }, [scale, maxScale, isAtMaxScale, onMaxScaleReached]);

  const handleZoomAnimation = useCallback(
    (targetScale: number) => {
      animate(scale, targetScale, {
        type: 'spring',
        stiffness: 400,
        damping: 30,
        onUpdate: (latest) => setZoomLevel(Math.round(latest * 100)),
      });
    },
    [scale]
  );

  const handlePointerDown = useCallback(
    (e: React.PointerEvent<HTMLButtonElement>): void => {
      setIsMouseDown(true);
      startX.current = e.clientX;
      initialScale.current = scale.get();
      e.currentTarget.setPointerCapture(e.pointerId);
      onScaleChange?.(true);
    },
    [scale, onScaleChange]
  );

  const handlePointerUp = useCallback(
    (e: React.PointerEvent<HTMLButtonElement>): void => {
      if (isMouseDown) {
        setIsMouseDown(false);
        handleZoomAnimation(1);
        e.currentTarget.releasePointerCapture(e.pointerId);
        onScaleChange?.(false);
      }
    },
    [isMouseDown, handleZoomAnimation, onScaleChange]
  );

  const handlePointerMove = useCallback(
    (e: React.PointerEvent<HTMLButtonElement>): void => {
      if (!isMouseDown) return;

      const deltaX = e.clientX - startX.current;
      const scaleChange = deltaX * 0.005;
      const newScale = Math.max(
        0.8,
        Math.min(maxScale, initialScale.current + scaleChange)
      );

      scale.set(newScale);
      setZoomLevel(Math.round(newScale * 100));
    },
    [isMouseDown, maxScale, scale]
  );

  return (
    <div ref={containerRef} className="outline-hidden" {...props}>
      <motion.div
        className={cn(
          'pointer-events-none fixed inset-0 h-screen w-screen outline-hidden backdrop-blur-xl z-[9999]',
          'after:inset-0 after:h-full after:w-full after:rounded-[inherit] after:content-[""]',
          'after:pointer-events-none after:absolute dark:after:block',
          'dark:after:shadow-[inset_0_0_0_1px_hsla(0,0%,100%,0.2)]'
        )}
        style={{ opacity }}
        aria-hidden="true"
      />

      <motion.div
        className={cn(
          'relative right-1/2 left-1/2 my-3 h-auto w-full overflow-visible z-[10000]',
          'rounded-2xl',
          'transform lg:transform-none',
          className
        )}
        style={{
          scale: containerScale,
          translateX: '-50%',
          translateZ: '0px',
        }}
        role="img"
        aria-label={`Content at zoom level ${zoomLevel}%`}
      >
        <div className="relative h-full w-full overflow-hidden rounded-2xl">
          {children}
        </div>

        <motion.div
          style={{ opacity }}
          className="absolute inset-0 h-full w-full rounded-[inherit] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.02),0px_16px_24px_-4px_rgba(0,0,0,0.04),0px_32px_48px_-8px_rgba(0,0,0,0.06)]"
          aria-hidden="true"
        />

        <motion.button
          onPointerDown={handlePointerDown}
          onPointerUp={handlePointerUp}
          onPointerMove={handlePointerMove}
          onPointerLeave={handlePointerUp}
          style={{
            scale: containerScale,
            translateY: '-50%',
            translateZ: '0px',
          }}
          aria-label={`Drag to zoom. Current zoom level: ${zoomLevel}%`}
          aria-valuemin={80}
          aria-valuemax={180}
          aria-valuenow={zoomLevel}
          role="slider"
          className={cn(
            '-right-6 absolute top-1/2',
            'h-14 w-1 rounded-full',
            'bg-gray-400 dark:bg-gray-600',
            'hover:bg-gray-500 dark:hover:bg-gray-500',
            'transition-colors duration-300',
            'focus-visible:outline-hidden focus-visible:ring-2',
            'focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500',
            'focus-visible:ring-offset-2',
            'focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
            'hidden md:block',
            isMouseDown ? 'cursor-grabbing' : 'cursor-grab',
            'after:-left-2 after:absolute after:top-0 after:h-full after:w-4 after:content-[""]'
          )}
          touch-action="none"
        />
      </motion.div>
    </div>
  );
};

export default ViewMagnifier;


===== EXAMPLE: view-magnifier-demo =====
Title: View Magnifier Demo

--- file: example/view-magnifier-demo.tsx ---
'use client';
import ViewMagnifier from '@/registry/bucharitesh/view-magnifier';
import Image from 'next/image';

export default function ViewMagnifierDemo() {
  return (
    <div className="relative w-full">
      <ViewMagnifier>
        <div className="h-96 w-full bg-red-500">
          <Image src="/assets/test-image.avif" alt="random" fill />
        </div>
      </ViewMagnifier>
    </div>
  );
}


===== EXAMPLE: view-magnifier-demo-2 =====
Title: View Magnifier Demo 2

--- file: example/view-magnifier-demo-2.tsx ---
'use client';
import ViewMagnifier from '@/registry/bucharitesh/view-magnifier';
import Image from 'next/image';
export default function ViewMagnifierDemo() {
  return (
    <div className="relative grid w-full grid-cols-1 gap-20">
      <ViewMagnifier>
        <div className="relative h-[400px] w-full">
          <Image
            src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80&w=828&q=75"
            alt="random"
            fill
            className="object-cover"
          />
        </div>
      </ViewMagnifier>
    </div>
  );
}