# AI Canvas

> AI Canvas is an open-core, shadcn-compatible registry of 86 animated React components, design systems, and templates built with Tailwind CSS and Motion. The free library is MIT, and Premium components, design systems, and templates are proprietary. Many components ship with a comprehensive AI remix prompt, so developers can install the code directly or recreate their own variation in any AI builder. On free components that prompt is public in full; on premium components and blocks only part of it is public (the setup and the constants), and the rest of the build spec requires a Premium subscription.

## Overview
- [Homepage](https://aicanvas.me): Browse all components.
- [All components](https://aicanvas.me/components): Full component list.
- [About](https://aicanvas.me/about): About AI Canvas.
- [Registry index](https://aicanvas.me/r/registry.json): Machine-readable registry index.

## Install
Install command: `npx shadcn@latest add @aicanvas/<component-name>`. One-command installs require a free AI Canvas account: signed out, the command exits 0 but writes a placeholder file titled "(free account required)" instead of the real component. To authenticate, sign in and copy your token from https://aicanvas.me/account/settings, set AICANVAS_TOKEN in .env.local, and add `{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }` to components.json. Full setup notes: https://aicanvas.me/llms.txt

No account needed to read: every free component's complete source is inlined below and can be copied into a project directly.


## Components

---

## Diamond Grid

Category: Backgrounds
Slug: `diamond-grid`
URL: https://aicanvas.me/components/diamond-grid

A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/diamond-grid
```

```tsx
'use client'

/**
 * Renders a seeded diamond grid with traveling ignition pulses.
 * It adapts its canvas animation to visibility, theme, and reduced motion.
 */

import { useEffect, useRef } from 'react'

type DiamondGridProps = {
  /** Extra classes merged onto the outermost root element. */
  className?: string
  /** Determines grid placement, ignition positions and the complete loop sequence. */
  seed?: number
}

const LOOP_MS = 64000
// tune: raise the event count to increase concurrent ignitions
const EVENT_COUNT = 34
const STATIC_TIME_MS = 27000
const STAR_SIZE = 30
const TAU = Math.PI * 2
const GRID_COS = Math.SQRT1_2

const DARK = {
  ground: '#000000',
  ink: '255,255,255',
  line: 0.3,
  pulse: 0.7,
  comp: 'lighter' as GlobalCompositeOperation,
}

const LIGHT = {
  ground: '#FAF8F5',
  ink: '14,14,16',
  line: 0.34,
  pulse: 0.5,
  comp: 'source-over' as GlobalCompositeOperation,
}

type Palette = typeof DARK | typeof LIGHT

type Ignition = {
  col: number
  row: number
  start: number
  duration: number
  decayStart: number
  travel: number
  reach: number
  phase: number
}

type GridTransform = {
  a: number
  b: number
  c: number
  d: number
  e: number
  f: number
}

type Field = {
  cell: number
  x0: number
  y0: number
  cols: number
  rows: number
  transform: GridTransform
  events: Ignition[]
}

function makeAlphaStyles(ink: string) {
  const styles: string[] = []
  for (let i = 0; i < 256; i++) styles.push(`rgba(${ink},${i / 255})`)
  return styles
}

const DARK_STYLES = makeAlphaStyles(DARK.ink)
const LIGHT_STYLES = makeAlphaStyles(LIGHT.ink)

function mulberry32(a: number) {
  return function () {
    a |= 0
    a = (a + 0x6d2b79f5) | 0
    let t = Math.imul(a ^ (a >>> 15), 1 | a)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

const clamp = (value: number, low: number, high: number) =>
  value < low ? low : value > high ? high : value

const clampInt = (value: number, low: number, high: number) =>
  Math.round(clamp(value, low, high))

const smoothstep = (value: number) => {
  const p = clamp(value, 0, 1)
  return p * p * (3 - 2 * p)
}

function diagonalStrength(x: number, y: number, W: number, H: number) {
  const distance = Math.abs(x / W - y / H)
  return 1 - smoothstep((distance - 0.16) / 0.64)
}

function makeGridTransform(W: number, H: number): GridTransform {
  return {
    a: GRID_COS,
    b: GRID_COS,
    c: -GRID_COS,
    d: GRID_COS,
    e: W * 0.5,
    f: H * 0.5,
  }
}

function gridToScreen(transform: GridTransform, x: number, y: number) {
  return {
    x: transform.a * x + transform.c * y + transform.e,
    y: transform.b * x + transform.d * y + transform.f,
  }
}

function screenToGrid(transform: GridTransform, x: number, y: number) {
  const dx = x - transform.e
  const dy = y - transform.f
  return {
    x: transform.a * dx + transform.b * dy,
    y: transform.c * dx + transform.d * dy,
  }
}

function buildField(W: number, H: number, seed: number): Field {
  const rnd = mulberry32(seed)
  // tune: raise the scale factor to widen the grid spacing
  const cell = clamp(Math.min(W, H) * 0.113, 65, 124)
  const transform = makeGridTransform(W, H)
  const corners = [
    screenToGrid(transform, 0, 0),
    screenToGrid(transform, W, 0),
    screenToGrid(transform, 0, H),
    screenToGrid(transform, W, H),
  ]
  const minX = Math.min(...corners.map((point) => point.x))
  const maxX = Math.max(...corners.map((point) => point.x))
  const minY = Math.min(...corners.map((point) => point.y))
  const maxY = Math.max(...corners.map((point) => point.y))
  const x0 = minX - cell * (1 + rnd())
  const y0 = minY - cell * (1 + rnd())
  const cols = Math.ceil((maxX + cell - x0) / cell) + 1
  const rows = Math.ceil((maxY + cell - y0) / cell) + 1
  const gaps = new Float32Array(EVENT_COUNT)
  let gapTotal = 0

  for (let i = 0; i < EVENT_COUNT; i++) {
    const gap = i % 3 === 0 ? 1200 + rnd() * 1400 : 3600 + rnd() * 3200
    gaps[i] = gap
    gapTotal += gap
  }

  const gapScale = LOOP_MS / gapTotal
  const events: Ignition[] = []
  let cursor = 0

  const pickVisibleNode = () => {
    let col = 1
    let row = 1
    for (let attempt = 0; attempt < 40; attempt++) {
      col = 1 + Math.floor(rnd() * Math.max(1, cols - 2))
      row = 1 + Math.floor(rnd() * Math.max(1, rows - 2))
      const point = gridToScreen(transform, x0 + col * cell, y0 + row * cell)
      if (
        point.x >= 0 &&
        point.x <= W &&
        point.y >= 0 &&
        point.y <= H &&
        diagonalStrength(point.x, point.y, W, H) > 0.28
      ) {
        break
      }
    }
    return { col, row }
  }

  for (let i = 0; i < EVENT_COUNT; i++) {
    let position = pickVisibleNode()

    if (i % 3 === 1 && events.length > 0) {
      const previous = events[i - 1]
      const offset = (rnd() < 0.5 ? -1 : 1) * (2 + Math.floor(rnd() * 2))
      if (rnd() < 0.5) {
        position = {
          col: clampInt(previous.col + offset, 1, cols - 2),
          row: previous.row,
        }
      } else {
        position = {
          col: previous.col,
          row: clampInt(previous.row + offset, 1, rows - 2),
        }
      }

      const point = gridToScreen(
        transform,
        x0 + position.col * cell,
        y0 + position.row * cell,
      )
      if (
        point.x < 0 ||
        point.x > W ||
        point.y < 0 ||
        point.y > H ||
        diagonalStrength(point.x, point.y, W, H) < 0.2
      ) {
        position = pickVisibleNode()
      }
    }

    const duration = 25000 + rnd() * 7000
    events.push({
      col: position.col,
      row: position.row,
      start: cursor,
      duration,
      decayStart: 10500 + rnd() * 4500,
      travel: 3200 + rnd() * 900,
      reach: 2.5 + rnd() * 1.25,
      phase: rnd() * TAU,
    })
    cursor += gaps[i] * gapScale
  }

  return { cell, x0, y0, cols, rows, transform, events }
}

function addStarPath(
  context: CanvasRenderingContext2D,
  x: number,
  y: number,
  radius: number,
  inner: number,
) {
  context.moveTo(x, y - radius)
  context.lineTo(x + inner, y - inner)
  context.lineTo(x + radius, y)
  context.lineTo(x + inner, y + inner)
  context.lineTo(x, y + radius)
  context.lineTo(x - inner, y + inner)
  context.lineTo(x - radius, y)
  context.lineTo(x - inner, y - inner)
  context.closePath()
}

export default function DiamondGrid({ className, seed = 1337 }: DiamondGridProps) {
  const hostRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const host = hostRef.current
    const canvas = canvasRef.current
    if (!host || !canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const isDark = () => {
      const cardTheme = host.closest('[data-card-theme]')?.getAttribute('data-card-theme')
      if (cardTheme === 'light') return false
      if (cardTheme === 'dark') return true
      return document.documentElement.classList.contains('dark')
    }

    const baseCanvas = document.createElement('canvas')
    const liveCanvas = document.createElement('canvas')
    const maskCanvas = document.createElement('canvas')
    const starCanvas = document.createElement('canvas')
    const baseCtx = baseCanvas.getContext('2d')
    const liveCtx = liveCanvas.getContext('2d')
    const maskCtx = maskCanvas.getContext('2d')
    const starCtx = starCanvas.getContext('2d')
    if (!baseCtx || !liveCtx || !maskCtx || !starCtx) return

    const motionMq = window.matchMedia('(prefers-reduced-motion: reduce)')
    let W = 0
    let H = 0
    let dpr = 1
    let dark = isDark()
    let reduce = motionMq.matches
    let field: Field | null = null
    let elapsed = 0
    let last = 0
    let raf = 0
    let running = false
    let onScreen = false

    const theme = (): Palette => (dark ? DARK : LIGHT)
    const styles = () => (dark ? DARK_STYLES : LIGHT_STYLES)
    const styleAt = (alpha: number) =>
      styles()[Math.round(clamp(alpha, 0, 1) * 255)]

    const sizeSurface = (surface: HTMLCanvasElement, width: number, height: number) => {
      surface.width = Math.max(1, Math.round(width * dpr))
      surface.height = Math.max(1, Math.round(height * dpr))
    }

    const setGridTransform = (target: CanvasRenderingContext2D, f: Field) => {
      const transform = f.transform
      target.setTransform(
        dpr * transform.a,
        dpr * transform.b,
        dpr * transform.c,
        dpr * transform.d,
        dpr * transform.e,
        dpr * transform.f,
      )
    }

    const buildMask = () => {
      maskCtx.setTransform(1, 0, 0, 1, 0, 0)
      maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
      maskCtx.setTransform(dpr, 0, 0, dpr, 0, 0)

      const gx = 1 / W
      const gy = -1 / H
      const scale = 1 / (gx * gx + gy * gy)
      const cx = W * 0.5
      const cy = H * 0.5
      const gradient = maskCtx.createLinearGradient(
        cx - gx * scale,
        cy - gy * scale,
        cx + gx * scale,
        cy + gy * scale,
      )
      gradient.addColorStop(0, 'rgba(255,255,255,0)')
      gradient.addColorStop(0.1, 'rgba(255,255,255,0)')
      gradient.addColorStop(0.16, 'rgba(255,255,255,0.12)')
      gradient.addColorStop(0.24, 'rgba(255,255,255,0.55)')
      gradient.addColorStop(0.325, 'rgba(255,255,255,0.92)')
      gradient.addColorStop(0.42, 'rgba(255,255,255,1)')
      gradient.addColorStop(0.58, 'rgba(255,255,255,1)')
      gradient.addColorStop(0.675, 'rgba(255,255,255,0.92)')
      gradient.addColorStop(0.76, 'rgba(255,255,255,0.55)')
      gradient.addColorStop(0.84, 'rgba(255,255,255,0.12)')
      gradient.addColorStop(0.9, 'rgba(255,255,255,0)')
      gradient.addColorStop(1, 'rgba(255,255,255,0)')
      maskCtx.fillStyle = gradient
      maskCtx.fillRect(0, 0, W, H)
    }

    const applyMask = (
      target: CanvasRenderingContext2D,
      surface: HTMLCanvasElement,
    ) => {
      target.setTransform(1, 0, 0, 1, 0, 0)
      target.globalAlpha = 1
      target.globalCompositeOperation = 'destination-in'
      target.drawImage(maskCanvas, 0, 0, surface.width, surface.height)
      target.globalCompositeOperation = 'source-over'
    }

    const buildStarSprite = () => {
      const C = theme()
      starCanvas.width = Math.max(1, Math.round(STAR_SIZE * dpr))
      starCanvas.height = Math.max(1, Math.round(STAR_SIZE * dpr))
      starCtx.setTransform(dpr, 0, 0, dpr, 0, 0)
      starCtx.clearRect(0, 0, STAR_SIZE, STAR_SIZE)
      starCtx.globalCompositeOperation = C.comp

      const center = STAR_SIZE * 0.5
      const bloom = starCtx.createRadialGradient(center, center, 0, center, center, 13)
      bloom.addColorStop(0, styleAt(C.pulse * 0.34))
      bloom.addColorStop(0.32, styleAt(C.pulse * 0.12))
      bloom.addColorStop(1, styleAt(0))
      starCtx.fillStyle = bloom
      starCtx.fillRect(0, 0, STAR_SIZE, STAR_SIZE)

      starCtx.fillStyle = styleAt(C.pulse)
      starCtx.beginPath()
      addStarPath(starCtx, center, center, 10.5, 1.45)
      starCtx.fill()
      starCtx.beginPath()
      starCtx.arc(center, center, 1.65, 0, TAU)
      starCtx.fill()
      starCtx.globalCompositeOperation = 'source-over'
    }

    const buildRestingLayer = () => {
      if (!field) return
      const C = theme()
      const f = field
      baseCtx.setTransform(1, 0, 0, 1, 0, 0)
      baseCtx.clearRect(0, 0, baseCanvas.width, baseCanvas.height)
      setGridTransform(baseCtx, f)
      baseCtx.globalCompositeOperation = C.comp
      baseCtx.lineCap = 'butt'
      baseCtx.lineWidth = 1
      baseCtx.strokeStyle = styleAt(C.line * 0.2)
      baseCtx.beginPath()

      for (let col = 0; col < f.cols; col++) {
        const x = f.x0 + col * f.cell
        baseCtx.moveTo(x, f.y0)
        baseCtx.lineTo(x, f.y0 + (f.rows - 1) * f.cell)
      }
      for (let row = 0; row < f.rows; row++) {
        const y = f.y0 + row * f.cell
        baseCtx.moveTo(f.x0, y)
        baseCtx.lineTo(f.x0 + (f.cols - 1) * f.cell, y)
      }
      baseCtx.stroke()

      baseCtx.fillStyle = styleAt(C.line * 0.55)
      baseCtx.beginPath()
      for (let row = 0; row < f.rows; row++) {
        const y = f.y0 + row * f.cell
        for (let col = 0; col < f.cols; col++) {
          const x = f.x0 + col * f.cell
          addStarPath(baseCtx, x, y, 3.3, 0.68)
        }
      }
      baseCtx.fill()
      applyMask(baseCtx, baseCanvas)
    }

    const rebuildCaches = () => {
      buildMask()
      buildStarSprite()
      buildRestingLayer()
    }

    const eventAge = (event: Ignition, time: number) => {
      const age = time - event.start
      return age < 0 ? age + LOOP_MS : age
    }

    const eventLevel = (event: Ignition, age: number) => {
      if (age >= event.duration) return 0
      const attack = smoothstep(age / 900)
      const decay =
        age <= event.decayStart
          ? 1
          : 1 - smoothstep((age - event.decayStart) / (event.duration - event.decayStart))
      return attack * decay * (0.94 + 0.06 * Math.sin(age * 0.00055 + event.phase))
    }

    const frontDistance = (event: Ignition, age: number) => {
      const span = event.travel * event.reach * 2.6
      const p = Math.min(1, age / span)
      return event.reach * (1 - Math.pow(1 - p, 3))
    }

    const paintRay = (
      x: number,
      y: number,
      dx: number,
      dy: number,
      distance: number,
      level: number,
    ) => {
      if (!field || distance <= 0.002 || level <= 0.002) return
      const C = theme()
      const endX = x + dx * distance * field.cell
      const endY = y + dy * distance * field.cell

      liveCtx.lineCap = 'butt'
      liveCtx.strokeStyle = styleAt(C.pulse * level * 0.13)
      liveCtx.lineWidth = 3.2
      liveCtx.beginPath()
      liveCtx.moveTo(x, y)
      liveCtx.lineTo(endX, endY)
      liveCtx.stroke()

      liveCtx.strokeStyle = styleAt(C.pulse * level * 0.54)
      liveCtx.lineWidth = 0.95
      liveCtx.beginPath()
      liveCtx.moveTo(x, y)
      liveCtx.lineTo(endX, endY)
      liveCtx.stroke()

      liveCtx.fillStyle = styleAt(C.pulse * level * 0.72)
      liveCtx.beginPath()
      liveCtx.arc(endX, endY, 1.1, 0, TAU)
      liveCtx.fill()
    }

    const paintIgnition = (event: Ignition, time: number) => {
      if (!field) return
      const age = eventAge(event, time)
      const level = eventLevel(event, age)
      if (level <= 0.002) return

      const f = field
      const x = f.x0 + event.col * f.cell
      const y = f.y0 + event.row * f.cell
      const front = frontDistance(event, age)
      const left = Math.min(front, event.col)
      const right = Math.min(front, f.cols - 1 - event.col)
      const up = Math.min(front, event.row)
      const down = Math.min(front, f.rows - 1 - event.row)

      paintRay(x, y, -1, 0, left, level)
      paintRay(x, y, 1, 0, right, level)
      paintRay(x, y, 0, -1, up, level)
      paintRay(x, y, 0, 1, down, level)

      const starAlpha = clamp(level * (0.82 + 0.18 * smoothstep(age / 1800)), 0, 1)
      liveCtx.globalAlpha = starAlpha
      liveCtx.drawImage(
        starCanvas,
        x - STAR_SIZE * 0.5,
        y - STAR_SIZE * 0.5,
        STAR_SIZE,
        STAR_SIZE,
      )
      liveCtx.globalAlpha = 1
    }

    const drawScene = (time: number) => {
      if (!field) return
      const C = theme()

      liveCtx.setTransform(1, 0, 0, 1, 0, 0)
      liveCtx.globalCompositeOperation = 'source-over'
      liveCtx.globalAlpha = 1
      liveCtx.clearRect(0, 0, liveCanvas.width, liveCanvas.height)
      setGridTransform(liveCtx, field)
      liveCtx.globalCompositeOperation = C.comp

      for (let i = 0; i < field.events.length; i++) {
        paintIgnition(field.events[i], time)
      }
      applyMask(liveCtx, liveCanvas)

      ctx.setTransform(1, 0, 0, 1, 0, 0)
      ctx.globalCompositeOperation = 'source-over'
      ctx.globalAlpha = 1
      ctx.fillStyle = C.ground
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(baseCanvas, 0, 0)
      ctx.globalCompositeOperation = C.comp
      ctx.drawImage(liveCanvas, 0, 0)
      ctx.globalCompositeOperation = 'source-over'
    }

    const drawIdle = () => drawScene(reduce ? STATIC_TIME_MS : elapsed)

    const rebuild = () => {
      W = Math.max(1, Math.round(host.clientWidth))
      H = Math.max(1, Math.round(host.clientHeight))
      dpr = Math.min(window.devicePixelRatio || 1, 2)
      sizeSurface(canvas, W, H)
      sizeSurface(baseCanvas, W, H)
      sizeSurface(liveCanvas, W, H)
      sizeSurface(maskCanvas, W, H)
      canvas.style.width = `${W}px`
      canvas.style.height = `${H}px`
      field = buildField(W, H, seed)
      rebuildCaches()
      drawIdle()
    }

    const frame = (now: number) => {
      raf = requestAnimationFrame(frame)
      elapsed = (elapsed + Math.min(33, last ? now - last : 16)) % LOOP_MS
      last = now
      drawScene(elapsed)
    }

    const start = () => {
      if (running || reduce || !onScreen || document.hidden) return
      running = true
      last = 0
      raf = requestAnimationFrame(frame)
    }

    const stop = () => {
      running = false
      cancelAnimationFrame(raf)
    }

    rebuild()

    let debounce = 0
    const ro = new ResizeObserver(() => {
      window.clearTimeout(debounce)
      debounce = window.setTimeout(() => {
        if (
          host.clientWidth === W &&
          host.clientHeight === H &&
          dpr === Math.min(window.devicePixelRatio || 1, 2)
        ) {
          return
        }
        rebuild()
      }, 120)
    })
    ro.observe(host)

    const io = new IntersectionObserver(
      (entries) => {
        onScreen = entries[0].isIntersecting
        if (onScreen) start()
        else stop()
      },
      { threshold: 0.01 },
    )
    io.observe(host)

    const onVisibility = () => {
      if (document.hidden) stop()
      else start()
    }
    document.addEventListener('visibilitychange', onVisibility)

    const onMotion = () => {
      reduce = motionMq.matches
      stop()
      drawIdle()
      start()
    }
    motionMq.addEventListener('change', onMotion)

    const mo = new MutationObserver(() => {
      const next = isDark()
      if (next === dark) return
      dark = next
      rebuildCaches()
      if (!running) drawIdle()
    })
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = host.closest('[data-card-theme]')
    if (cardWrapper) {
      mo.observe(cardWrapper, {
        attributes: true,
        attributeFilter: ['class', 'data-card-theme'],
      })
    }

    return () => {
      stop()
      window.clearTimeout(debounce)
      ro.disconnect()
      io.disconnect()
      mo.disconnect()
      document.removeEventListener('visibilitychange', onVisibility)
      motionMq.removeEventListener('change', onMotion)
      baseCanvas.width = 0
      baseCanvas.height = 0
      liveCanvas.width = 0
      liveCanvas.height = 0
      maskCanvas.width = 0
      maskCanvas.height = 0
      starCanvas.width = 0
      starCanvas.height = 0
      field = null
    }
  }, [seed])

  return (
    <div
      ref={hostRef}
      role="img"
      aria-label="A faint diagonal diamond grid slowly illuminated by travelling light"
      className={`relative min-h-screen w-full overflow-hidden bg-[#FAF8F5] dark:bg-[#000000]${className ? ` ${className}` : ''}`}
    >
      <canvas ref={canvasRef} aria-hidden="true" className="absolute inset-0 block" />
    </div>
  )
}

```

---

## Scroll Wipe Gallery

Category: Blocks
Slug: `scroll-wipe-gallery`
URL: https://aicanvas.me/components/scroll-wipe-gallery

A full-bleed, scroll-driven photo gallery. Each photo wipes in from a different edge.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/scroll-wipe-gallery
```

```tsx
'use client'
// npm install @phosphor-icons/react framer-motion
/**
 * Presents a full-frame photo gallery driven by scroll progress.
 * Each section wipes over the previous image while updating its title.
 */

import { useEffect, useRef, useState, type RefObject } from 'react'
import {
  cubicBezier,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform,
  type MotionValue,
} from 'framer-motion'
import { CaretDown } from '@phosphor-icons/react'

// customize: replace the gallery images and titles below
const PHOTOS = [
  {
    src: 'https://images.unsplash.com/photo-1634573826817-27d9e8da08df?w=1920&h=1080&fit=crop&crop=center&auto=format',
    alt: 'Modern structure mirrored in still water',
    title: 'Break Patterns',
  },
  {
    src: 'https://images.unsplash.com/photo-1527576539890-dfa815648363?w=1920&h=1080&fit=crop&crop=center&auto=format',
    alt: 'Concrete facade seen from below in hard grayscale light',
    title: 'Push Forward',
  },
  {
    src: 'https://images.unsplash.com/photo-1532456745301-b2c645d8b80d?w=1920&h=1080&fit=crop&crop=center&auto=format',
    alt: 'Repeating white concrete balconies forming a dense pattern',
    title: 'Cut Through',
  },
  {
    src: 'https://images.unsplash.com/photo-1522743791393-522312deeebf?w=1920&h=1080&fit=crop&crop=center&auto=format',
    alt: 'Monolithic gray concrete mass against an open sky',
    title: 'Hold Steady',
  },
  {
    src: 'https://images.unsplash.com/photo-1483366774565-c783b9f70e2c?w=1920&h=1080&fit=crop&crop=center&auto=format',
    alt: 'Sharp geometric underside of a concrete building',
    title: 'Leave Marks',
  },
] as const





const TYPEFACE =
  "'Manrope', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif"



// tune: lower to shorten the scroll sequence
const SECTION_HEIGHT = '1100vh'






const HIDDEN_CLIP = {
  down: 'inset(0% 0% 100% 0%)',
  right: 'inset(0% 100% 0% 0%)',
  up: 'inset(100% 0% 0% 0%)',
  left: 'inset(0% 0% 0% 100%)',
} as const
const REVEALED_CLIP = 'inset(0% 0% 0% 0%)'

const DIRECTIONS = ['down', 'right', 'up', 'left'] as const

type Direction = (typeof DIRECTIONS)[number]




const WIPE_SEQUENCE = PHOTOS.slice(1).map((photo, index) => {
  const segment = 1 / (PHOTOS.length - 1)
  const segmentStart = index * segment
  const from = segmentStart + segment * 0.18
  const to = segmentStart + segment * 0.72

  return {
    photo,
    direction: DIRECTIONS[index % DIRECTIONS.length],
    from,
    to,
    
    
    settled: to + (to - from) * 0.45,
  }
})

const TOTAL_LABEL = String(PHOTOS.length).padStart(2, '0')






// tune: raise to spread incoming title letters farther apart
const ENTER_TRACKING = 0.16
const SETTLED_TRACKING = 0.02
// tune: raise to increase title entrance travel
const ENTER_OFFSET = 48
const ENTER_EASE = cubicBezier(0.16, 1, 0.3, 1)



const ENTER_FROM = {
  down: { axis: 'y', sign: -1 },
  right: { axis: 'x', sign: -1 },
  up: { axis: 'y', sign: 1 },
  left: { axis: 'x', sign: 1 },
} as const





function findScrollContext(element: HTMLElement): {
  scroller: HTMLElement | null
  clipper: HTMLElement | null
} {
  let ancestor = element.parentElement
  let clipper: HTMLElement | null = null

  while (ancestor) {
    const { overflowY } = window.getComputedStyle(ancestor)

    if (overflowY !== 'visible') {
      if (!clipper) clipper = ancestor

      
      
      
      
      if (
        (overflowY === 'auto' || overflowY === 'scroll') &&
        ancestor.scrollHeight > ancestor.clientHeight
      ) {
        
        
        
        return { scroller: ancestor, clipper: clipper ?? ancestor }
      }
    }

    ancestor = ancestor.parentElement
  }

  return { scroller: null, clipper }
}





function useElementScrollProgress(targetRef: RefObject<HTMLElement | null>): {
  progress: MotionValue<number>
  viewportHeight: number | null
} {
  const progress = useMotionValue(0)
  
  
  
  
  
  
  
  const [viewportHeight, setViewportHeight] = useState<number | null>(null)

  useEffect(() => {
    const target = targetRef.current
    if (!target) return

    const { scroller: scrollContainer, clipper } = findScrollContext(target)
    let animationFrame: number | null = null

    const updateProgress = () => {
      animationFrame = null

      const rect = target.getBoundingClientRect()
      const containerTop = scrollContainer
        ? scrollContainer.getBoundingClientRect().top
        : 0
      
      
      
      
      
      
      const availableHeight = scrollContainer
        ? scrollContainer.clientHeight
        : window.innerHeight
      const nextViewportHeight =
        clipper && clipper !== scrollContainer
          ? Math.min(availableHeight, clipper.clientHeight)
          : availableHeight
      
      
      
      
      
      const cropped =
        !!clipper &&
        clipper !== scrollContainer &&
        clipper.clientHeight < rect.height
      const scrollDistance = Math.max(rect.height - nextViewportHeight, 1)
      const nextProgress = cropped
        ? 0
        : Math.min(Math.max((containerTop - rect.top) / scrollDistance, 0), 1)

      setViewportHeight(nextViewportHeight)
      progress.set(nextProgress)
    }

    const requestUpdate = () => {
      if (animationFrame === null) {
        animationFrame = window.requestAnimationFrame(updateProgress)
      }
    }

    updateProgress()
    
    
    
    scrollContainer?.addEventListener('scroll', requestUpdate, { passive: true })
    window.addEventListener('scroll', requestUpdate, { passive: true })
    window.addEventListener('resize', requestUpdate)

    
    
    const observer = new ResizeObserver(requestUpdate)
    
    
    observer.observe(scrollContainer ?? clipper ?? document.documentElement)
    if (clipper && clipper !== scrollContainer) observer.observe(clipper)

    return () => {
      scrollContainer?.removeEventListener('scroll', requestUpdate)
      window.removeEventListener('scroll', requestUpdate)
      window.removeEventListener('resize', requestUpdate)
      observer.disconnect()

      if (animationFrame !== null) {
        window.cancelAnimationFrame(animationFrame)
      }
    }
  }, [progress, targetRef])

  return { progress, viewportHeight }
}

function useWipeClip(
  progress: MotionValue<number>,
  from: number,
  to: number,
  hidden: string,
  reduceMotion: boolean,
): MotionValue<string> {
  const wipe = useTransform(progress, [from, to], [hidden, REVEALED_CLIP])
  const snap = useTransform(progress, (value) =>
    value < (from + to) / 2 ? hidden : REVEALED_CLIP,
  )

  return reduceMotion ? snap : wipe
}

type WipeStep = (typeof WIPE_SEQUENCE)[number]

function PhotoLayer({
  step,
  progress,
  reduceMotion,
}: {
  step: WipeStep
  progress: MotionValue<number>
  reduceMotion: boolean
}) {
  const clipPath = useWipeClip(
    progress,
    step.from,
    step.to,
    HIDDEN_CLIP[step.direction],
    reduceMotion,
  )
  const enter = useTransform(progress, [step.from, step.settled], [0, 1], {
    ease: ENTER_EASE,
  })

  return (
    <motion.div
      data-layer="photo"
      className="absolute inset-0 isolate"
      style={{ clipPath, willChange: 'clip-path' }}
    >
      {}
      <img
        src={step.photo.src}
        alt={step.photo.alt}
        className="absolute inset-0 h-full w-full object-cover"
        draggable={false}
      />
      <FrameTitle
        title={step.photo.title}
        enter={reduceMotion ? undefined : enter}
        direction={step.direction}
      />
    </motion.div>
  )
}











function FrameTitle({
  title,
  enter,
  direction,
}: {
  title: string
  
  
  enter?: MotionValue<number>
  direction?: Direction
}) {
  const atRest = useMotionValue(1)
  const arrival = enter ?? atRest
  const from = direction ? ENTER_FROM[direction] : null

  const tracking = useTransform(
    arrival,
    [0, 1],
    [ENTER_TRACKING, SETTLED_TRACKING],
  )
  const letterSpacing = useTransform(tracking, (value) => `${value}em`)
  
  
  
  const trailing = useTransform(tracking, (value) => `${-value}em`)
  const offset = useTransform(
    arrival,
    [0, 1],
    [from ? ENTER_OFFSET * from.sign : 0, 0],
  )

  return (
    <motion.span
      aria-hidden="true"
      className="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center p-4 text-center font-extrabold uppercase leading-none text-[#FFFFFF] dark:text-[#FFFFFF] md:p-8"
      style={{
        fontSize: 'clamp(32px, 14vw, 160px)',
        letterSpacing,
        mixBlendMode: 'difference',
        x: from?.axis === 'x' ? offset : 0,
        y: from?.axis === 'y' ? offset : 0,
      }}
    >
      {title.split(' ').map((word, index) => (
        <motion.span key={`${word}-${index}`} style={{ marginRight: trailing }}>
          {word}
        </motion.span>
      ))}
    </motion.span>
  )
}

export default function ScrollWipeGallery() {
  const wrapperRef = useRef<HTMLElement>(null)
  const shouldReduceMotion = useReducedMotion() ?? false
  const { progress: scrollYProgress, viewportHeight } =
    useElementScrollProgress(wrapperRef)

  
  
  const panelHeight = viewportHeight ? `${viewportHeight}px` : '100vh'

  
  const cueOpacity = useTransform(scrollYProgress, [0, 0.03], [1, 0])

  
  
  const frameLabel = useTransform(scrollYProgress, (value) => {
    const passed = WIPE_SEQUENCE.filter(
      (step) => value >= (step.from + step.to) / 2,
    ).length

    return String(passed + 1).padStart(2, '0')
  })

  return (
    <section
      ref={wrapperRef}
      aria-label="Editorial photo gallery"
      className="relative min-h-screen w-full bg-[#0A0A0A] dark:bg-[#0A0A0A]"
      style={{ height: SECTION_HEIGHT, fontFamily: TYPEFACE }}
    >
      <div
        className="sticky top-0 w-full overflow-hidden bg-[#0A0A0A] dark:bg-[#0A0A0A]"
        style={{ height: panelHeight }}
      >
        {}
        <h2 className="sr-only">
          {PHOTOS.map((photo) => photo.title).join('. ')}
        </h2>

        <div className="absolute inset-0 isolate">
          {}
          <img
            src={PHOTOS[0].src}
            alt={PHOTOS[0].alt}
            className="absolute inset-0 h-full w-full object-cover"
            draggable={false}
          />
          <FrameTitle title={PHOTOS[0].title} />
        </div>

        {WIPE_SEQUENCE.map((step) => (
          <PhotoLayer
            key={step.photo.src}
            step={step}
            progress={scrollYProgress}
            reduceMotion={shouldReduceMotion}
          />
        ))}

        {}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 z-20 text-[#FFFFFF] dark:text-[#FFFFFF]"
          style={{ mixBlendMode: 'difference' }}
        >
          <div className="absolute left-4 top-4 flex flex-col gap-2 md:left-8 md:top-8">
            <span className="text-[12px] font-semibold uppercase tracking-[0.18em]">
              Selected Works
            </span>
            <span className="text-[12px] uppercase tracking-[0.18em]">
              Concrete and Light
            </span>
          </div>

          {}
          <div className="absolute bottom-6 right-4 text-[12px] font-semibold uppercase tracking-[0.18em] md:bottom-8 md:right-8">
            <motion.span>{frameLabel}</motion.span>
            <span className="opacity-70"> / {TOTAL_LABEL}</span>
          </div>

          <motion.div
            className="absolute inset-x-0 bottom-6 flex flex-col items-center gap-2 md:bottom-8"
            style={{ opacity: cueOpacity }}
          >
            <span className="text-[12px] font-semibold uppercase tracking-[0.18em]">
              Scroll
            </span>
            <motion.span
              className="flex"
              animate={shouldReduceMotion ? undefined : { y: [0, 6, 0] }}
              transition={{
                duration: 1.8,
                repeat: Infinity,
                ease: [0.4, 0, 0.2, 1],
              }}
            >
              <CaretDown size={16} weight="regular" />
            </motion.span>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

```

---

## Expanding Tabs

Category: Navigation
Slug: `expanding-tabs`
URL: https://aicanvas.me/components/expanding-tabs

A monochrome tab bar of icon circles. Click one and it expands into a labeled pill.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/expanding-tabs
```

```tsx
'use client'
// npm install framer-motion @phosphor-icons/react
/**
 * Displays a pill-shaped tab list with icon-only inactive tabs.
 * Selecting a tab expands it to reveal its label with layout animation.
 */

import { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import {
  Bell,
  CalendarBlank,
  EnvelopeSimple,
  MagnifyingGlass,
} from '@phosphor-icons/react'

const SPRING = { type: 'spring' as const, stiffness: 420, damping: 30, mass: 0.7 }

const tabs = [
  { label: 'Inbox', icon: EnvelopeSimple },
  { label: 'Calendar', icon: CalendarBlank },
  { label: 'Alerts', icon: Bell },
  { label: 'Search', icon: MagnifyingGlass },
]

export default function ExpandingTabs() {
  const [activeTab, setActiveTab] = useState('Inbox')

  return (
    <div className='flex min-h-screen w-full items-center justify-center bg-[#E3E3E8] dark:bg-[#0E0E0F]'>
      <motion.div
        layout
        transition={SPRING}
        role="tablist"
        aria-label="Mail navigation"
        className="flex max-w-[calc(100vw-1.5rem)] items-center gap-2 rounded-full border border-black/[0.035] bg-white/35 p-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.98)] dark:border-white/[0.055] dark:bg-white/[0.025] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.16)]"
      >
        {tabs.map((tab) => {
          const Icon = tab.icon
          const isActive = activeTab === tab.label

          return (
            <motion.button
              key={tab.label}
              layout
              type="button"
              role="tab"
              aria-selected={isActive}
              aria-label={tab.label}
              onClick={() => setActiveTab(tab.label)}
              whileHover={isActive ? undefined : { scale: 1.045 }}
              whileTap={{ scale: 0.94 }}
              transition={SPRING}
              className={`relative flex h-10 shrink-0 cursor-pointer items-center justify-start overflow-hidden rounded-full pl-2.5 outline-none focus-visible:ring-2 focus-visible:ring-black/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[#E3E3E8] dark:focus-visible:ring-white/80 dark:focus-visible:ring-offset-[#0E0E0F] ${
                isActive
                  ? 'gap-2 bg-[#FCFCFD] pr-4 shadow-[0_7px_18px_rgba(32,32,36,0.14),0_1px_2px_rgba(32,32,36,0.08),inset_0_2px_0_rgba(255,255,255,0.98)] dark:bg-[#29292C] dark:shadow-[0_7px_18px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.06),inset_0_2px_0_rgba(255,255,255,0.18)]'
                  : 'w-10 bg-[#F8F8FA] shadow-[0_3px_9px_rgba(32,32,36,0.09),0_1px_1px_rgba(32,32,36,0.06),inset_0_2px_0_rgba(255,255,255,0.92)] dark:bg-[#202023] dark:shadow-[0_3px_9px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.035),inset_0_2px_0_rgba(255,255,255,0.15)]'
              }`}
            >
              <motion.span
                animate={{ scale: isActive ? 1.03 : 1, opacity: isActive ? 1 : 0.78 }}
                transition={SPRING}
                className="flex shrink-0 items-center justify-center text-[#161618] dark:text-[#F3F3F4]"
              >
                <Icon size="1.18em" weight="regular" aria-hidden="true" />
              </motion.span>

              <AnimatePresence initial={false}>
                {isActive && (
                  <motion.span
                    layout
                    initial={{ opacity: 0, x: -7 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -7 }}
                    transition={SPRING}
                    className="whitespace-nowrap text-sm font-semibold tracking-[0.01em] text-[#161618] dark:text-[#F3F3F4]"
                  >
                    {tab.label}
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.button>
          )
        })}
      </motion.div>
    </div>
  )
}

```

---

## Delete Button

Category: Buttons & Toggles
Slug: `delete-button`
URL: https://aicanvas.me/components/delete-button

A red button that starts a five-second delete countdown, with a one-tap undo.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/delete-button
```

```tsx
'use client'

// npm install framer-motion @phosphor-icons/react

/**
 * Presents a staged account deletion control with a five-second countdown.
 * The pending state offers undo before showing a temporary confirmation.
 */

import { useEffect, useState } from 'react'
import { AnimatePresence, motion, type Transition } from 'framer-motion'
import { ArrowUUpLeft, Check } from '@phosphor-icons/react'

type DeletionState = 'default' | 'counting' | 'deleted'

const pillTransition: Transition = {
  type: 'spring',
  stiffness: 420,
  damping: 30,
  mass: 0.7,
}

export default function DeleteButton() {
  const [deletionState, setDeletionState] = useState<DeletionState>('default')
  const [countdown, setCountdown] = useState(5)

  useEffect(() => {
    if (deletionState !== 'counting') return

    const intervalId = window.setInterval(() => {
      setCountdown((current) => {
        if (current <= 1) {
          setDeletionState('deleted')
          return 0
        }

        return current - 1
      })
    }, 1000)

    return () => window.clearInterval(intervalId)
  }, [deletionState])

  useEffect(() => {
    if (deletionState !== 'deleted') return

    const resetId = window.setTimeout(() => {
      setCountdown(5)
      setDeletionState('default')
    }, 2800)

    return () => window.clearTimeout(resetId)
  }, [deletionState])

  const beginDeletion = () => {
    setCountdown(5)
    setDeletionState('counting')
  }

  const undoDeletion = () => {
    setDeletionState('default')
    setCountdown(5)
  }

  return (
    <div className='flex min-h-screen w-full items-center justify-center bg-[#E3E3E8] dark:bg-[#0E0E0F]'>
      <motion.div
        layout
        transition={pillTransition}
        className='mx-4 flex max-w-[calc(100vw-2rem)] items-center justify-center overflow-hidden rounded-full'
      >
        <AnimatePresence initial={false} mode='popLayout'>
          {deletionState === 'default' && (
            <motion.button
              key='default'
              layout
              type='button'
              onClick={beginDeletion}
              whileHover={{ scale: 1.025 }}
              whileTap={{ scale: 0.96 }}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.94 }}
              transition={pillTransition}
              className='rounded-full bg-red-600 px-6 py-3 text-sm font-semibold tracking-[0.01em] text-white shadow-[0_0.7rem_1.8rem_rgb(220_38_38_/_0.25),inset_0_2px_0_rgba(255,255,255,0.3)] outline-none hover:bg-red-700 focus-visible:ring-4 focus-visible:ring-red-400/45 dark:bg-red-500 dark:shadow-[0_0.7rem_1.8rem_rgb(248_113_113_/_0.18),inset_0_2px_0_rgba(255,255,255,0.18)] dark:hover:bg-red-400'
              aria-label='Delete account'
            >
              Delete Account
            </motion.button>
          )}

          {deletionState === 'counting' && (
            <motion.div
              key='counting'
              layout
              initial={{ opacity: 0, scale: 0.92 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.94 }}
              transition={pillTransition}
              className='flex items-center gap-3 rounded-full border border-red-200 bg-red-100 p-1.5 pr-2 text-red-700 shadow-[0_0.8rem_2rem_rgb(239_68_68_/_0.12),inset_0_2px_0_rgba(255,255,255,0.65)] dark:border-red-400/20 dark:bg-red-500/15 dark:text-red-300 dark:shadow-[0_0.8rem_2rem_rgb(248_113_113_/_0.1),inset_0_2px_0_rgba(255,255,255,0.15)]'
              role='status'
              aria-live='polite'
              aria-label={`Account deletion will be final in ${countdown} seconds`}
            >
              <motion.button
                type='button'
                onClick={undoDeletion}
                whileHover={{ scale: 1.08, rotate: -5 }}
                whileTap={{ scale: 0.9 }}
                transition={pillTransition}
                className='grid size-10 shrink-0 place-items-center rounded-full bg-red-600 text-white shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.3)] outline-none focus-visible:ring-4 focus-visible:ring-red-400/45 dark:bg-red-500 dark:shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.18)]'
                aria-label='Undo account deletion'
              >
                <ArrowUUpLeft size='1.1em' weight='regular' aria-hidden='true' />
              </motion.button>

              <span className='whitespace-nowrap px-0.5 text-sm font-semibold'>
                Cancel Deletion
              </span>

              <motion.span
                layout
                className='grid size-10 shrink-0 place-items-center overflow-hidden rounded-full bg-red-600 text-sm font-bold tabular-nums text-white shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.3)] dark:bg-red-500 dark:shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.18)]'
                aria-hidden='true'
              >
                <AnimatePresence initial={false} mode='popLayout'>
                  <motion.span
                    key={countdown}
                    initial={{ y: '100%', opacity: 0 }}
                    animate={{ y: '0%', opacity: 1 }}
                    exit={{ y: '-100%', opacity: 0 }}
                    transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
                  >
                    {countdown}
                  </motion.span>
                </AnimatePresence>
              </motion.span>
            </motion.div>
          )}

          {deletionState === 'deleted' && (
            <motion.div
              key='deleted'
              layout
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={pillTransition}
              className='flex items-center gap-2 rounded-full border border-stone-300 bg-stone-200 px-5 py-3 text-sm font-semibold text-stone-600 shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.65)] dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05),inset_0_2px_0_rgba(255,255,255,0.15)]'
              role='status'
              aria-live='polite'
            >
              <span className='grid size-5 place-items-center rounded-full bg-stone-500 text-white shadow-[inset_0_2px_0_rgba(255,255,255,0.3)] dark:bg-stone-600 dark:shadow-[inset_0_2px_0_rgba(255,255,255,0.15)]'>
                <Check size='0.9em' weight='regular' aria-hidden='true' />
              </span>
              Account Deleted
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    </div>
  )
}

```

---

## Mood Tracker

Category: Cards & Modals
Slug: `mood-tracker`
URL: https://aicanvas.me/components/mood-tracker

A feelings check-in card with six expressive faces. Drag the segmented slider and the face, label, and liquid color wash shift with your mood.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/mood-tracker
```

```tsx
'use client'

// npm install framer-motion
// font: Manrope
/**
 * Presents a weekly mood tracker with an editable daily rating.
 * Selecting a mood animates the chart, summary, and current-day control.
 */

import {
  useState,
  useRef,
  useEffect,
  useLayoutEffect,
  useMemo,
  useId,
  useCallback,
} from 'react'
import {
  motion,
  AnimatePresence,
  useReducedMotion,
} from 'framer-motion'

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect










type Theme = 'light' | 'dark'

function readTheme(el: HTMLElement | null): Theme {
  if (typeof document === 'undefined') return 'dark'
  const card = el?.closest('[data-card-theme]')
  if (card) return card.classList.contains('dark') ? 'dark' : 'light'
  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
}

function useTheme(rootRef: React.RefObject<HTMLElement | null>): Theme {
  const [theme, setTheme] = useState<Theme>(() => readTheme(rootRef.current))
  useIsomorphicLayoutEffect(() => {
    const el = rootRef.current
    setTheme(readTheme(el))
    if (typeof document === 'undefined') return
    const update = () => setTheme(readTheme(el))
    const observer = new MutationObserver(update)
    
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    })
    
    const card = el?.closest('[data-card-theme]')
    if (card) {
      observer.observe(card, {
        attributes: true,
        attributeFilter: ['class', 'data-card-theme'],
      })
    }
    return () => observer.disconnect()
  }, [rootRef])
  return theme
}



function clamp(n: number, lo: number, hi: number): number {
  return Math.min(hi, Math.max(lo, n))
}

function hexToRgb(hex: string): [number, number, number] {
  const h = hex.replace('#', '')
  return [
    parseInt(h.slice(0, 2), 16),
    parseInt(h.slice(2, 4), 16),
    parseInt(h.slice(4, 6), 16),
  ]
}

function rgbToHex([r, g, b]: [number, number, number]): string {
  const c = (v: number) =>
    Math.round(clamp(v, 0, 255)).toString(16).padStart(2, '0')
  return `#${c(r)}${c(g)}${c(b)}`
}

function lerpHex(a: string, b: string, t: number): string {
  const ca = hexToRgb(a)
  const cb = hexToRgb(b)
  return rgbToHex([
    ca[0] + (cb[0] - ca[0]) * t,
    ca[1] + (cb[1] - ca[1]) * t,
    ca[2] + (cb[2] - ca[2]) * t,
  ])
}


function tintHex(hex: string, t: number): string {
  return lerpHex(hex, '#FFFFFF', t)
}


const DARK_NEUTRAL = '#1B1B22'


function shadeHex(hex: string, t: number): string {
  return lerpHex(hex, DARK_NEUTRAL, t)
}


function inkHex(hex: string): string {
  return lerpHex(hex, '#14140F', 0.82)
}








interface FaceProps {
  size: number
}

const STROKE_W = 2.6

function eyeWhite() {
  return '#FFFFFF'
}


function FrustratedFace({ size }: FaceProps) {
  const ink = '#5A1E0E'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <rect x="8" y="8" width="48" height="48" rx="16" fill="#CB5E3E" />
      <rect x="8" y="8" width="48" height="48" rx="16" fill="url(#fr-sheen)" opacity="0.18" />
      <defs>
        <linearGradient id="fr-sheen" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFFFFF" />
          <stop offset="1" stopColor="#FFFFFF" stopOpacity="0" />
        </linearGradient>
      </defs>
      {}
      <path d="M17 24 L27 28" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" />
      <path d="M47 24 L37 28" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" />
      {}
      <circle cx="24" cy="33" r="3.4" fill={ink} />
      <circle cx="40" cy="33" r="3.4" fill={ink} />
      {}
      <path d="M23 45 H41" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" />
    </svg>
  )
}


function SurprisedFace({ size }: FaceProps) {
  const body = '#E5A85E'
  const ink = '#6B3F12'
  
  const lobes = 9
  let d = ''
  for (let i = 0; i < lobes; i++) {
    const a0 = (i / lobes) * Math.PI * 2
    const a1 = ((i + 1) / lobes) * Math.PI * 2
    const am = (a0 + a1) / 2
    const rIn = 21
    const rOut = 26
    const x0 = 32 + Math.cos(a0) * rIn
    const y0 = 32 + Math.sin(a0) * rIn
    const xm = 32 + Math.cos(am) * rOut
    const ym = 32 + Math.sin(am) * rOut
    const x1 = 32 + Math.cos(a1) * rIn
    const y1 = 32 + Math.sin(a1) * rIn
    if (i === 0) d += `M ${x0.toFixed(1)} ${y0.toFixed(1)} `
    d += `Q ${xm.toFixed(1)} ${ym.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)} `
  }
  d += 'Z'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <path d={d} fill={body} />
      {}
      <circle cx="25" cy="30" r="5" fill={eyeWhite()} />
      <circle cx="39" cy="30" r="5" fill={eyeWhite()} />
      <circle cx="25" cy="30" r="2.4" fill={ink} />
      <circle cx="39" cy="30" r="2.4" fill={ink} />
      {}
      <ellipse cx="32" cy="42" rx="3.4" ry="4.4" fill={ink} />
    </svg>
  )
}


function HappyFace({ size }: FaceProps) {
  const ink = '#6E5806'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <circle cx="32" cy="32" r="25" fill="#F2D44E" />
      {}
      <circle cx="20" cy="38" r="4" fill="#F0926B" opacity="0.7" />
      <circle cx="44" cy="38" r="4" fill="#F0926B" opacity="0.7" />
      {}
      <path d="M19 30 Q24 25 29 30" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
      <path d="M35 30 Q40 25 45 30" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
      {}
      <path d="M22 39 Q32 51 42 39 Z" fill={ink} />
    </svg>
  )
}


function UneasyFace({ size }: FaceProps) {
  const ink = '#3F551A'
  
  const d =
    'M32 8 C45 8 52 16 53 27 C54 37 50 44 53 50 C49 56 40 55 32 56 ' +
    'C24 57 14 56 11 49 C13 43 10 36 11 27 C13 16 19 8 32 8 Z'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <path d={d} fill="#A9C95E" />
      {}
      <circle cx="24" cy="31" r="3.4" fill={ink} />
      <circle cx="40" cy="31" r="3.4" fill={ink} />
      <path d="M20 26 Q24 24 28 26" stroke={ink} strokeWidth="2.2" strokeLinecap="round" fill="none" />
      <path d="M36 26 Q40 24 44 26" stroke={ink} strokeWidth="2.2" strokeLinecap="round" fill="none" />
      {}
      <path
        d="M22 44 Q26 41 29 44 T35 44 T42 44"
        stroke={ink}
        strokeWidth={STROKE_W}
        strokeLinecap="round"
        fill="none"
      />
    </svg>
  )
}


function SadFace({ size }: FaceProps) {
  const ink = '#1E5663'
  
  const d = 'M9 40 C9 21 22 8 32 8 C42 8 55 21 55 40 L55 50 Q55 56 49 56 L15 56 Q9 56 9 50 Z'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <path d={d} fill="#8AC7D8" />
      {}
      <path d="M19 30 Q24 34 29 30" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
      <path d="M35 30 Q40 34 45 30" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
      {}
      <path d="M40 33 C40 33 43 38 43 40 A2.6 2.6 0 0 1 37 40 C37 38 40 33 40 33 Z" fill="#E6F4F8" />
      {}
      <path d="M24 48 Q32 42 40 48" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
    </svg>
  )
}


function AnxiousFace({ size }: FaceProps) {
  const ink = '#4A2A66'
  
  const d =
    'M32 7 Q39 7 43 13 L51 21 Q57 25 57 32 Q57 39 51 43 L43 51 Q39 57 32 57 ' +
    'Q25 57 21 51 L13 43 Q7 39 7 32 Q7 25 13 21 L21 13 Q25 7 32 7 Z'
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden focusable="false">
      <path d={d} fill="#BA8FD4" />
      {}
      <path d="M19 25 L28 28" stroke={ink} strokeWidth="2.4" strokeLinecap="round" />
      <path d="M45 25 L36 28" stroke={ink} strokeWidth="2.4" strokeLinecap="round" />
      {}
      <circle cx="25" cy="33" r="3.2" fill={ink} />
      <circle cx="39" cy="33" r="3.2" fill={ink} />
      {}
      <path d="M27 46 Q32 42 37 46" stroke={ink} strokeWidth={STROKE_W} strokeLinecap="round" fill="none" />
    </svg>
  )
}





interface Mood {
  id: string
  label: string
  color: string
  Svg: (props: FaceProps) => React.ReactElement
}

// customize: replace the mood labels and colors below
const MOODS: readonly Mood[] = [
  { id: 'frustrated', label: 'Frustrated', color: '#CB5E3E', Svg: FrustratedFace },
  { id: 'surprised', label: 'Surprised', color: '#E5A85E', Svg: SurprisedFace },
  { id: 'happy', label: 'Happy', color: '#F2D44E', Svg: HappyFace },
  { id: 'uneasy', label: 'Uneasy', color: '#A9C95E', Svg: UneasyFace },
  { id: 'sad', label: 'Sad', color: '#8AC7D8', Svg: SadFace },
  { id: 'anxious', label: 'Anxious', color: '#BA8FD4', Svg: AnxiousFace },
]

// tune: change to select the initial mood
const INITIAL_INDEX = 2 






interface Blob {
  
  x: number
  y: number
  
  size: number
  
  tint: 'base' | 'soft'
  
  dx: number
  dy: number
  dur: number
}

const BLOBS: readonly Blob[] = [
  { x: 24, y: 30, size: 72, tint: 'base', dx: 8, dy: 6, dur: 11 },
  { x: 76, y: 26, size: 66, tint: 'soft', dx: 7, dy: 8, dur: 13 },
  { x: 34, y: 76, size: 78, tint: 'soft', dx: 9, dy: 5, dur: 15 },
  { x: 80, y: 74, size: 60, tint: 'base', dx: 6, dy: 9, dur: 12 },
  { x: 52, y: 50, size: 54, tint: 'base', dx: 10, dy: 7, dur: 17 },
]



export default function MoodTracker() {
  const rootRef = useRef<HTMLDivElement>(null)
  const theme = useTheme(rootRef)
  const isDark = theme === 'dark'
  const reduced = useReducedMotion() ?? false

  const uid = useId()
  const sliderId = `${uid}-mood`
  const labelId = `${uid}-label`

  const [index, setIndex] = useState(INITIAL_INDEX)
  const mood = MOODS[index]

  
  
  const CONFIRM_GREEN = '#3FA66A'
  const [saved, setSaved] = useState(false)
  const savedTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  useEffect(
    () => () => {
      if (savedTimer.current) clearTimeout(savedTimer.current)
    },
    [],
  )
  const onSave = useCallback(() => {
    if (saved) return 
    setSaved(true)
    savedTimer.current = setTimeout(() => setSaved(false), 1600)
  }, [saved])

  
  
  
  
  
  const baseTint = useMemo(
    () => (isDark ? shadeHex(mood.color, 0.5) : tintHex(mood.color, 0.5)),
    [mood.color, isDark],
  )
  const softTint = useMemo(
    () => (isDark ? shadeHex(mood.color, 0.44) : tintHex(mood.color, 0.66)),
    [mood.color, isDark],
  )
  
  const panelWash = useMemo(
    () => (isDark ? shadeHex(mood.color, 0.56) : tintHex(mood.color, 0.62)),
    [mood.color, isDark],
  )
  
  const panelInk = useMemo(
    () => (isDark ? tintHex(mood.color, 0.88) : inkHex(mood.color)),
    [mood.color, isDark],
  )
  
  const cardTint = useMemo(
    () =>
      isDark
        ? lerpHex('#1A1A1E', mood.color, 0.1)
        : lerpHex('#FFFFFF', mood.color, 0.06),
    [mood.color, isDark],
  )
  
  const deepAccent = useMemo(() => lerpHex(mood.color, '#000000', 0.18), [mood.color])

  const setMood = useCallback((i: number) => {
    setIndex((prev) => {
      const next = clamp(i, 0, MOODS.length - 1)
      return next === prev ? prev : next
    })
  }, [])

  
  const onSliderKey = useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      let next = index
      switch (e.key) {
        case 'ArrowLeft':
        case 'ArrowDown':
          next = index - 1
          break
        case 'ArrowRight':
        case 'ArrowUp':
          next = index + 1
          break
        case 'Home':
          next = 0
          break
        case 'End':
          next = MOODS.length - 1
          break
        default:
          return
      }
      e.preventDefault()
      setMood(next)
    },
    [index, setMood],
  )

  
  
  
  
  const trackRef = useRef<HTMLDivElement>(null)
  const draggingRef = useRef(false)

  const indexFromClientX = useCallback((clientX: number): number => {
    const el = trackRef.current
    if (!el) return index
    const rect = el.getBoundingClientRect()
    if (rect.width === 0) return index
    const ratio = clamp((clientX - rect.left) / rect.width, 0, 1)
    
    return clamp(Math.round(ratio * MOODS.length - 0.5), 0, MOODS.length - 1)
  }, [index])

  const onTrackPointerDown = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      draggingRef.current = true
      e.currentTarget.setPointerCapture(e.pointerId)
      setMood(indexFromClientX(e.clientX))
    },
    [indexFromClientX, setMood],
  )

  const onTrackPointerMove = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (!draggingRef.current) return
      setMood(indexFromClientX(e.clientX))
    },
    [indexFromClientX, setMood],
  )

  const onTrackPointerUp = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      draggingRef.current = false
      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
        e.currentTarget.releasePointerCapture(e.pointerId)
      }
    },
    [],
  )

  
  const handlePct = ((index + 0.5) / MOODS.length) * 100

  
  
  
  const titleColor = isDark ? '#F2F2F0' : '#16160F'
  const subColor = isDark ? '#8A8A86' : '#6B6B62'
  const legendIdle = isDark ? '#26262C' : '#F1F1EC'
  const cardShadow = isDark
    ? '0 24px 60px rgba(0,0,0,0.5)'
    : '0 24px 60px rgba(20,20,18,0.12)'
  
  
  const panelEdge = isDark
    ? `inset 0 0 0 1px ${tintHex(mood.color, 0.4)}33`
    : `inset 0 0 0 1px ${inkHex(mood.color)}1F`

  
  const enter = reduced
    ? { initial: { opacity: 1 }, animate: { opacity: 1 } }
    : {
        initial: { opacity: 0, y: 16 },
        animate: { opacity: 1, y: 0 },
      }

  
  const facePop = reduced
    ? { initial: { opacity: 1 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
    : {
        initial: { opacity: 0, scale: 0.78, y: 8 },
        animate: { opacity: 1, scale: 1, y: 0 },
        exit: { opacity: 0, scale: 0.78, y: -8 },
      }

  const BigSvg = mood.Svg

  return (
    <div
      ref={rootRef}
      className="flex min-h-screen w-full items-center justify-center p-4"
      style={{ background: isDark ? '#0E0E10' : '#EDEDE7' }}
    >
      <motion.div
        initial={enter.initial}
        animate={enter.animate}
        transition={
          reduced
            ? { duration: 0 }
            : { type: 'spring', stiffness: 220, damping: 26 }
        }
        className="relative w-full overflow-hidden rounded-3xl p-5"
        style={{
          maxWidth: 380,
          background: cardTint,
          boxShadow: cardShadow,
          transition: reduced ? undefined : 'background 0.5s ease',
          fontFamily:
            'Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif',
        }}
      >
        {}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0"
          style={{
            zIndex: 0,
            background: `radial-gradient(120% 70% at 50% 28%, ${mood.color}${
              isDark ? '24' : '1F'
            } 0%, ${mood.color}00 60%)`,
            transition: reduced ? undefined : 'background 0.5s ease',
          }}
        />

        {}
        <div className="relative flex flex-col gap-4" style={{ zIndex: 1 }}>
        {}
        <div className="flex items-center justify-between gap-3">
          <div className="flex min-w-0 flex-col">
            <span
              className="text-[16px] font-bold leading-tight"
              style={{ color: titleColor }}
            >
              How are you feeling?
            </span>
            <span
              className="text-[12px] leading-tight"
              style={{ color: subColor, marginTop: 6 }}
            >
              Today · 6-day streak
            </span>
          </div>
          {}
          <motion.button
            type="button"
            onClick={onSave}
            disabled={saved}
            aria-label={saved ? 'Mood recorded' : 'Save mood'}
            aria-live="polite"
            className="relative inline-flex shrink-0 items-center justify-center [@media(hover:hover)]:hover:brightness-110"
            style={{
              minWidth: 44,
              minHeight: 44,
              padding: 0,
              background: 'transparent',
              border: 'none',
              outline: 'none',
              cursor: saved ? 'default' : 'pointer',
            }}
            whileHover={reduced || saved ? undefined : { scale: 1.04 }}
            whileTap={reduced || saved ? undefined : { scale: 0.94 }}
            transition={
              reduced
                ? { duration: 0 }
                : { type: 'spring', stiffness: 480, damping: 28 }
            }
          >
            <motion.span
              className="inline-flex items-center gap-1 rounded-full font-semibold leading-none"
              style={{
                paddingTop: 6,
                paddingBottom: 6,
                paddingLeft: 10,
                paddingRight: 10,
                fontSize: 12,
                
                
                background: saved
                  ? `${CONFIRM_GREEN}${isDark ? '33' : '24'}`
                  : isDark
                    ? `${mood.color}26`
                    : `${mood.color}1F`,
                color: saved
                  ? CONFIRM_GREEN
                  : isDark
                    ? '#F2F2F0'
                    : inkHex(mood.color),
                boxShadow: saved
                  ? `inset 0 0 0 1px ${CONFIRM_GREEN}55`
                  : `inset 0 0 0 1px ${mood.color}${isDark ? '40' : '33'}`,
                transition: reduced
                  ? undefined
                  : 'background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease',
              }}
              animate={
                reduced ? { scale: 1 } : { scale: saved ? [1, 1.12, 1] : 1 }
              }
              transition={
                reduced
                  ? { duration: 0 }
                  : { duration: 0.36, times: [0, 0.5, 1], ease: 'easeOut' }
              }
            >
              {saved ? (
                
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  aria-hidden
                  focusable="false"
                >
                  <path
                    d="M5 12.5 L10 17.5 L19 7"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              ) : (
                
                <svg
                  width="11"
                  height="11"
                  viewBox="0 0 24 24"
                  fill="none"
                  aria-hidden
                  focusable="false"
                >
                  <path
                    d="M6 3.5 H18 A1.5 1.5 0 0 1 19.5 5 V21 L12 16 L4.5 21 V5 A1.5 1.5 0 0 1 6 3.5 Z"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
              {saved ? 'Recorded' : 'Save'}
            </motion.span>
          </motion.button>
        </div>

        {}
        <div
          className="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl"
          style={{
            background: panelWash,
            boxShadow: panelEdge,
            minHeight: 200,
            paddingTop: 20,
            paddingBottom: 20,
            transition: reduced ? undefined : 'background 0.5s ease',
          }}
        >
          {}
          <div
            aria-hidden
            className="absolute inset-0"
            style={{ filter: 'blur(26px)' }}
          >
            {BLOBS.map((blob, i) => {
              const color = blob.tint === 'base' ? baseTint : softTint
              const driftAnim = reduced
                ? { x: 0, y: 0 }
                : {
                    x: [0, blob.dx, -blob.dx * 0.6, 0],
                    y: [0, -blob.dy, blob.dy * 0.7, 0],
                  }
              return (
                <motion.div
                  key={i}
                  className="absolute rounded-full"
                  style={{
                    left: `${blob.x}%`,
                    top: `${blob.y}%`,
                    width: `${blob.size}%`,
                    aspectRatio: '1 / 1',
                    translateX: '-50%',
                    translateY: '-50%',
                    background: `radial-gradient(circle at 50% 50%, ${color}, ${color}00 70%)`,
                    opacity: isDark ? 0.85 : 0.7,
                    transition: 'background 0.45s ease',
                    willChange: 'transform',
                  }}
                  animate={driftAnim}
                  transition={
                    reduced
                      ? { duration: 0 }
                      : {
                          duration: blob.dur,
                          ease: 'easeInOut',
                          repeat: Infinity,
                          repeatType: 'loop',
                        }
                  }
                />
              )
            })}
          </div>

          {}
          <div
            aria-hidden
            className="absolute inset-0"
            style={{
              background: isDark
                ? 'radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%)'
                : 'radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 62%)',
            }}
          />

          {}
          <div className="relative flex flex-col items-center gap-3">
            <div
              className="relative flex items-center justify-center"
              style={{
                width: 'clamp(96px, 30vw, 140px)',
                height: 'clamp(96px, 30vw, 140px)',
              }}
            >
              <AnimatePresence mode="popLayout" initial={false}>
                <motion.div
                  key={mood.id}
                  initial={facePop.initial}
                  animate={facePop.animate}
                  exit={facePop.exit}
                  transition={
                    reduced
                      ? { duration: 0 }
                      : { type: 'spring', stiffness: 360, damping: 22 }
                  }
                  className="absolute inset-0 flex items-center justify-center"
                  style={{
                    filter: isDark
                      ? 'drop-shadow(0 8px 18px rgba(0,0,0,0.30))'
                      : 'drop-shadow(0 8px 16px rgba(20,20,15,0.16))',
                  }}
                >
                  <BigSvg size={140} />
                </motion.div>
              </AnimatePresence>
            </div>

            <AnimatePresence mode="popLayout" initial={false}>
              <motion.span
                key={mood.label}
                id={labelId}
                initial={
                  reduced
                    ? { opacity: 1 }
                    : { opacity: 0, y: 8, filter: 'blur(4px)' }
                }
                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
                exit={
                  reduced
                    ? { opacity: 0 }
                    : { opacity: 0, y: -8, filter: 'blur(4px)' }
                }
                transition={
                  reduced ? { duration: 0 } : { duration: 0.26, ease: 'easeOut' }
                }
                className="text-[24px] font-extrabold leading-none"
                style={{
                  color: panelInk,
                  letterSpacing: '-0.01em',
                  textShadow: isDark
                    ? '0 2px 12px rgba(0,0,0,0.30)'
                    : '0 1px 6px rgba(255,255,255,0.45)',
                }}
              >
                {mood.label}
              </motion.span>
            </AnimatePresence>
          </div>
        </div>

        {}
        <div className="flex flex-col gap-2">
          <span className="text-[12px] font-medium" style={{ color: subColor }}>
            Drag to set your mood
          </span>
          <div
            ref={trackRef}
            role="slider"
            tabIndex={0}
            aria-label="Mood"
            aria-valuemin={1}
            aria-valuemax={MOODS.length}
            aria-valuenow={index + 1}
            aria-valuetext={mood.label}
            aria-describedby={labelId}
            onKeyDown={onSliderKey}
            onPointerDown={onTrackPointerDown}
            onPointerMove={onTrackPointerMove}
            onPointerUp={onTrackPointerUp}
            onPointerCancel={onTrackPointerUp}
            className="relative w-full cursor-pointer touch-none select-none"
            style={{ height: 44 }}
          >
            {}
            <div
              aria-hidden
              className="absolute left-0 right-0 flex overflow-hidden rounded-full"
              style={{ top: 16, height: 12 }}
            >
              {MOODS.map((m) => (
                <span
                  key={m.id}
                  className="h-full flex-1"
                  style={{ background: m.color }}
                />
              ))}
            </div>
            {}
            <motion.span
              aria-hidden
              className="absolute rounded-full"
              style={{
                top: 4,
                width: 36,
                height: 36,
                marginLeft: -18,
                background: '#FFFFFF',
                border: `4px solid ${deepAccent}`,
                boxShadow: '0 4px 12px rgba(0,0,0,0.28)',
              }}
              animate={{ left: `${handlePct}%` }}
              transition={
                reduced
                  ? { duration: 0 }
                  : { type: 'spring', stiffness: 480, damping: 34 }
              }
            >
              <span
                className="absolute inset-0 m-auto rounded-full"
                style={{
                  width: 12,
                  height: 12,
                  background: mood.color,
                  transition: 'background 0.35s ease',
                }}
              />
            </motion.span>
          </div>
        </div>

        {}
        {}
        <div className="grid grid-cols-6 gap-1.5" style={{ marginTop: 4 }}>
          {MOODS.map((m, i) => {
            const active = i === index
            return (
              <button
                key={m.id}
                type="button"
                onClick={() => setMood(i)}
                aria-label={m.label}
                aria-pressed={active}
                className="flex items-center justify-center rounded-xl transition-colors"
                style={{
                  minHeight: 44,
                  
                  
                  padding: 8,
                  background: active ? `${m.color}22` : 'transparent',
                  outline: 'none',
                }}
              >
                <motion.span
                  className="flex items-center justify-center rounded-full"
                  style={{
                    width: 36,
                    height: 36,
                    background: active ? legendIdle : 'transparent',
                    boxShadow: active ? `0 0 0 2px ${m.color}` : 'none',
                  }}
                  animate={
                    reduced ? { scale: 1 } : { scale: active ? 1.08 : 1 }
                  }
                  transition={
                    reduced
                      ? { duration: 0 }
                      : { type: 'spring', stiffness: 420, damping: 24 }
                  }
                >
                  <m.Svg size={28} />
                </motion.span>
              </button>
            )
          })}
        </div>
        </div>
      </motion.div>
    </div>
  )
}

```

---

## Crypto Swap

Category: Widgets
Slug: `crypto-swap`
URL: https://aicanvas.me/components/crypto-swap

A crypto token-swap widget with live exchange rates, price impact, and an animated swap button.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/crypto-swap
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion react-dom
/**
 * Presents a token swap card with live quotes, token pickers, and configurable slippage.
 * Selecting a duplicate token flips the pair, while submission animates confirmation.
 */

import {
  useState,
  useRef,
  useEffect,
  useLayoutEffect,
  useCallback,
  useMemo,
  useId,
  forwardRef,
} from 'react'
import { createPortal } from 'react-dom'
import {
  motion,
  AnimatePresence,
  useMotionValue,
  useTransform,
  animate,
  useReducedMotion,
} from 'framer-motion'
import {
  CaretDown,
  CaretUp,
  ArrowsDownUp,
  ArrowsLeftRight,
  CheckCircle,
  GearSix,
} from '@phosphor-icons/react'

type Theme = 'light' | 'dark'

function readTheme(el: HTMLElement | null): Theme {
  if (typeof document === 'undefined') return 'dark'
  const card = el?.closest('[data-card-theme]')
  if (card) return card.classList.contains('dark') ? 'dark' : 'light'
  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
}

function useTheme(rootRef: React.RefObject<HTMLElement | null>): { theme: Theme } {
  const [theme, setTheme] = useState<Theme>(() => readTheme(rootRef.current))
  useEffect(() => {
    const el = rootRef.current
    setTheme(readTheme(el))
    if (typeof document === 'undefined') return
    const update = () => setTheme(readTheme(el))
    const observer = new MutationObserver(update)
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    })
    const card = el?.closest('[data-card-theme]')
    if (card) {
      observer.observe(card, {
        attributes: true,
        attributeFilter: ['class', 'data-card-theme'],
      })
    }
    return () => observer.disconnect()
  }, [rootRef])
  return { theme }
}


interface Token {
  symbol: string
  name: string
  usdPrice: number
  basePrice: number
  balance: number
  change24h: number
  gradient: [string, string]
}

type SwapStatus = 'idle' | 'swapping' | 'success'
type Side = 'sell' | 'buy'

const INITIAL_TOKENS: Token[] = [
  { symbol: 'ETH',   name: 'Ethereum',   usdPrice: 3412.55,  basePrice: 3412.55,  balance: 52.32,    change24h:  2.41, gradient: ['#627EEA', '#8FA7FF'] },
  { symbol: 'BTC',   name: 'Bitcoin',    usdPrice: 67840.12, basePrice: 67840.12, balance: 1.284,    change24h:  1.07, gradient: ['#F7931A', '#FFC56E'] },
  { symbol: 'USDC',  name: 'USD Coin',   usdPrice: 1.0,      basePrice: 1.0,      balance: 12480.5,  change24h:  0.01, gradient: ['#2775CA', '#4FA3FF'] },
  { symbol: 'USDT',  name: 'Tether',     usdPrice: 1.0,      basePrice: 1.0,      balance: 8920.0,   change24h: -0.02, gradient: ['#26A17B', '#54D6A8'] },
  { symbol: 'SOL',   name: 'Solana',     usdPrice: 168.42,   basePrice: 168.42,   balance: 312.7,    change24h:  5.83, gradient: ['#9945FF', '#19FB9B'] },
  { symbol: 'AAVE',  name: 'Aave',       usdPrice: 102.18,   basePrice: 102.18,   balance: 47.9,     change24h: -1.64, gradient: ['#B6509E', '#2EBAC6'] },
  { symbol: 'MATIC', name: 'Polygon',    usdPrice: 0.7234,   basePrice: 0.7234,   balance: 9430.2,   change24h: -3.12, gradient: ['#8247E5', '#A77BFF'] },
  { symbol: 'LINK',  name: 'Chainlink',  usdPrice: 14.86,    basePrice: 14.86,    balance: 880.4,    change24h:  0.42, gradient: ['#2A5ADA', '#6E97FF'] },
]

const PRICE_DRIFT_MS = 3000
// tune: raise to extend the swapping state
const SWAP_SWAPPING_MS = 900
// tune: raise to extend the success state
const SWAP_SUCCESS_MS = 1600

// tune: raise to reduce quoted price impact
const POOL_DEPTH_USD = 25_000_000
// tune: raise to increase the minimum quoted price impact
const IMPACT_FLOOR = 0.0005
// tune: raise to increase the maximum quoted price impact
const IMPACT_CAP = 0.05
// tune: raise to increase the baseline network fee
const NETWORK_FEE_BASE_USD = 2.4

interface SlippageOption {
  label: string
  value: number
}
const SLIPPAGE_OPTIONS: SlippageOption[] = [
  { label: 'Auto', value: 0.005 },
  { label: '0.1%', value: 0.001 },
  { label: '0.5%', value: 0.005 },
  { label: '1.0%', value: 0.01 },
]
const DEFAULT_SLIPPAGE = SLIPPAGE_OPTIONS[0].value

// tune: change to set the initial sell amount
const DEFAULT_SELL_INPUT = '1'

const SUCCESS_SPARKS: number[] = Array.from(
  { length: 6 },
  (_, i) => (i / 6) * Math.PI * 2,
)

function clamp(n: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, n))
}


interface TrendColors {
  up: string
  down: string
  flat: string
}
function trendColors(isDark: boolean): TrendColors {
  return isDark
    ? { up: '#16C784', down: '#EA3943', flat: '#8E8E84' }
    : { up: '#0FA968', down: '#E5484D', flat: '#6E6E66' }
}


function formatUsd(value: number): string {
  if (!Number.isFinite(value)) return '$0.00'
  return value.toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })
}

function adaptiveFractionDigits(abs: number): number {
  if (abs >= 1) return 2
  if (abs >= 0.01) return 4
  return 8
}

function formatTokenAmount(value: number): string {
  if (!Number.isFinite(value) || value === 0) return '0'
  return value.toLocaleString('en-US', {
    minimumFractionDigits: 0,
    maximumFractionDigits: adaptiveFractionDigits(Math.abs(value)),
  })
}

function capForInput(value: number): string {
  if (!Number.isFinite(value) || value === 0) return ''
  const digits = adaptiveFractionDigits(Math.abs(value))
  const factor = 10 ** digits
  const truncated = Math.trunc(value * factor) / factor
  if (truncated === 0) {
    return String(Number(value.toPrecision(4)))
  }
  return String(truncated)
}

function formatRate(value: number): string {
  if (!Number.isFinite(value) || value === 0) return '0'
  const abs = Math.abs(value)
  let maxFrac: number
  if (abs >= 1000) maxFrac = 2
  else if (abs >= 1) maxFrac = 4
  else if (abs >= 0.01) maxFrac = 6
  else maxFrac = 8
  return value.toLocaleString('en-US', {
    minimumFractionDigits: 0,
    maximumFractionDigits: maxFrac,
  })
}

function formatChange(value: number): string {
  return `${Math.abs(value).toFixed(2)}%`
}

function sanitizeDecimal(raw: string): string {
  let cleaned = raw.replace(/[^0-9.]/g, '')
  const firstDot = cleaned.indexOf('.')
  if (firstDot !== -1) {
    cleaned =
      cleaned.slice(0, firstDot + 1) +
      cleaned.slice(firstDot + 1).replace(/\./g, '')
  }
  const dot = cleaned.indexOf('.')
  if (dot !== -1) {
    cleaned = cleaned.slice(0, dot + 1) + cleaned.slice(dot + 1, dot + 9)
  }
  if (cleaned.length > 1 && cleaned[0] === '0' && cleaned[1] !== '.') {
    cleaned = cleaned.replace(/^0+/, '')
    if (cleaned === '' || cleaned[0] === '.') cleaned = '0' + cleaned
  }
  return cleaned
}

// tune: raise to widen the neutral trend band
const TREND_FLAT_EPS = 0.05
function classifyTrend(change: number): 'up' | 'down' | 'flat' {
  if (change > TREND_FLAT_EPS) return 'up'
  if (change < -TREND_FLAT_EPS) return 'down'
  return 'flat'
}

// Coin marks are adapted from spothq/cryptocurrency-icons under CC0-1.0.
// Trademarks belong to their respective projects.

const COIN_SVGS: Record<string, React.ReactNode> = {
  ETH: (
    <g fill="none" fillRule="evenodd">
      <circle cx="16" cy="16" r="16" fill="#627EEA" />
      <g fill="#FFF" fillRule="nonzero">
        <path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
        <path d="M16.498 4L9 16.22l7.498-3.35z" />
        <path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z" />
        <path d="M16.498 27.995v-6.028L9 17.616z" />
        <path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z" />
        <path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
      </g>
    </g>
  ),
  BTC: (
    <g fill="none" fillRule="evenodd">
      <circle cx="16" cy="16" r="16" fill="#F7931A" />
      <path
        fill="#FFF"
        fillRule="nonzero"
        d="M23.189 14.02c.314-2.096-1.283-3.223-3.465-3.975l.708-2.84-1.728-.43-.69 2.765c-.454-.114-.92-.22-1.385-.326l.695-2.783L15.596 6l-.708 2.839c-.376-.086-.746-.17-1.104-.26l.002-.009-2.384-.595-.46 1.846s1.283.294 1.256.312c.7.175.826.638.805 1.006l-.806 3.235c.048.012.11.03.18.057l-.183-.045-1.13 4.532c-.086.212-.303.531-.793.41.018.025-1.256-.313-1.256-.313l-.858 1.978 2.25.561c.418.105.828.215 1.231.318l-.715 2.872 1.727.43.708-2.84c.472.127.93.245 1.378.357l-.706 2.828 1.728.43.715-2.866c2.948.558 5.164.333 6.097-2.333.752-2.146-.037-3.385-1.588-4.192 1.13-.26 1.98-1.003 2.207-2.538zm-3.95 5.538c-.533 2.147-4.148.986-5.32.695l.95-3.805c1.172.293 4.929.872 4.37 3.11zm.535-5.569c-.487 1.953-3.495.96-4.47.717l.86-3.45c.975.243 4.118.696 3.61 2.733z"
      />
    </g>
  ),
  USDC: (
    <g fill="none">
      <circle fill="#3E73C4" cx="16" cy="16" r="16" />
      <g fill="#FFF">
        <path d="M20.022 18.124c0-2.124-1.28-2.852-3.84-3.156-1.828-.243-2.193-.728-2.193-1.578 0-.85.61-1.396 1.828-1.396 1.097 0 1.707.364 2.011 1.275a.458.458 0 00.427.303h.975a.416.416 0 00.427-.425v-.06a3.04 3.04 0 00-2.743-2.489V9.142c0-.243-.183-.425-.487-.486h-.915c-.243 0-.426.182-.487.486v1.396c-1.829.242-2.986 1.456-2.986 2.974 0 2.002 1.218 2.791 3.778 3.095 1.707.303 2.255.668 2.255 1.639 0 .97-.853 1.638-2.011 1.638-1.585 0-2.133-.667-2.316-1.578-.06-.242-.244-.364-.427-.364h-1.036a.416.416 0 00-.426.425v.06c.243 1.518 1.219 2.61 3.23 2.914v1.457c0 .242.183.425.487.485h.915c.243 0 .426-.182.487-.485V21.34c1.829-.303 3.047-1.578 3.047-3.217z" />
        <path d="M12.892 24.497c-4.754-1.7-7.192-6.98-5.424-11.653.914-2.55 2.925-4.491 5.424-5.402.244-.121.365-.303.365-.607v-.85c0-.242-.121-.424-.365-.485-.061 0-.183 0-.244.06a10.895 10.895 0 00-7.13 13.717c1.096 3.4 3.717 6.01 7.13 7.102.244.121.488 0 .548-.243.061-.06.061-.122.061-.243v-.85c0-.182-.182-.424-.365-.546zm6.46-18.936c-.244-.122-.488 0-.548.242-.061.061-.061.122-.061.243v.85c0 .243.182.485.365.607 4.754 1.7 7.192 6.98 5.424 11.653-.914 2.55-2.925 4.491-5.424 5.402-.244.121-.365.303-.365.607v.85c0 .242.121.424.365.485.061 0 .183 0 .244-.06a10.895 10.895 0 007.13-13.717c-1.096-3.46-3.778-6.07-7.13-7.162z" />
      </g>
    </g>
  ),
  USDT: (
    <g fill="none" fillRule="evenodd">
      <circle cx="16" cy="16" r="16" fill="#26A17B" />
      <path
        fill="#FFF"
        d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118 0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116 0-1.043-3.301-1.914-7.694-2.117"
      />
    </g>
  ),
  SOL: (
    <g fill="none">
      <circle fill="#66F9A1" cx="16" cy="16" r="16" />
      <path
        d="M9.925 19.687a.59.59 0 01.415-.17h14.366a.29.29 0 01.207.497l-2.838 2.815a.59.59 0 01-.415.171H7.294a.291.291 0 01-.207-.498l2.838-2.815zm0-10.517A.59.59 0 0110.34 9h14.366c.261 0 .392.314.207.498l-2.838 2.815a.59.59 0 01-.415.17H7.294a.291.291 0 01-.207-.497L9.925 9.17zm12.15 5.225a.59.59 0 00-.415-.17H7.294a.291.291 0 00-.207.498l2.838 2.815c.11.109.26.17.415.17h14.366a.291.291 0 00.207-.498l-2.838-2.815z"
        fill="#FFF"
      />
    </g>
  ),
  AAVE: (
    <g fill="none">
      <circle fill="#2EBAC6" cx="16" cy="16" r="16" />
      <path
        d="M22.934 21.574l-5.35-13.532C17.28 7.342 16.834 7 16.243 7h-.473c-.592 0-1.039.343-1.341 1.042l-2.327 5.896h-1.761c-.528.002-.956.448-.96 1v.014c.004.553.432.999.96 1.001h.946l-2.221 5.621a1.235 1.235 0 00-.066.384c0 .315.092.562.263.754.17.192.407.288.71.288a.933.933 0 00.552-.192c.17-.123.289-.302.38-.507l2.446-6.348h1.696c.527-.002.955-.449.96-1.001v-.027c-.005-.553-.433-1-.96-1.001h-.907l1.866-4.867L21.093 22.3c.092.205.21.384.381.507.161.122.354.19.553.192.302 0 .539-.096.71-.288.17-.192.262-.439.262-.754a.944.944 0 00-.065-.384z"
        fill="#FFF"
      />
    </g>
  ),
  MATIC: (
    <g fill="none">
      <circle fill="#6F41D8" cx="16" cy="16" r="16" />
      <path
        d="M21.092 12.693c-.369-.215-.848-.215-1.254 0l-2.879 1.654-1.955 1.078-2.879 1.653c-.369.216-.848.216-1.254 0l-2.288-1.294c-.369-.215-.627-.61-.627-1.042V12.19c0-.431.221-.826.627-1.042l2.25-1.258c.37-.216.85-.216 1.256 0l2.25 1.258c.37.216.628.611.628 1.042v1.654l1.955-1.115v-1.653a1.16 1.16 0 00-.627-1.042l-4.17-2.372c-.369-.216-.848-.216-1.254 0l-4.244 2.372A1.16 1.16 0 006 11.076v4.78c0 .432.221.827.627 1.043l4.244 2.372c.369.215.849.215 1.254 0l2.879-1.618 1.955-1.114 2.879-1.617c.369-.216.848-.216 1.254 0l2.251 1.258c.37.215.627.61.627 1.042v2.552c0 .431-.22.826-.627 1.042l-2.25 1.294c-.37.216-.85.216-1.255 0l-2.251-1.258c-.37-.216-.628-.611-.628-1.042v-1.654l-1.955 1.115v1.653c0 .431.221.827.627 1.042l4.244 2.372c.369.216.848.216 1.254 0l4.244-2.372c.369-.215.627-.61.627-1.042v-4.78a1.16 1.16 0 00-.627-1.042l-4.28-2.409z"
        fill="#FFF"
      />
    </g>
  ),
  LINK: (
    <g fill="none">
      <circle fill="#2A5ADA" cx="16" cy="16" r="16" />
      <path
        d="M16 6l-1.799 1.055L9.3 9.945 7.5 11v10l1.799 1.055 4.947 2.89L16.045 26l1.799-1.055 4.857-2.89L24.5 21V11l-1.799-1.055-4.902-2.89L16 6zm-4.902 12.89v-5.78L16 10.22l4.902 2.89v5.78L16 21.78l-4.902-2.89z"
        fill="#FFF"
      />
    </g>
  ),
}

function CoinIcon({ token, size }: { token: Token; size: number }) {
  const mark = COIN_SVGS[token.symbol]
  if (!mark) return <CoinDisc token={token} size={size} />
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 32 32"
      width={size}
      height={size}
      role="img"
      aria-hidden
      className="block shrink-0"
      style={{ borderRadius: '50%' }}
    >
      {mark}
    </svg>
  )
}


function CoinDisc({ token, size }: { token: Token; size: number }) {
  const letters = token.symbol.slice(0, token.symbol.length <= 3 ? 1 : 2)
  return (
    <span
      aria-hidden
      className="inline-flex shrink-0 items-center justify-center rounded-full font-bold text-white"
      style={{
        width: size,
        height: size,
        fontSize: size * 0.42,
        letterSpacing: '-0.02em',
        background: `linear-gradient(135deg, ${token.gradient[0]}, ${token.gradient[1]})`,
        boxShadow: `0 2px 8px ${token.gradient[0]}55`,
      }}
    >
      {letters}
    </span>
  )
}

function TrendChip({ token, isDark }: { token: Token; isDark: boolean }) {
  const dir = classifyTrend(token.change24h)
  const colors = trendColors(isDark)
  const color = dir === 'up' ? colors.up : dir === 'down' ? colors.down : colors.flat
  return (
    <span
      className="inline-flex items-center gap-0.5 tabular-nums"
      style={{ color, fontSize: 12, fontWeight: 600, lineHeight: 1 }}
    >
      {dir === 'up' && <CaretUp size={12} weight="fill" />}
      {dir === 'down' && <CaretDown size={12} weight="fill" />}
      {formatChange(token.change24h)}
    </span>
  )
}


function AnimatedNumber({
  value,
  format,
  className,
  style,
  reduced,
}: {
  value: number
  format: (n: number) => string
  className?: string
  style?: React.CSSProperties
  reduced: boolean
}) {
  const mv = useMotionValue(value)
  const display = useTransform(mv, (n) => format(n))
  const last = useRef(value)

  useEffect(() => {
    if (reduced) {
      mv.set(value)
      last.current = value
      return
    }
    // tune: raise the threshold to snap more price changes
    const rel = Math.abs(value - last.current) / (Math.abs(last.current) || 1)
    if (rel < 0.001) {
      mv.set(value)
      last.current = value
      return
    }
    last.current = value
    const controls = animate(mv, value, {
      duration: 0.5,
      ease: [0.22, 1, 0.36, 1],
    })
    return () => controls.stop()
  }, [value, mv, reduced])

  return (
    <motion.span className={className} style={style}>
      {display}
    </motion.span>
  )
}

// tune: raise to make token rows taller
const ROW_HEIGHT = 48
// tune: raise to show more token rows before scrolling
const VISIBLE_ROWS = 3
// tune: raise to increase spacing between token rows
const ROW_GAP = 4
// tune: raise to increase the dropdown's vertical padding
const PANEL_PAD_Y = 12
const LIST_DEFAULT_HEIGHT =
  ROW_HEIGHT * VISIBLE_ROWS + ROW_GAP * (VISIBLE_ROWS - 1)
const PANEL_DEFAULT_HEIGHT = LIST_DEFAULT_HEIGHT + PANEL_PAD_Y
// tune: raise to move the dropdown farther from its trigger
const DROPDOWN_GAP = 8

type Placement = 'down' | 'up'

interface PopoverPosition {
  top: number
  left: number
  width: number
  maxHeight: number
  placement: Placement
}

function usePopoverPosition(
  triggerRef: React.RefObject<HTMLElement | null> | undefined,
  boundRef: React.RefObject<HTMLElement | null> | undefined,
  open: boolean,
): PopoverPosition | null {
  const [pos, setPos] = useState<PopoverPosition | null>(null)

  useLayoutEffect(() => {
    if (!open) {
      setPos(null)
      return
    }

    let last: PopoverPosition | null = null
    // tune: raise to ignore larger dropdown position shifts
    const EPS = 0.5

    const measure = (): PopoverPosition | null => {
      const pill = triggerRef?.current
      const card = boundRef?.current
      if (!pill || !card || typeof window === 'undefined') return null
      const pillRect = pill.getBoundingClientRect()
      const cardRect = card.getBoundingClientRect()

      const width = cardRect.width
      const left = cardRect.left

      const spaceBelow = cardRect.bottom - pillRect.bottom - DROPDOWN_GAP
      const spaceAbove = pillRect.top - cardRect.top - DROPDOWN_GAP

      const cardHeight = cardRect.height
      const desired = Math.min(PANEL_DEFAULT_HEIGHT, cardHeight)

      let placement: Placement
      if (desired <= spaceBelow) placement = 'down'
      else if (desired <= spaceAbove) placement = 'up'
      else placement = spaceBelow >= spaceAbove ? 'down' : 'up'

      let top: number
      let maxHeight: number
      if (placement === 'down') {
        top = pillRect.bottom + DROPDOWN_GAP
        maxHeight = Math.min(desired, Math.max(0, spaceBelow))
      } else {
        maxHeight = Math.min(desired, Math.max(0, spaceAbove))
        top = pillRect.top - DROPDOWN_GAP - maxHeight
      }

      maxHeight = Math.min(maxHeight, cardHeight)

      return { top, left, width, maxHeight, placement }
    }

    const changed = (
      prev: PopoverPosition | null,
      next: PopoverPosition,
    ): boolean => {
      if (!prev) return true
      if (prev.placement !== next.placement) return true
      return (
        Math.abs(prev.top - next.top) > EPS ||
        Math.abs(prev.left - next.left) > EPS ||
        Math.abs(prev.width - next.width) > EPS ||
        Math.abs(prev.maxHeight - next.maxHeight) > EPS
      )
    }

    const compute = () => {
      const next = measure()
      if (!next) return
      if (changed(last, next)) {
        last = next
        setPos(next)
      }
    }

    compute()

    const card = boundRef?.current ?? null
    const pill = triggerRef?.current ?? null
    let ro: ResizeObserver | null = null
    if (typeof ResizeObserver !== 'undefined') {
      ro = new ResizeObserver(() => compute())
      if (card) ro.observe(card)
      if (pill) ro.observe(pill)
    }

    window.addEventListener('scroll', compute, true)
    window.addEventListener('resize', compute)
    return () => {
      ro?.disconnect()
      window.removeEventListener('scroll', compute, true)
      window.removeEventListener('resize', compute)
    }
  }, [triggerRef, boundRef, open])

  return pos
}


function TokenPicker({
  tokens,
  activeSymbol,
  isDark,
  reduced,
  listId,
  optionId,
  triggerRef,
  boundRef,
  onSelect,
}: {
  tokens: Token[]
  activeSymbol: string
  isDark: boolean
  reduced: boolean
  listId: string
  optionId: (symbol: string) => string
  triggerRef?: React.RefObject<HTMLButtonElement | null>
  boundRef?: React.RefObject<HTMLElement | null>
  onSelect: (symbol: string) => void
}) {
  const position = usePopoverPosition(triggerRef, boundRef, true)

  const activeStart = Math.max(
    0,
    tokens.findIndex((t) => t.symbol === activeSymbol),
  )
  const [activeIndex, setActiveIndex] = useState(activeStart)
  const optionRefs = useRef<(HTMLButtonElement | null)[]>([])
  const panelRef = useRef<HTMLDivElement>(null)

  const safeIndex = Math.min(activeIndex, tokens.length - 1)

  useEffect(() => {
    if (!position) return
    optionRefs.current[safeIndex]?.focus({ preventScroll: true })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [position !== null])

  useEffect(() => {
    const trigger = triggerRef?.current
    const panel = panelRef.current
    return () => {
      if (panel && panel.contains(document.activeElement)) {
        trigger?.focus({ preventScroll: true })
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const focusIndex = useCallback(
    (i: number) => {
      const clamped = clamp(i, 0, tokens.length - 1)
      setActiveIndex(clamped)
      optionRefs.current[clamped]?.focus({ preventScroll: true })
    },
    [tokens.length],
  )

  const onPanelKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      switch (e.key) {
        case 'ArrowDown':
          e.preventDefault()
          focusIndex(safeIndex + 1)
          break
        case 'ArrowUp':
          e.preventDefault()
          focusIndex(safeIndex - 1)
          break
        case 'Home':
          e.preventDefault()
          focusIndex(0)
          break
        case 'End':
          e.preventDefault()
          focusIndex(tokens.length - 1)
          break
        case 'Enter':
        case ' ':
        case 'Spacebar':
          e.preventDefault()
          onSelect(tokens[safeIndex].symbol)
          break
        case 'Tab': {
          const last = tokens.length - 1
          if (e.shiftKey && safeIndex === 0) {
            e.preventDefault()
            focusIndex(last)
          } else if (!e.shiftKey && safeIndex === last) {
            e.preventDefault()
            focusIndex(0)
          } else {
            e.preventDefault()
            focusIndex(safeIndex + (e.shiftKey ? -1 : 1))
          }
          break
        }
        default:
          break
      }
    },
    [focusIndex, onSelect, safeIndex, tokens],
  )

  const surface = isDark ? '#26262A' : '#FFFFFF'
  const titleColor = isDark ? '#ECECEC' : '#16160F'
  const subColor = isDark ? '#8A8A86' : '#6B6B62'
  const rowHover = isDark ? '#2F2F34' : '#F2F2EF'
  const activeFill = isDark ? 'rgba(174,182,236,0.16)' : 'rgba(154,166,234,0.16)'

  const scrollThumb = isDark ? '#46464C' : '#C9C9BC'
  const SCROLL_BASE =
    'overflow-y-auto [scrollbar-gutter:stable] ' +
    '[&::-webkit-scrollbar]:w-2 ' +
    '[&::-webkit-scrollbar-track]:bg-transparent ' +
    '[&::-webkit-scrollbar-thumb]:rounded-full'
  const scrollClass = isDark
    ? `${SCROLL_BASE} [&::-webkit-scrollbar-thumb]:bg-[#46464C] [&::-webkit-scrollbar-thumb:hover]:bg-[#5A5A62]`
    : `${SCROLL_BASE} [&::-webkit-scrollbar-thumb]:bg-[#C9C9BC] [&::-webkit-scrollbar-thumb:hover]:bg-[#B5B5A6]`
  const scrollStyle: React.CSSProperties = {
    scrollbarWidth: 'thin',
    scrollbarColor: `${scrollThumb} transparent`,
  }

  const panelTransition = reduced
    ? { duration: 0.15 }
    : ({ type: 'spring', stiffness: 360, damping: 30 } as const)

  const renderList = (listStyle: React.CSSProperties, className: string) => (
    <div
      className={`flex flex-col gap-1 ${scrollClass} ${className}`}
      style={{ ...scrollStyle, ...listStyle }}
    >
      {tokens.map((t, i) => {
        const isActive = t.symbol === activeSymbol
        const isCurrent = i === safeIndex
        return (
          <button
            key={t.symbol}
            id={optionId(t.symbol)}
            ref={(el) => {
              optionRefs.current[i] = el
            }}
            type="button"
            role="option"
            aria-selected={isActive}
            tabIndex={isCurrent ? 0 : -1}
            onClick={() => onSelect(t.symbol)}
            onFocus={() => setActiveIndex(i)}
            className="flex w-full items-center gap-3 rounded-2xl px-3 text-left transition-colors outline-none"
            style={{
              minHeight: ROW_HEIGHT,
              background: isActive ? activeFill : 'transparent',
            }}
            onMouseEnter={(e) => {
              if (!isActive) e.currentTarget.style.background = rowHover
            }}
            onMouseLeave={(e) => {
              if (!isActive) e.currentTarget.style.background = 'transparent'
            }}
          >
            <CoinIcon token={t} size={32} />
            <span className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-[14px] font-semibold" style={{ color: titleColor }}>
                {t.name}
              </span>
              <span className="truncate text-[12px]" style={{ color: subColor }}>
                {t.symbol}
              </span>
            </span>
            <span className="flex shrink-0 flex-col items-end gap-0.5">
              <span className="text-[14px] font-semibold tabular-nums" style={{ color: titleColor }}>
                {formatTokenAmount(t.balance)}
              </span>
              <TrendChip token={t} isDark={isDark} />
            </span>
          </button>
        )
      })}
    </div>
  )

  if (typeof document === 'undefined' || !position) return null

  const listMaxHeight = Math.max(0, position.maxHeight - PANEL_PAD_Y)

  return createPortal(
    <motion.div
      ref={panelRef}
      data-token-dropdown
      id={listId}
      role="listbox"
      aria-label="Select a token"
      aria-activedescendant={optionId(tokens[safeIndex]?.symbol ?? activeSymbol)}
      onKeyDown={onPanelKeyDown}
      className="fixed z-50 flex flex-col rounded-3xl p-1.5 outline-none"
      style={{
        top: position.top,
        left: position.left,
        width: position.width,
        maxHeight: position.maxHeight,
        background: surface,
        boxShadow: isDark
          ? '0 24px 60px rgba(0,0,0,0.55)'
          : '0 24px 60px rgba(20,20,18,0.16)',
        transformOrigin: position.placement === 'up' ? 'bottom center' : 'top center',
      }}
      initial={
        reduced
          ? { opacity: 0 }
          : { opacity: 0, scale: 0.96, y: position.placement === 'up' ? 6 : -6 }
      }
      animate={reduced ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}
      exit={
        reduced
          ? { opacity: 0 }
          : { opacity: 0, scale: 0.96, y: position.placement === 'up' ? 6 : -6 }
      }
      transition={panelTransition}
    >
      {renderList({ maxHeight: listMaxHeight }, 'min-h-0 flex-1')}
    </motion.div>,
    document.body,
  )
}


function SwapCard({
  side,
  token,
  sellInput,
  buyAmount,
  hasAmount,
  isDark,
  reduced,
  locked,
  pickerOpen,
  tokens,
  cardRef,
  onInputChange,
  onMax,
  onTogglePicker,
  onSelect,
}: {
  side: Side
  token: Token
  sellInput: string
  buyAmount: number
  hasAmount: boolean
  isDark: boolean
  reduced: boolean
  locked: boolean
  pickerOpen: boolean
  tokens: Token[]
  cardRef: React.RefObject<HTMLDivElement | null>
  onInputChange?: (value: string) => void
  onMax?: () => void
  onTogglePicker: () => void
  onSelect: (symbol: string) => void
}) {
  const isSell = side === 'sell'
  const pillRef = useRef<HTMLButtonElement>(null)

  const idBase = useId()
  const listId = `${idBase}-list`
  const optionId = useCallback(
    (symbol: string) => `${idBase}-opt-${symbol}`,
    [idBase],
  )

  const cardBg = isDark ? '#1D1D20' : '#F2F2EF'
  const labelColor = isDark ? '#8A8A86' : '#6B6B62'
  const amountColor = isDark ? '#ECECEC' : '#16160F'
  const usdColor = isDark ? '#8A8A86' : '#6E6E66'

  return (
    <div
      className="relative rounded-3xl px-4 py-3"
      style={{ background: cardBg }}
    >
      <span className="text-[12px] font-medium" style={{ color: labelColor }}>
        {isSell ? 'Sell' : 'Buy'}
      </span>

      <div className="mt-1 flex items-center gap-3">
        {}
        <div className="min-w-0 flex-1">
          {isSell ? (
            <input
              value={sellInput}
              onChange={(e) => onInputChange?.(e.target.value)}
              inputMode="decimal"
              placeholder="0"
              disabled={locked}
              className="w-full min-w-0 bg-transparent font-bold tabular-nums outline-none disabled:cursor-not-allowed"
              style={{
                color: amountColor,
                fontSize: 'clamp(20px, 6vw, 28px)',
                lineHeight: 1.1,
              }}
              aria-label="Sell amount"
            />
          ) : (
            <div
              role="status"
              aria-live="polite"
              aria-label={`Buy amount ${formatTokenAmount(buyAmount)} ${token.symbol}`}
            >
              <AnimatedNumber
                value={buyAmount}
                format={formatTokenAmount}
                reduced={reduced}
                className="block w-full truncate font-bold tabular-nums"
                style={{
                  color: hasAmount ? amountColor : usdColor,
                  fontSize: 'clamp(20px, 6vw, 28px)',
                  lineHeight: 1.1,
                }}
              />
            </div>
          )}
        </div>

        {}
        <TokenPill
          ref={pillRef}
          token={token}
          isDark={isDark}
          open={pickerOpen}
          reduced={reduced}
          disabled={locked}
          listId={listId}
          onClick={onTogglePicker}
        />
      </div>

      {}
      <div className="mt-2 flex items-center justify-between gap-2">
        <TrendChip token={token} isDark={isDark} />

        {isSell && (
          <div className="flex items-center gap-2">
            <span className="text-[12px] tabular-nums" style={{ color: usdColor }}>
              {formatTokenAmount(token.balance)} {token.symbol}
            </span>
            <button
              type="button"
              onClick={onMax}
              disabled={locked}
              className="inline-flex min-h-[44px] items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed [@media(hover:hover)]:hover:[&>span]:bg-[var(--max-hover)]"
              style={{ opacity: locked ? 0.5 : 1 }}
            >
              <span
                className="rounded-full px-2.5 py-1 text-[12px] font-bold transition-colors"
                style={
                  {
                    color: isDark ? '#C7CDF2' : '#4A57B8',
                    background: isDark
                      ? 'rgba(174,182,236,0.16)'
                      : 'rgba(154,166,234,0.16)',
                    '--max-hover': locked
                      ? isDark
                        ? 'rgba(174,182,236,0.16)'
                        : 'rgba(154,166,234,0.16)'
                      : isDark
                        ? 'rgba(174,182,236,0.28)'
                        : 'rgba(154,166,234,0.28)',
                  } as React.CSSProperties
                }
              >
                Max
              </span>
            </button>
          </div>
        )}
      </div>

      {}
      <AnimatePresence>
        {pickerOpen && (
          <TokenPicker
            tokens={tokens}
            activeSymbol={token.symbol}
            isDark={isDark}
            reduced={reduced}
            listId={listId}
            optionId={optionId}
            triggerRef={pillRef}
            boundRef={cardRef}
            onSelect={onSelect}
          />
        )}
      </AnimatePresence>
    </div>
  )
}


const TokenPill = forwardRef<
  HTMLButtonElement,
  {
    token: Token
    isDark: boolean
    open: boolean
    reduced: boolean
    disabled: boolean
    listId: string
    onClick: () => void
  }
>(function TokenPill({ token, isDark, open, reduced, disabled, listId, onClick }, ref) {
  const pillBg = isDark ? '#2A2A2E' : '#FFFFFF'
  const pillHoverBg = isDark ? '#34343A' : '#F4F4F1'
  const caretColor = isDark ? '#8A8A86' : '#6B6B62'
  return (
    <motion.button
      ref={ref}
      type="button"
      onClick={onClick}
      disabled={disabled}
      whileHover={
        disabled
          ? undefined
          : reduced
            ? { background: pillHoverBg }
            : { scale: 1.03, background: pillHoverBg }
      }
      whileTap={disabled || reduced ? undefined : { scale: 0.96 }}
      transition={{ type: 'spring', stiffness: 400, damping: 26 }}
      className="flex shrink-0 items-center gap-2 rounded-full pl-1.5 pr-3 disabled:cursor-not-allowed"
      style={{
        minHeight: 44,
        background: pillBg,
        opacity: disabled ? 0.6 : 1,
        boxShadow: isDark
          ? '0 1px 2px rgba(0,0,0,0.3)'
          : '0 1px 3px rgba(20,20,18,0.1)',
      }}
      aria-label={`Change token, currently ${token.symbol}`}
      aria-haspopup="listbox"
      aria-controls={listId}
      aria-expanded={open}
    >
      <CoinIcon token={token} size={28} />
      <span
        className="text-[16px] font-bold"
        style={{ color: isDark ? '#ECECEC' : '#16160F' }}
      >
        {token.symbol}
      </span>
      {}
      <motion.span
        animate={{ rotate: open ? 180 : 0 }}
        transition={
          reduced
            ? { duration: 0 }
            : { type: 'spring', stiffness: 360, damping: 26 }
        }
        style={{ display: 'inline-flex' }}
      >
        <CaretDown size={14} weight="regular" style={{ color: caretColor }} />
      </motion.span>
    </motion.button>
  )
})


interface SwapQuote {
  sellToken: Token
  buyToken: Token
  midRate: number
  priceImpact: number
  networkFeeUsd: number
  buyAmount: number
  minReceived: number
  slippage: number
}

function DetailsPanel({
  quote,
  hasAmount,
  isDark,
  reduced,
  slippageOptions,
  slippage,
  onSlippageChange,
}: {
  quote: SwapQuote
  hasAmount: boolean
  isDark: boolean
  reduced: boolean
  slippageOptions: SlippageOption[]
  slippage: number
  onSlippageChange: (value: number) => void
}) {
  const [expanded, setExpanded] = useState(false)
  const [inverted, setInverted] = useState(false)
  const [slipOpen, setSlipOpen] = useState(false)
  const slipRef = useRef<HTMLDivElement>(null)

  const labelColor = isDark ? '#8A8A86' : '#6B6B62'
  const valueColor = isDark ? '#ECECEC' : '#16160F'
  const panelBg = isDark ? '#1D1D20' : '#F2F2EF'
  const rowHoverFill = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(20,20,18,0.045)'
  const dividerColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(20,20,18,0.08)'
  const chipBg = isDark ? '#26262A' : '#FFFFFF'
  const chipHoverBg = isDark ? '#303036' : '#F4F4F1'
  const chipShadow = isDark
    ? '0 1px 2px rgba(0,0,0,0.3)'
    : '0 1px 2px rgba(20,20,18,0.08)'
  const chipActiveBg = isDark
    ? 'rgba(174,182,236,0.16)'
    : 'rgba(154,166,234,0.16)'
  const chipActiveText = isDark ? '#C7CDF2' : '#4A57B8'
  const colors = trendColors(isDark)

  const impactPct = quote.priceImpact * 100
  const amber = isDark ? '#F5A524' : '#C77700'
  const impactColor =
    impactPct > 2 ? colors.down : impactPct >= 0.5 ? amber : colors.up

  const fromTok = inverted ? quote.buyToken : quote.sellToken
  const toTok = inverted ? quote.sellToken : quote.buyToken
  const rate = inverted ? 1 / quote.midRate : quote.midRate

  useEffect(() => {
    if (!slipOpen) return
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape') setSlipOpen(false)
    }
    function onPointer(e: MouseEvent | TouchEvent) {
      if (slipRef.current && !slipRef.current.contains(e.target as Node)) {
        setSlipOpen(false)
      }
    }
    document.addEventListener('keydown', onKey)
    document.addEventListener('mousedown', onPointer)
    document.addEventListener('touchstart', onPointer)
    return () => {
      document.removeEventListener('keydown', onKey)
      document.removeEventListener('mousedown', onPointer)
      document.removeEventListener('touchstart', onPointer)
    }
  }, [slipOpen])

  const activeSlipLabel =
    slippageOptions.find((o) => o.value === slippage)?.label ?? '0.5%'
  const slipDisplay =
    activeSlipLabel === 'Auto'
      ? `Auto (${(slippage * 100).toFixed(1)}%)`
      : `${(slippage * 100).toFixed(1)}%`

  const rateTransition = reduced
    ? { duration: 0 }
    : { duration: 0.26, ease: [0.22, 1, 0.36, 1] as const }

  return (
    <div
      className="overflow-hidden rounded-3xl px-4"
      style={{ background: panelBg }}
    >
      {}
      <div
        className="flex items-center justify-between gap-2 -mx-4 px-4 transition-colors [@media(hover:hover)]:hover:bg-[var(--row-hover)]"
        style={
          { minHeight: 48, '--row-hover': rowHoverFill } as React.CSSProperties
        }
      >
        <button
          type="button"
          onClick={() => setInverted((v) => !v)}
          className="group flex min-w-0 items-center gap-1.5 self-stretch transition-colors"
          aria-label="Invert exchange rate"
        >
          <AnimatePresence mode="wait" initial={false}>
            <motion.span
              key={inverted ? 'inv' : 'std'}
              initial={reduced ? { opacity: 0 } : { opacity: 0, y: 4 }}
              animate={reduced ? { opacity: 1 } : { opacity: 1, y: 0 }}
              exit={reduced ? { opacity: 0 } : { opacity: 0, y: -4 }}
              transition={rateTransition}
              className="truncate text-[14px] font-semibold tabular-nums"
              style={{ color: valueColor }}
            >
              1 {fromTok.symbol} = {formatRate(rate)} {toTok.symbol}
            </motion.span>
          </AnimatePresence>
          <ArrowsLeftRight
            size={14}
            weight="regular"
            className="shrink-0 transition-colors [@media(hover:hover)]:group-hover:text-[var(--invert-hover)]"
            style={
              { color: labelColor, '--invert-hover': valueColor } as React.CSSProperties
            }
          />
        </button>

        <button
          type="button"
          onClick={() => setExpanded((v) => !v)}
          className="-my-[9px] -mr-[9px] inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center transition-colors [@media(hover:hover)]:hover:[&>span]:bg-[var(--toggle-hover)]"
          style={{ '--toggle-hover': rowHoverFill } as React.CSSProperties}
          aria-label={expanded ? 'Hide swap details' : 'Show swap details'}
          aria-expanded={expanded}
        >
          <span
            className="flex items-center justify-center rounded-full transition-colors"
            style={{ width: 26, height: 26 }}
          >
            <motion.span
              animate={{ rotate: expanded ? 180 : 0 }}
              transition={reduced ? { duration: 0 } : { type: 'spring', stiffness: 360, damping: 26 }}
              style={{ display: 'inline-flex' }}
            >
              <CaretDown size={14} weight="regular" style={{ color: labelColor }} />
            </motion.span>
          </span>
        </button>
      </div>

      {}
      <AnimatePresence initial={false}>
        {expanded && (
          <motion.div
            key="breakdown"
            initial={reduced ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={reduced ? { opacity: 0, height: 0 } : { opacity: 0, height: 0 }}
            transition={reduced ? { duration: 0 } : { duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
            style={{ overflow: 'visible' }}
          >
            {}
            <div
              className="mt-3 flex flex-col gap-1.5 pt-3 pb-3"
              style={{ boxShadow: `inset 0 1px 0 0 ${dividerColor}` }}
            >
              <div className="flex items-center justify-between gap-2" style={{ minHeight: 24 }}>
                <span className="text-[12px]" style={{ color: labelColor }}>
                  Price impact
                </span>
                <span
                  className="text-[12px] font-semibold tabular-nums"
                  style={{ color: impactColor }}
                >
                  {hasAmount ? `-${impactPct.toFixed(2)}%` : '—'}
                </span>
              </div>

              <div className="flex items-center justify-between gap-2" style={{ minHeight: 24 }}>
                <span className="text-[12px]" style={{ color: labelColor }}>
                  Network fee
                </span>
                <AnimatedNumber
                  value={quote.networkFeeUsd}
                  format={(n) => `~${formatUsd(n)}`}
                  reduced={reduced}
                  className="text-[12px] font-semibold tabular-nums"
                  style={{ color: valueColor }}
                />
              </div>

              {}
              <div
                className="relative flex items-center justify-between gap-2"
                style={{ minHeight: 28 }}
                ref={slipRef}
              >
                <span className="text-[12px]" style={{ color: labelColor }}>
                  Max slippage
                </span>
                <button
                  type="button"
                  onClick={() => setSlipOpen((v) => !v)}
                  className="-my-2 inline-flex min-h-[44px] items-center justify-center transition-colors [@media(hover:hover)]:hover:[&>span]:bg-[var(--chip-hover)]"
                  style={{ '--chip-hover': chipHoverBg } as React.CSSProperties}
                  aria-label="Change slippage tolerance"
                  aria-expanded={slipOpen}
                >
                  <span
                    className="flex items-center gap-1.5 rounded-full px-2.5 py-1 transition-colors"
                    style={{ background: chipBg, boxShadow: chipShadow }}
                  >
                    <GearSix size={14} weight="regular" style={{ color: labelColor }} />
                    <span className="text-[12px] font-semibold tabular-nums" style={{ color: valueColor }}>
                      {slipDisplay}
                    </span>
                  </span>
                </button>

                <AnimatePresence>
                  {slipOpen && (
                    <motion.div
                      key="slip-pop"
                      className="absolute right-0 z-30 flex gap-1 rounded-2xl p-1.5"
                      style={{
                        bottom: 'calc(100% + 6px)',
                        background: chipBg,
                        boxShadow: isDark
                          ? '0 16px 40px rgba(0,0,0,0.5)'
                          : '0 16px 40px rgba(20,20,18,0.14)',
                      }}
                      initial={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: 6 }}
                      animate={reduced ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}
                      exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: 6 }}
                      transition={reduced ? { duration: 0.12 } : { type: 'spring', stiffness: 420, damping: 30 }}
                    >
                      {slippageOptions.map((o) => {
                        const active = o.value === slippage
                        return (
                          <button
                            key={o.label}
                            type="button"
                            onClick={() => {
                              onSlippageChange(o.value)
                              setSlipOpen(false)
                            }}
                            className="inline-flex min-h-[44px] items-center justify-center transition-colors [@media(hover:hover)]:hover:[&>span]:bg-[var(--opt-hover)]"
                            style={
                              {
                                '--opt-hover': active
                                  ? chipActiveBg
                                  : rowHoverFill,
                              } as React.CSSProperties
                            }
                          >
                            <span
                              className="rounded-xl px-2.5 py-1.5 text-[12px] font-semibold tabular-nums transition-colors"
                              style={{
                                background: active ? chipActiveBg : 'transparent',
                                color: active ? chipActiveText : valueColor,
                              }}
                            >
                              {o.label}
                            </span>
                          </button>
                        )
                      })}
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>

              <div className="flex items-center justify-between gap-2" style={{ minHeight: 24 }}>
                <span className="text-[12px]" style={{ color: labelColor }}>
                  Min received
                </span>
                <span
                  className="text-[12px] font-semibold tabular-nums"
                  style={{ color: valueColor }}
                >
                  {hasAmount
                    ? `${formatTokenAmount(quote.minReceived)} ${quote.buyToken.symbol}`
                    : '—'}
                </span>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}


export default function CryptoSwap() {
  const rootRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(rootRef)
  const isDark = theme === 'dark'
  const prefersReduced = useReducedMotion()
  const reduced = prefersReduced ?? false

  const [tokens, setTokens] = useState<Token[]>(INITIAL_TOKENS)
  const [sellSymbol, setSellSymbol] = useState('ETH')
  const [buySymbol, setBuySymbol] = useState('BTC')
  const [sellInput, setSellInput] = useState(DEFAULT_SELL_INPUT)
  const [picker, setPicker] = useState<Side | null>(null)
  const [status, setStatus] = useState<SwapStatus>('idle')
  const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE)
  const [networkFeeUsd, setNetworkFeeUsd] = useState(NETWORK_FEE_BASE_USD)

  const cardRef = useRef<HTMLDivElement>(null)
  const flipAngle = useMotionValue(0)
  const flipCount = useRef(0)
  const flipControls = useRef<ReturnType<typeof animate> | null>(null)
  useEffect(() => () => flipControls.current?.stop(), [])

  const sellToken = useMemo(
    () => tokens.find((t) => t.symbol === sellSymbol) ?? tokens[0],
    [tokens, sellSymbol],
  )
  const buyToken = useMemo(
    () => tokens.find((t) => t.symbol === buySymbol) ?? tokens[1],
    [tokens, buySymbol],
  )

  const sellAmount = parseFloat(sellInput) || 0
  const sellUsd = sellAmount * sellToken.usdPrice
  const midRate = buyToken.usdPrice > 0 ? sellToken.usdPrice / buyToken.usdPrice : 0
  const idealBuy = sellAmount * midRate
  const priceImpact = sellAmount > 0
    ? clamp(sellUsd / POOL_DEPTH_USD, IMPACT_FLOOR, IMPACT_CAP)
    : 0
  const buyAmount = idealBuy * (1 - priceImpact)
  const minReceived = buyAmount * (1 - slippage)

  const hasAmount = sellAmount > 0

  const locked = status !== 'idle'

  const quote: SwapQuote = useMemo(
    () => ({
      sellToken,
      buyToken,
      midRate,
      priceImpact,
      networkFeeUsd,
      buyAmount,
      minReceived,
      slippage,
    }),
    [sellToken, buyToken, midRate, priceImpact, networkFeeUsd, buyAmount, minReceived, slippage],
  )

  useEffect(() => {
    if (reduced) return
    const id = window.setInterval(() => {
      setTokens((prev) =>
        prev.map((t) => {
          if (t.symbol === 'USDC' || t.symbol === 'USDT') return t
          const drift = 1 + (Math.random() - 0.5) * 0.006 // tune: raise the multiplier to increase price drift
          const next = t.usdPrice * drift
          return {
            ...t,
            usdPrice: next,
            change24h: ((next - t.basePrice) / t.basePrice) * 100,
          }
        }),
      )
      // tune: widen the jitter and bounds to increase fee variation
      setNetworkFeeUsd(
        clamp(NETWORK_FEE_BASE_USD + (Math.random() - 0.5) * 1.6, 1.6, 3.2),
      )
    }, PRICE_DRIFT_MS)
    return () => window.clearInterval(id)
  }, [reduced])

  useEffect(() => {
    if (!picker) return
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape') setPicker(null)
    }
    function onPointer(e: MouseEvent | TouchEvent) {
      const target = e.target as Node | null
      const inCard = cardRef.current?.contains(target ?? null) ?? false
      const inDropdown =
        target instanceof Element &&
        target.closest('[data-token-dropdown]') !== null
      if (!inCard && !inDropdown) {
        setPicker(null)
      }
    }
    document.addEventListener('keydown', onKey)
    document.addEventListener('mousedown', onPointer)
    document.addEventListener('touchstart', onPointer)
    return () => {
      document.removeEventListener('keydown', onKey)
      document.removeEventListener('mousedown', onPointer)
      document.removeEventListener('touchstart', onPointer)
    }
  }, [picker])

  const handleFlip = useCallback(() => {
    if (locked) return
    setSellSymbol(buySymbol)
    setBuySymbol(sellSymbol)
    setSellInput(buyAmount > 0 ? capForInput(buyAmount) : '')
    flipCount.current += 1
    const target = flipCount.current * 180
    flipControls.current?.stop()
    if (reduced) {
      flipAngle.set(target)
      flipControls.current = null
    } else {
      flipControls.current = animate(flipAngle, target, {
        type: 'spring',
        stiffness: 320,
        damping: 22,
      })
    }
  }, [locked, buySymbol, sellSymbol, buyAmount, flipAngle, reduced])

  const handleSelect = useCallback(
    (side: Side, symbol: string) => {
      if (locked) return
      setPicker(null)
      if (side === 'sell') {
        if (symbol === buySymbol) {
          handleFlip()
        } else if (symbol !== sellSymbol) {
          setSellSymbol(symbol)
          setSellInput(DEFAULT_SELL_INPUT)
        }
      } else {
        if (symbol === sellSymbol) {
          handleFlip()
        } else {
          setBuySymbol(symbol)
        }
      }
    },
    [locked, buySymbol, sellSymbol, handleFlip],
  )

  useEffect(() => {
    if (status === 'swapping') {
      const t = window.setTimeout(() => setStatus('success'), SWAP_SWAPPING_MS)
      return () => window.clearTimeout(t)
    }
    if (status === 'success') {
      const t = window.setTimeout(() => setStatus('idle'), SWAP_SUCCESS_MS)
      return () => window.clearTimeout(t)
    }
    return undefined
  }, [status])

  const handleSwap = useCallback(() => {
    if (!hasAmount || status !== 'idle') return
    setStatus('swapping')
  }, [hasAmount, status])

  const handleMax = useCallback(() => {
    if (locked) return
    setSellInput(capForInput(sellToken.balance))
  }, [locked, sellToken.balance])

  const pageBg = isDark ? '#0A0A0A' : '#E6E6E3'
  const trayBg = isDark ? '#141416' : '#FFFFFF'
  const trayShadow = isDark
    ? '0 24px 60px rgba(0,0,0,0.6)'
    : '0 20px 50px rgba(20,20,18,0.12)'
  const flipBtnBg = isDark ? '#2A2A2E' : '#0A0A0A'
  const flipBtnHoverBg = isDark ? '#34343A' : '#1F1F1F'
  const flipIconColor = isDark ? '#ECECEC' : '#FFFFFF'

  const swapBg = isDark ? '#AEB6EC' : '#9AA6EA'
  const swapHoverBg = isDark ? '#C2C8F2' : '#AEB8F0'
  const swapText = '#0A0A0A'
  const swapDisabledBg = isDark ? '#26262A' : '#DCDCD8'
  const swapDisabledText = isDark ? '#9A9A95' : '#5F5F58'

  const swapSuccessBg = isDark ? '#22C55E' : '#0FA968'
  const swapSuccessText = '#0A0A0A'
  const swapSuccessGlow = isDark
    ? 'rgba(34,197,94,0.55)'
    : 'rgba(15,169,104,0.45)'

  const buttonEnabled = hasAmount && status === 'idle'

  let buttonBg = swapBg
  let buttonText = swapText
  let buttonCursor: React.CSSProperties['cursor'] = 'pointer'
  if (status === 'success') {
    buttonBg = swapSuccessBg
    buttonText = swapSuccessText
    buttonCursor = 'default'
  } else if (status === 'swapping') {
    buttonBg = swapBg
    buttonText = swapText
    buttonCursor = 'progress'
  } else if (!hasAmount) {
    buttonBg = swapDisabledBg
    buttonText = swapDisabledText
    buttonCursor = 'not-allowed'
  }

  return (
    <div
      ref={rootRef}
      className="flex min-h-screen w-full items-center justify-center px-4 py-10"
      style={{ background: pageBg }}
    >
      <motion.div
        initial={reduced ? { opacity: 0 } : { opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
        className="w-full max-w-[360px]"
      >
        {}
        <div
          ref={cardRef}
          className="flex flex-col gap-2 rounded-[28px] p-2"
          style={{ background: trayBg, boxShadow: trayShadow }}
        >
          {}
          <div className="flex flex-col gap-2">
            {}
            <div className="relative">
              <SwapCard
                side="sell"
                token={sellToken}
                sellInput={sellInput}
                buyAmount={buyAmount}
                hasAmount={hasAmount}
                isDark={isDark}
                reduced={reduced}
                locked={locked}
                pickerOpen={picker === 'sell'}
                tokens={tokens}
                cardRef={cardRef}
                onInputChange={(v) => setSellInput(sanitizeDecimal(v))}
                onMax={handleMax}
                onTogglePicker={() => {
                  if (locked) return
                  setPicker((prev) => (prev === 'sell' ? null : 'sell'))
                }}
                onSelect={(symbol) => handleSelect('sell', symbol)}
              />

              {}
              <div className="pointer-events-none absolute bottom-0 left-1/2 z-10 translate-x-[-50%] translate-y-[calc(50%+4px)]">
                <motion.button
                  type="button"
                  onClick={handleFlip}
                  disabled={locked}
                  whileHover={
                    locked
                      ? undefined
                      : reduced
                        ? { background: flipBtnHoverBg }
                        : { scale: 1.08, background: flipBtnHoverBg }
                  }
                  whileTap={locked || reduced ? undefined : { scale: 0.9 }}
                  transition={{ type: 'spring', stiffness: 400, damping: 24 }}
                  className="pointer-events-auto flex items-center justify-center rounded-full disabled:cursor-not-allowed"
                  style={{
                    width: 44,
                    height: 44,
                    background: flipBtnBg,
                    opacity: locked ? 0.6 : 1,
                    boxShadow: isDark
                      ? `0 0 0 4px ${trayBg}, 0 4px 14px rgba(0,0,0,0.5)`
                      : `0 0 0 4px ${trayBg}, 0 4px 14px rgba(20,20,18,0.18)`,
                  }}
                  aria-label="Flip swap direction"
                >
                  <motion.span
                    style={{
                      rotate: flipAngle,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      lineHeight: 0,
                      transformOrigin: 'center',
                    }}
                  >
                    <ArrowsDownUp size={18} weight="regular" style={{ color: flipIconColor }} />
                  </motion.span>
                </motion.button>
              </div>
            </div>

            <SwapCard
              side="buy"
              token={buyToken}
              sellInput={sellInput}
              buyAmount={buyAmount}
              hasAmount={hasAmount}
              isDark={isDark}
              reduced={reduced}
              locked={locked}
              pickerOpen={picker === 'buy'}
              tokens={tokens}
              cardRef={cardRef}
              onTogglePicker={() => {
                if (locked) return
                setPicker((prev) => (prev === 'buy' ? null : 'buy'))
              }}
              onSelect={(symbol) => handleSelect('buy', symbol)}
            />
          </div>

          {}
          <DetailsPanel
            quote={quote}
            hasAmount={hasAmount}
            isDark={isDark}
            reduced={reduced}
            slippageOptions={SLIPPAGE_OPTIONS}
            slippage={slippage}
            onSlippageChange={setSlippage}
          />

          {}
          <motion.button
            type="button"
            onClick={handleSwap}
            disabled={!buttonEnabled}
            whileHover={buttonEnabled ? { background: swapHoverBg } : undefined}
            whileTap={buttonEnabled && !reduced ? { scale: 0.98 } : undefined}
            animate={{
              background: buttonBg,
              scale: status === 'success' && !reduced ? [1, 1.04, 1] : 1,
          }}
          transition={{
            background: { duration: reduced ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] },
            scale: reduced
              ? { duration: 0 }
              : { duration: 0.42, times: [0, 0.45, 1], ease: [0.22, 1, 0.36, 1] },
          }}
          className="relative flex w-full items-center justify-center gap-2 rounded-3xl text-[16px] font-bold"
          style={{
            height: 48,
            background: buttonBg,
            color: buttonText,
            cursor: buttonCursor,
            overflow: 'visible',
          }}
        >
          {}
          <AnimatePresence>
            {status === 'success' && !reduced && (
              <motion.span
                key="bloom"
                aria-hidden
                className="pointer-events-none absolute inset-0 rounded-3xl"
                initial={{ opacity: 0.85, boxShadow: `0 0 0 0px ${swapSuccessGlow}` }}
                animate={{ opacity: 0, boxShadow: `0 0 0 14px ${swapSuccessGlow}` }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.7, ease: 'easeOut' }}
              />
            )}
          </AnimatePresence>

          <AnimatePresence mode="wait" initial={false}>
            {status === 'idle' && (
              <motion.span
                key="idle"
                initial={reduced ? { opacity: 0 } : { opacity: 0, y: 6 }}
                animate={reduced ? { opacity: 1 } : { opacity: 1, y: 0 }}
                exit={reduced ? { opacity: 0 } : { opacity: 0, y: -6 }}
                transition={{ duration: 0.18 }}
              >
                {hasAmount ? 'Swap' : 'Enter an amount'}
              </motion.span>
            )}

            {status === 'swapping' && (
              <motion.span
                key="swapping"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.18 }}
                className="flex items-center gap-2"
              >
                <motion.span
                  className="inline-block rounded-full"
                  style={{
                    width: 18,
                    height: 18,
                    border: `2px solid ${swapText}`,
                    borderTopColor: 'transparent',
                  }}
                  animate={reduced ? {} : { rotate: 360 }}
                  transition={
                    reduced
                      ? undefined
                      : { repeat: Infinity, ease: 'linear', duration: 0.8 }
                  }
                />
                Swapping…
              </motion.span>
            )}

            {status === 'success' && (
              <motion.span
                key="success"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.18 }}
                className="relative flex items-center gap-2"
              >
                {}
                <span className="relative inline-flex items-center justify-center">
                  <motion.span
                    className="inline-flex"
                    initial={reduced ? { scale: 1 } : { scale: 0, rotate: -18 }}
                    animate={reduced ? { scale: 1 } : { scale: 1, rotate: 0 }}
                    transition={
                      reduced
                        ? { duration: 0 }
                        : { type: 'spring', stiffness: 520, damping: 16, delay: 0.04 }
                    }
                  >
                    <CheckCircle size={22} weight="fill" style={{ color: swapSuccessText }} />
                  </motion.span>

                  {!reduced &&
                    SUCCESS_SPARKS.map((s, i) => (
                      <motion.span
                        key={i}
                        aria-hidden
                        className="pointer-events-none absolute left-1/2 top-1/2 rounded-full"
                        style={{ width: 4, height: 4, background: swapSuccessText }}
                        initial={{ opacity: 0, x: 0, y: 0, scale: 0.4 }}
                        animate={{
                          opacity: [0, 1, 0],
                          x: Math.cos(s) * 22,
                          y: Math.sin(s) * 22,
                          scale: [0.4, 1, 0.2],
                        }}
                        transition={{ duration: 0.55, ease: 'easeOut', delay: 0.06 }}
                      />
                    ))}
                </span>
                Swapped!
              </motion.span>
            )}
          </AnimatePresence>
          </motion.button>
        </div>
      </motion.div>
    </div>
  )
}

```

---

## Product Card Deck

Category: Cards & Modals
Slug: `product-card-deck`
URL: https://aicanvas.me/components/product-card-deck

A draggable card deck you flick through one card at a time. The top card leans toward your drag, then spins away with momentum to reveal the next, and the deck loops endlessly. Every card pairs a picture with a title and a pill action button with hover and press states.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/product-card-deck
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a looping deck of product cards with a focused front item.
 * Dragging or using the controls cycles cards through the animated stack.
 */

import { useEffect, useRef, useState } from 'react'
import {
  AnimatePresence,
  animate,
  motion,
  usePresence,
  useMotionValue,
  useTransform,
  type PanInfo,
} from 'framer-motion'




interface CardData {
  title: string
  image: string
  label?: string
}

// customize: replace the deck images and labels below
const CARDS: CardData[] = [
  {
    
    title: '',
    image: 'https://ik.imagekit.io/aitoolkit/product-card-deck/mural.jpg?tr=w-600',
  },
  {
    title: 'Dreamer backpack',
    label: 'Shop',
    image: 'https://ik.imagekit.io/aitoolkit/product-card-deck/backpack.jpg?tr=w-600',
  },
  {
    title: 'Creator graffiti tee',
    label: 'Shop',
    image: 'https://ik.imagekit.io/aitoolkit/product-card-deck/tee.jpg?tr=w-600',
  },
  {
    title: 'Dreamer high-tops',
    label: 'Shop',
    image: 'https://ik.imagekit.io/aitoolkit/product-card-deck/sneaker.jpg?tr=w-600',
  },
  {
    title: 'Denim jacket',
    label: 'Shop',
    image: 'https://ik.imagekit.io/aitoolkit/product-card-deck/jacket.jpg?tr=w-600',
  },
]





// tune: change to control the number of rendered deck slots
const VISIBLE = 4
// tune: adjust these arrays to change the depth spacing
const SLOT_Y = [0, 12, 24, 36]
const SLOT_SCALE = [1, 0.95, 0.9, 0.86]
const SLOT_OPACITY = [1, 1, 0.92, 0.82]

const SPRING = { type: 'spring' as const, stiffness: 300, damping: 30 }



function CardFace({ card, isTop }: { card: CardData; isTop: boolean }) {
  return (
    <div
      className="relative flex h-full w-full flex-col overflow-hidden"
      style={{
        borderRadius: 22,
        backgroundColor: '#D3DDEE',
        boxShadow: isTop
          ? '0 30px 60px rgba(0,0,0,0.30), 0 10px 20px rgba(0,0,0,0.20)'
          : '0 14px 30px rgba(0,0,0,0.18)',
      }}
    >
      {}
      <div className="relative w-full" style={{ flex: 1, minHeight: 0 }}>
        <img
          src={card.image}
          alt={card.title || 'Urban Canvas'}
          draggable={false}
          loading="lazy"
          className="absolute inset-0 h-full w-full object-cover"
        />
      </div>

      {}
      {card.title && (
        <div
          className="flex items-center justify-between"
          style={{ flexShrink: 0, gap: 12, padding: '12px 12px 12px 16px' }}
        >
          <h3
            style={{
              flex: 1,
              minWidth: 0,
              fontFamily: 'var(--font-sans, sans-serif)',
              fontSize: 16,
              fontWeight: 700,
              lineHeight: 1.15,
              letterSpacing: '-0.01em',
              color: '#111111',
              margin: 0,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {card.title}
          </h3>
          {card.label && (
            <motion.button
              type="button"
              onPointerDown={(event) => event.stopPropagation()}
              onClick={(event) => event.stopPropagation()}
              whileHover={{ scale: 1.06, backgroundColor: '#2C2825' }}
              whileTap={{ scale: 0.93, backgroundColor: '#000000' }}
              transition={{ type: 'spring', stiffness: 500, damping: 30 }}
              style={{
                flexShrink: 0,
                border: 'none',
                cursor: 'pointer',
                backgroundColor: '#141312',
                color: '#F5F1E8',
                
                borderRadius: 9999,
                padding: '8px 16px',
                fontFamily: 'var(--font-sans, sans-serif)',
                fontSize: 12,
                fontWeight: 600,
                letterSpacing: '0.01em',
              }}
            >
              {card.label}
            </motion.button>
          )}
        </div>
      )}
    </div>
  )
}







function FlickCard({
  card,
  slot,
  isTop,
  onFlick,
}: {
  card: CardData
  slot: number
  isTop: boolean
  onFlick: () => void
}) {
  const [isPresent, safeToRemove] = usePresence()
  const x = useMotionValue(0)
  const y = useMotionValue(SLOT_Y[slot])
  const scale = useMotionValue(SLOT_SCALE[slot])
  const opacity = useMotionValue(0)
  
  const rotate = useTransform(x, [-200, 200], [-18, 18], { clamp: true })
  const flickVel = useRef({ x: 0, y: 0 })

  
  
  useEffect(() => {
    if (!isPresent) return
    const controls = [
      animate(y, SLOT_Y[slot], SPRING),
      animate(scale, SLOT_SCALE[slot], SPRING),
      animate(opacity, SLOT_OPACITY[slot], { duration: 0.3, ease: 'easeOut' }),
    ]
    if (!isTop) controls.push(animate(x, 0, SPRING))
    return () => controls.forEach((c) => c.stop())
  }, [slot, isTop, isPresent, x, y, scale, opacity])

  
  useEffect(() => {
    if (isPresent) return
    const v = flickVel.current
    const mag = Math.hypot(v.x, v.y) || 1
    animate(x, (v.x / mag) * 1500, { duration: 0.5, ease: 'easeOut' })
    animate(y, (v.y / mag) * 1500, { duration: 0.5, ease: 'easeOut' })
    animate(opacity, 0, { duration: 0.45, ease: 'easeOut' })
    const last = animate(scale, 0.85, {
      duration: 0.5,
      ease: 'easeOut',
      onComplete: () => safeToRemove?.(),
    })
    return () => last.stop()
  }, [isPresent, safeToRemove, x, y, scale, opacity])

  const handleDragEnd = (_: unknown, info: PanInfo) => {
    const speed = Math.hypot(info.velocity.x, info.velocity.y)
    const dist = Math.hypot(info.offset.x, info.offset.y)
    if (speed > 500 || dist > 130) {
      
      
      flickVel.current =
        speed > 220
          ? { x: info.velocity.x, y: info.velocity.y }
          : { x: info.offset.x * 9, y: info.offset.y * 9 }
      onFlick()
    } else {
      
      animate(x, 0, SPRING)
      animate(y, SLOT_Y[0], SPRING)
    }
  }

  return (
    <motion.div
      style={{
        x,
        y,
        scale,
        opacity,
        rotate,
        position: 'absolute',
        inset: 0,
        zIndex: 100 - slot,
        cursor: isTop ? 'grab' : 'auto',
        
        touchAction: isTop ? 'none' : 'auto',
      }}
      drag={isTop}
      onDragEnd={isTop ? handleDragEnd : undefined}
      whileTap={isTop ? { cursor: 'grabbing' } : undefined}
    >
      <CardFace card={card} isTop={isTop} />
    </motion.div>
  )
}



interface DeckCard {
  key: number
  content: number
}

export default function ProductCardDeck() {
  const [deck, setDeck] = useState<DeckCard[]>(() =>
    Array.from({ length: VISIBLE }, (_, i) => ({ key: i, content: i })),
  )
  const nextKey = useRef(VISIBLE)

  
  const handleFlick = () => {
    setDeck((prev) => {
      const rest = prev.slice(1)
      const lastContent = prev[prev.length - 1].content
      const newCard = {
        key: nextKey.current++,
        content: (lastContent + 1) % CARDS.length,
      }
      return [...rest, newCard]
    })
  }

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#E8E8DF] px-4 dark:bg-[#1A1A19]">
      <div className="flex flex-col items-center gap-10">
        <div
          className="relative"
          style={{
            
            
            width: 'clamp(220px, 72vw, 300px)',
            height: 'calc(clamp(220px, 72vw, 300px) + 56px)',
          }}
        >
          <AnimatePresence>
            {deck.map((item, i) => (
              <FlickCard
                key={item.key}
                card={CARDS[item.content % CARDS.length]}
                slot={i}
                isTop={i === 0}
                onFlick={handleFlick}
              />
            ))}
          </AnimatePresence>
        </div>

        <p className="text-xs tracking-wide text-[#666662] dark:text-[#9E9E98]">
          grab the top card and flick it away
        </p>
      </div>
    </div>
  )
}

```

---

## Interactive Card Stack

Category: Cards & Modals
Slug: `interactive-card-stack`
URL: https://aicanvas.me/components/interactive-card-stack

A scattered stack of photo cards. Drag, click, or arrow keys to focus any card.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/interactive-card-stack
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a responsive stack of bird cards with drag, tap, and keyboard cycling.
 * The focused card can expose an optional external link.
 */

import { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react'
import { motion, useReducedMotion, type PanInfo } from 'framer-motion'


interface Card {
  id: number
  orientation: 'portrait' | 'landscape'
  title?: string
  image: string
  /** Opens the focused card chip in a new tab when provided. */
  href?: string
}

interface Slot {
  x: number
  y: number
  rotate: number
  scale: number
  zIndex: number
}


const CARDS: Card[] = [
  {
    id: 0,
    orientation: 'portrait',
    title: 'Scarlet macaw',
    image: 'https://ik.imagekit.io/aitoolkit/interactive-card-stack/scarlet-macaw-rainforest-branch.jpg',
  },
  {
    id: 1,
    orientation: 'landscape',
    title: 'Toco toucan',
    image: 'https://ik.imagekit.io/aitoolkit/interactive-card-stack/toco-toucan-rainforest-canopy.jpg',
  },
  {
    id: 2,
    orientation: 'portrait',
    title: 'Blue and gold macaw',
    image: 'https://ik.imagekit.io/aitoolkit/interactive-card-stack/blue-and-gold-macaw-jungle-perch.jpg',
  },
  {
    id: 3,
    orientation: 'landscape',
    title: 'Green-headed tanager',
    image: 'https://ik.imagekit.io/aitoolkit/interactive-card-stack/green-headed-tanager-mossy-branch.jpg',
  },
  {
    id: 4,
    orientation: 'portrait',
    title: 'Northern mockingbird',
    image: 'https://ik.imagekit.io/aitoolkit/interactive-card-stack/northern-mockingbird-autumn-woodland.jpg',
  },
]

// tune: adjust the slot tables to change desktop and mobile spread

const SLOTS_DESKTOP: Slot[] = [
  { x:    0, y:   0, rotate:  1.5, scale: 1.00, zIndex: 50 },
  { x:  160, y: -30, rotate:  12,  scale: 0.90, zIndex: 40 },
  { x: -150, y: -10, rotate: -14,  scale: 0.89, zIndex: 30 },
  { x:   90, y:  70, rotate:  8,   scale: 0.86, zIndex: 20 },
  { x: -110, y:  60, rotate: -9,   scale: 0.84, zIndex: 10 },
]

const SLOTS_MOBILE: Slot[] = [
  { x:   0, y:   0, rotate:  1,   scale: 1.00, zIndex: 50 },
  { x:  90, y: -15, rotate:  6,   scale: 0.92, zIndex: 40 },
  { x: -85, y:  20, rotate: -7,   scale: 0.91, zIndex: 30 },
  { x:  55, y:  35, rotate:  4,   scale: 0.88, zIndex: 20 },
  { x: -55, y:  25, rotate: -4.5, scale: 0.87, zIndex: 10 },
]


const SPRING = { type: 'spring' as const, stiffness: 280, damping: 26 }
const MOUNT_SPRING = { type: 'spring' as const, stiffness: 200, damping: 22 }
const STAGGER_S = 0.08

const BREATH_Y_FOCUS = [0, -14, 0, 10, 0]
const BREATH_Y_REST = [0, -8, 0, 6, 0]
const BREATH_ROTATE_FOCUS = [0, 1.5, 0, -1.5, 0]
const BREATH_ROTATE_REST = [0, 1, 0, -1, 0]

const SHADOW_FOCUS = '0 24px 48px rgba(0,0,0,0.28), 0 6px 14px rgba(0,0,0,0.16)'
const SHADOW_REST = '0 12px 28px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.12)'

const RING = 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#A8B94D]'

const TITLE_STYLE: CSSProperties = {
  margin: 0,
  paddingRight: 34,
  fontFamily: 'var(--font-sans, sans-serif)',
  fontWeight: 600,
  fontSize: '15px',
  lineHeight: 1.3,
  letterSpacing: '-0.01em',
  color: '#1a1a19',
  textAlign: 'left',
  display: '-webkit-box',
  WebkitLineClamp: 2,
  WebkitBoxOrient: 'vertical',
  overflow: 'hidden',
  minHeight: '2.6em',
}

const CHIP_POSITION: CSSProperties = { position: 'absolute', top: 10, right: 10, lineHeight: 0 }

const CHIP_STYLE: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: 'clamp(28px, 7.5vw, 36px)',
  height: 'clamp(28px, 7.5vw, 36px)',
  backgroundColor: '#141312',
  borderRadius: 11,
  boxShadow: '0 8px 18px rgba(0,0,0,0.42), 0 3px 6px rgba(0,0,0,0.30)',
}

const OpenChip = (
  <span style={CHIP_STYLE}>
    <svg
      width="56%"
      height="56%"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#F5F1E8"
      strokeWidth={1}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <path d="M7 17 L17 7" />
      <path d="M9 7 H17 V15" />
    </svg>
  </span>
)


export default function InteractiveCardStack() {
  const [order, setOrder] = useState<number[]>([0, 1, 2, 3, 4])
  const [mounted, setMounted] = useState(false)
  const [isMobile, setIsMobile] = useState(false)

  const containerRef = useRef<HTMLDivElement | null>(null)
  const dragDelta = useRef(0)

  const reduceMotion = useReducedMotion()

  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(min-width: 640px)')
    const apply = () => setIsMobile(!mq.matches)
    apply()
    mq.addEventListener('change', apply)
    return () => mq.removeEventListener('change', apply)
  }, [])

  const focusCard = useCallback((cardId: number) => {
    setOrder((prev) => {
      const idx = prev.indexOf(cardId)
      if (idx <= 0) return prev
      return [cardId, ...prev.slice(0, idx), ...prev.slice(idx + 1)]
    })
  }, [])

  const step = useCallback((dir: 1 | -1) => {
    setOrder((prev) =>
      dir === 1
        ? [...prev.slice(1), prev[0]]
        : [prev[prev.length - 1], ...prev.slice(0, prev.length - 1)],
    )
  }, [])

  useEffect(() => {
    const handler = (event: KeyboardEvent) => {
      if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return
      const root = containerRef.current
      if (!root || !root.contains(document.activeElement)) return
      event.preventDefault()
      step(event.key === 'ArrowRight' ? 1 : -1)
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [step])

  const handleDragEnd = useCallback(
    (_: unknown, info: PanInfo) => {
      const distance = info.offset.x
      const velocity = info.velocity.x
      if (distance < -80 || velocity < -400) step(1)
      else if (distance > 80 || velocity > 400) step(-1)
    },
    [step],
  )

  const slots = isMobile ? SLOTS_MOBILE : SLOTS_DESKTOP
  const frontCardId = order[0]
  const frontTitle = CARDS.find((c) => c.id === frontCardId)?.title ?? ''

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] px-4 dark:bg-[#1A1A19]">
      <div ref={containerRef} className="relative flex w-full max-w-4xl flex-col items-center gap-10 py-12">
        {}
        <div
          role="group"
          aria-label="Interactive card stack"
          aria-describedby="ics-hint"
          className="relative flex w-full select-none items-center justify-center overflow-hidden"
          style={{ perspective: '1400px', height: 'clamp(320px, 44vw, 440px)' }}
        >
          {CARDS.map((card) => {
            const slotIndex = order.indexOf(card.id)
            const slot = slots[slotIndex]
            const isFocus = slotIndex === 0
            const isLandscape = card.orientation === 'landscape'

            const transition =
              !reduceMotion && !mounted
                ? { ...MOUNT_SPRING, delay: slotIndex * STAGGER_S }
                : SPRING

            const widthClass = isLandscape
              ? isMobile
                ? 'w-[clamp(200px,60vw,260px)]'
                : 'w-[clamp(220px,28vw,320px)]'
              : isMobile
                ? 'w-[clamp(130px,42vw,180px)]'
                : 'w-[clamp(160px,20vw,220px)]'

            const breathY = reduceMotion ? 0 : isFocus ? BREATH_Y_FOCUS : BREATH_Y_REST
            const breathRotate = reduceMotion
              ? 0
              : isFocus
                ? BREATH_ROTATE_FOCUS
                : BREATH_ROTATE_REST

            return (
              <motion.div
                key={card.id}
                tabIndex={0}
                role={isFocus ? undefined : 'button'}
                aria-label={
                  isFocus
                    ? `${card.title ?? 'Card'}, current. Drag or use the arrow keys to change cards.`
                    : `Show ${card.title ?? `card ${card.id + 1}`}`
                }
                onClick={
                  isFocus
                    ? undefined
                    : (event) => {
                        event.preventDefault()
                        if (Math.abs(dragDelta.current) >= 8) return
                        focusCard(card.id)
                      }
                }
                onKeyDown={
                  isFocus
                    ? undefined
                    : (event) => {
                        if (event.key === 'Enter' || event.key === ' ') {
                          event.preventDefault()
                          focusCard(card.id)
                        }
                      }
                }
                onPointerDown={() => {
                  dragDelta.current = 0
                }}
                drag={isFocus ? 'x' : false}
                dragConstraints={{ left: 0, right: 0 }}
                dragElastic={0.6}
                onDrag={(_, info) => {
                  dragDelta.current = info.offset.x
                }}
                onDragEnd={handleDragEnd}
                className={`absolute ${widthClass} rounded-[18px] outline-none ${isFocus ? '' : RING}`}
                style={{ cursor: isFocus ? 'grab' : 'pointer', zIndex: slot.zIndex }}
                initial={reduceMotion ? false : { opacity: 0, scale: 0.5, y: 60 }}
                animate={{ x: slot.x, y: slot.y, rotate: slot.rotate, scale: slot.scale, opacity: 1 }}
                transition={transition}
                whileTap={isFocus ? { cursor: 'grabbing' } : undefined}
              >
                {}
                <motion.div
                  className="relative flex w-full flex-col rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.12]"
                  style={{ backgroundColor: '#FFFFFF', padding: '10px', boxShadow: isFocus ? SHADOW_FOCUS : SHADOW_REST }}
                  animate={{ y: breathY, rotate: breathRotate }}
                  transition={
                    reduceMotion
                      ? { duration: 0 }
                      : { duration: 7 + card.id * 0.6, repeat: Infinity, ease: 'easeInOut' }
                  }
                >
                  {}
                  <span
                    aria-hidden
                    className="pointer-events-none absolute inset-0 rounded-[18px] dark:bg-[#F5F5F0]"
                  />

                  {card.title && (
                    <div style={{ position: 'relative', padding: '14px 12px 8px 12px' }}>
                      <p style={TITLE_STYLE}>{card.title}</p>

                      {/* customize: set href on a card to enable the open link */}
                      {isFocus &&
                        (card.href ? (
                          <motion.a
                            href={card.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label={`Open ${card.title ?? 'item'} in a new tab`}
                            onPointerDown={(event) => event.stopPropagation()}
                            onClick={(event) => event.stopPropagation()}
                            className={`rounded-[11px] outline-none ${RING}`}
                            style={CHIP_POSITION}
                            initial={{ opacity: 0, scale: 0.85 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={SPRING}
                            whileHover={{ scale: 1.1 }}
                            whileTap={{ scale: 0.9 }}
                          >
                            {OpenChip}
                          </motion.a>
                        ) : (
                          <motion.span
                            aria-hidden
                            onPointerDown={(event) => event.stopPropagation()}
                            style={CHIP_POSITION}
                            initial={{ opacity: 0, scale: 0.85 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={SPRING}
                            whileHover={{ scale: 1.1 }}
                            whileTap={{ scale: 0.9 }}
                          >
                            {OpenChip}
                          </motion.span>
                        ))}
                    </div>
                  )}

                  {}
                  <div
                    className={`relative w-full overflow-hidden ${isLandscape ? 'aspect-[16/10]' : 'aspect-[4/5]'}`}
                    style={{ borderRadius: 10 }}
                  >
                    <img
                      src={card.image}
                      alt=""
                      loading={isFocus ? 'eager' : 'lazy'}
                      fetchPriority={isFocus ? 'high' : 'low'}
                      draggable={false}
                      className="absolute inset-0 h-full w-full object-cover"
                    />
                  </div>
                </motion.div>
              </motion.div>
            )
          })}
        </div>

        {}
        <p className="sr-only" aria-live="polite">
          {frontTitle ? `${frontTitle} in focus` : ''}
        </p>

        {}
        <div className="flex flex-col items-center gap-3">
          <div className="flex items-center gap-1.5">
            {CARDS.map((card) => {
              const isCurrent = frontCardId === card.id
              return (
                <button
                  key={card.id}
                  type="button"
                  aria-label={`Show ${card.title ?? `card ${card.id + 1}`}`}
                  aria-current={isCurrent ? true : undefined}
                  onClick={() => focusCard(card.id)}
                  className={`flex items-center justify-center rounded-full outline-none ${RING}`}
                  style={{ width: 24, height: 24 }}
                >
                  <motion.span
                    className="block rounded-full bg-[#21211F] dark:bg-[#FAFAF0]"
                    animate={{ width: isCurrent ? 20 : 5, opacity: isCurrent ? 1 : 0.3 }}
                    transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                    style={{ height: 5 }}
                  />
                </button>
              )
            })}
          </div>
          <p id="ics-hint" className="text-sm tracking-wide text-[#666662] dark:text-[#9E9E98]">
            drag, click, or use the arrow keys
          </p>
        </div>
      </div>
    </div>
  )
}

```

---

## Tilted Coverflow

Category: Cards & Modals
Slug: `tilted-coverflow`
URL: https://aicanvas.me/components/tilted-coverflow

3D coverflow card carousel of seven tilted photos. Drag or arrows to focus any card.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/tilted-coverflow
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a tilted coverflow of captioned image cards.
 * Dragging, tapping, or using the keyboard changes the centered slide.
 */

import { useCallback, useEffect, useRef, useState } from 'react'
import { motion, type PanInfo } from 'framer-motion'



interface Slide {
  id: number
  caption: string
  image: string
}






// customize: replace the coverflow images and captions below
const SLIDES: Slide[] = [
  {
    id: 0,
    caption: 'Alley Sentinel',
    image:
      'https://images.unsplash.com/photo-1550532422-378e93ec379c?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 1,
    caption: 'Sticker Riot',
    image:
      'https://images.unsplash.com/photo-1700222720939-60f0e91d691d?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 2,
    caption: 'Quiet Vandals',
    image:
      'https://images.unsplash.com/photo-1597355797858-35ffba85673c?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 3,
    caption: 'Soft Beast',
    image:
      'https://images.unsplash.com/photo-1612486524816-d7aaa8ac7bd6?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 4,
    caption: 'City Gaze',
    image:
      'https://images.unsplash.com/photo-1644424428722-b6f950e4b22d?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 5,
    caption: 'Loud Letters',
    image:
      'https://images.unsplash.com/photo-1581010105372-caf9ed5ab50f?w=600&h=750&fit=crop&auto=format',
  },
  {
    id: 6,
    caption: 'Color Crash',
    image:
      'https://images.unsplash.com/photo-1589236095092-1f7ea6f09cdd?w=600&h=750&fit=crop&auto=format',
  },
]










const TOTAL = 7
const HALF = 3                                   
// tune: raise to increase card tilt between slots
const ROTATION_PER_STEP = 14 
// tune: raise to deepen the vertical arc
const ARC_Y = 8              
// tune: raise to spread cards farther apart
const GAP_PX = 30            
const SCALE_BY_OFFSET = [1.0, 0.88, 0.76, 0.64] 


const SPRING = { type: 'spring' as const, stiffness: 240, damping: 30 }

const MOUNT_SPRING = { type: 'spring' as const, stiffness: 180, damping: 18 }
const STAGGER_MS = 0.09






function visibleOffset(cardIndex: number, focus: number, total: number) {
  const half = Math.floor(total / 2)
  let off = cardIndex - focus
  if (off > half) off -= total
  if (off < -half) off += total
  return off
}

function buildXPositions(scales: number[], baseWidth: number, gap: number) {
  
  
  const positions = new Map<number, number>()
  positions.set(0, 0)
  let cursor = 0
  for (let i = 1; i <= 3; i++) {
    
    const step = (scales[i - 1] / 2 + scales[i] / 2) * baseWidth + gap
    cursor += step
    positions.set(i, cursor)
    positions.set(-i, -cursor)
  }
  return positions
}



export default function TiltedCoverflow() {
  const [focus, setFocus] = useState(3) 
  const [maxSide, setMaxSide] = useState(3)
  const [cardWidth, setCardWidth] = useState(180)
  const [mounted, setMounted] = useState(false)

  const cardRef = useRef<HTMLButtonElement | null>(null)

  
  
  useEffect(() => {
    setMounted(true)
  }, [])

  
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(min-width: 640px)')
    const apply = () => setMaxSide(mq.matches ? 3 : 1)
    apply()
    mq.addEventListener('change', apply)
    return () => mq.removeEventListener('change', apply)
  }, [])

  
  useEffect(() => {
    if (typeof window === 'undefined') return
    const measure = () => {
      if (cardRef.current) {
        const w = cardRef.current.getBoundingClientRect().width
        if (w > 0) setCardWidth(w)
      }
    }
    measure()
    const ro = new ResizeObserver(measure)
    if (cardRef.current) ro.observe(cardRef.current)
    window.addEventListener('resize', measure)
    return () => {
      ro.disconnect()
      window.removeEventListener('resize', measure)
    }
  }, [])

  const step = useCallback((dir: 1 | -1) => {
    setFocus((current) => {
      const len = SLIDES.length
      return (current + dir + len) % len
    })
  }, [])

  
  useEffect(() => {
    const handler = (event: KeyboardEvent) => {
      if (event.key === 'ArrowRight') {
        event.preventDefault()
        step(1)
      } else if (event.key === 'ArrowLeft') {
        event.preventDefault()
        step(-1)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [step])

  const handleDragEnd = useCallback(
    (_: unknown, info: PanInfo) => {
      const distance = info.offset.x
      const velocity = info.velocity.x
      if (distance < -80 || velocity < -500) {
        step(1)
      } else if (distance > 80 || velocity > 500) {
        step(-1)
      }
    },
    [step],
  )

  return (
    <div className="flex min-h-screen w-full select-none items-center justify-center overflow-hidden bg-[#E8E8DF] px-4 py-12 dark:bg-[#1A1A19]">
      <div className="relative flex w-full max-w-5xl flex-col items-center gap-8">
        <motion.div
          className="relative flex w-full items-center justify-center"
          style={{ perspective: '1400px', height: 'clamp(280px, 36vw, 380px)' }}
          drag="x"
          dragConstraints={{ left: 0, right: 0 }}
          dragElastic={0.15}
          onDragEnd={handleDragEnd}
        >
          {(() => {
            const positions = buildXPositions(SCALE_BY_OFFSET, cardWidth, GAP_PX)
            return SLIDES.map((slide) => {
            const offset = visibleOffset(slide.id, focus, TOTAL)
            const absOffset = Math.abs(offset)
            const hidden = absOffset > maxSide
            const isFocus = offset === 0

            
            
            
            const scale = SCALE_BY_OFFSET[absOffset] ?? 0.6
            const rotateY = -offset * ROTATION_PER_STEP
            const translateX = positions.get(offset) ?? 0
            const translateY = absOffset * ARC_Y

            
            
            
            const mountDelay = (HALF - absOffset) * STAGGER_MS
            const transition = mounted
              ? SPRING
              : { ...MOUNT_SPRING, delay: mountDelay }

            
            
            const breathDuration = 7 + slide.id * 0.6

            
            
            const words = slide.caption.split(' ')

            return (
              <motion.button
                key={slide.id}
                ref={slide.id === 0 ? cardRef : undefined}
                type="button"
                aria-label={slide.caption}
                onClick={(event) => {
                  event.preventDefault()
                  if (!hidden && !isFocus) setFocus(slide.id)
                }}
                className="absolute aspect-[4/5] w-[clamp(160px,17vw,220px)]"
                style={{
                  transformStyle: 'preserve-3d',
                  transformOrigin: 'center center',
                  pointerEvents: hidden ? 'none' : 'auto',
                  cursor: isFocus ? 'grab' : 'pointer',
                  zIndex: TOTAL - absOffset,
                }}
                initial={{ opacity: 0, scale: 0.45, y: 70, x: 0, rotateY: 0 }}
                animate={{
                  x: translateX,
                  y: translateY,
                  rotateY,
                  scale,
                  opacity: hidden ? 0 : 1,
                }}
                transition={transition}
                whileTap={isFocus ? { cursor: 'grabbing' } : undefined}
              >
                {}
                <motion.div
                  className="relative h-full w-full overflow-hidden rounded-[20px] ring-1 ring-black/10 dark:ring-white/10"
                  style={{
                    boxShadow: isFocus
                      ? '0 30px 60px rgba(0,0,0,0.35), 0 12px 24px rgba(0,0,0,0.18)'
                      : '0 14px 30px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12)',
                  }}
                  animate={{
                    y: [0, -12, 0, 10, 0],
                    rotate: [0, 1.5, 0, -1.5, 0],
                  }}
                  transition={{
                    duration: breathDuration,
                    repeat: Infinity,
                    ease: 'easeInOut',
                  }}
                >
                  <img
                    src={slide.image}
                    alt={slide.caption}
                    loading="lazy"
                    draggable={false}
                    className="absolute inset-0 h-full w-full object-cover"
                  />

                  {}
                  <div className="pointer-events-none absolute inset-x-0 bottom-0 flex flex-col justify-end px-4 pb-3 pt-12">
                    <div
                      aria-hidden
                      className="absolute inset-x-0 bottom-0 h-2/3"
                      style={{
                        background:
                          'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0) 100%)',
                      }}
                    />
                    <span
                      className="relative text-center leading-tight text-white font-medium"
                      style={{
                        fontSize: 'clamp(0.95rem, 1.1vw, 1.25rem)',
                        textShadow: '0 1px 8px rgba(0,0,0,0.45)',
                      }}
                    >
                      {isFocus
                        ? words.map((word, i) => (
                            <motion.span
                              key={`${focus}-${i}`}
                              className="inline-block"
                              initial={{ opacity: 0, y: 8 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{
                                delay: i * 0.06,
                                duration: 0.42,
                                ease: [0.2, 0.65, 0.3, 1],
                              }}
                            >
                              {word}
                              {i < words.length - 1 ? ' ' : ''}
                            </motion.span>
                          ))
                        : words.map((word, i) => (
                            <span key={i} className="inline-block">
                              {word}
                              {i < words.length - 1 ? ' ' : ''}
                            </span>
                          ))}
                    </span>
                  </div>
                </motion.div>
              </motion.button>
            )
          })
          })()}
        </motion.div>

        {}
        <div className="flex flex-col items-center gap-3">
          <div className="flex items-center gap-1.5">
            {SLIDES.map((slide) => {
              const isCurrent = focus === slide.id
              return (
                <motion.button
                  key={slide.id}
                  type="button"
                  aria-label={`Focus ${slide.caption}`}
                  onClick={() => setFocus(slide.id)}
                  animate={{
                    width: isCurrent ? 22 : 6,
                    opacity: isCurrent ? 1 : 0.35,
                  }}
                  transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                  className="h-1.5 rounded-full bg-[#21211F] dark:bg-[#FAFAF0]"
                />
              )
            })}
          </div>
          <p className="text-xs tracking-wide text-[#666662] dark:text-[#9E9E98]">
            drag, click, or use the arrow keys
          </p>
        </div>
      </div>
    </div>
  )
}

```

---

## Cube Carousel

Category: 3D & Shaders
Slug: `cube-carousel`
URL: https://aicanvas.me/components/cube-carousel

An interactive 3D photo cube with six placeholder images on its faces. Drag with your cursor to spin it freely on both axes; release and it coasts naturally to a stop. No buttons, no snap, no controls, just the cube and your hand.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/cube-carousel
```

```tsx
'use client'
// npm install framer-motion

/**
 * Rotatable photo cube controlled by dragging or the arrow keys.
 * Momentum carries the cube after a pointer gesture ends.
 */

import { useRef } from 'react'
import { motion, useMotionValue, animate, type AnimationPlaybackControls, type MotionValue, type PanInfo } from 'framer-motion'

type FaceShape = 'wide' | 'side'

// Photos by Jeremy Bishop, giacomo ambrosini, Luke Paris, Jonny Gios, and Cloris Chou via Unsplash.
const wide = (id: string) => `https://images.unsplash.com/photo-${id}?w=960&h=540&fit=crop&auto=format&q=80`
const square = (id: string) => `https://images.unsplash.com/photo-${id}?w=720&h=720&fit=crop&auto=format&q=80`

const P00 = '1602303832953-05d841ee21f7'
const P01 = '1560841650-fa45ffd48b77'
const P02 = '1568464992136-fae8c7322eee'
const P03 = '1565105337533-d23f47c0fd58'
const P04 = '1661632359984-0954ccc8a149'
const P05 = '1637909837540-80e1b9198ea9'

const FACES: { src: string; shape: FaceShape; transform: string }[] = [
  { src: wide(P00), shape: 'wide', transform: 'translateZ(var(--half-d))' },
  { src: wide(P01), shape: 'wide', transform: 'rotateY(180deg) translateZ(var(--half-d))' },
  { src: wide(P04), shape: 'wide', transform: 'rotateX(90deg) translateZ(var(--half-h))' },
  { src: wide(P05), shape: 'wide', transform: 'rotateX(-90deg) translateZ(var(--half-h))' },
  { src: square(P02), shape: 'side', transform: 'rotateY(90deg) translateZ(var(--half-w))' },
  { src: square(P03), shape: 'side', transform: 'rotateY(-90deg) translateZ(var(--half-w))' },
]

const DRAG_SENSITIVITY = 0.5
const KEY_STEP = 30 // tune: raise to increase each keyboard rotation
const COAST = { type: 'spring' as const, stiffness: 40, damping: 22 }

export default function CubeCarousel() {
  const rotateX = useMotionValue(-14)
  const rotateY = useMotionValue(-22)

  const start = useRef({ rotX: 0, rotY: 0 })
  const xAnim = useRef<AnimationPlaybackControls | null>(null)
  const yAnim = useRef<AnimationPlaybackControls | null>(null)

  const stopAnims = () => {
    xAnim.current?.stop()
    yAnim.current?.stop()
    xAnim.current = null
    yAnim.current = null
  }

  const onPanStart = () => {
    stopAnims()
    start.current = { rotX: rotateX.get(), rotY: rotateY.get() }
  }

  const onPan = (_: PointerEvent, info: PanInfo) => {
    rotateY.set(start.current.rotY + info.offset.x * DRAG_SENSITIVITY)
    rotateX.set(start.current.rotX - info.offset.y * DRAG_SENSITIVITY)
  }

  const onPanEnd = (_: PointerEvent, info: PanInfo) => {
    const vy = info.velocity.x * DRAG_SENSITIVITY
    const vx = -info.velocity.y * DRAG_SENSITIVITY
    const projectY = rotateY.get() + vy * 0.18
    const projectX = rotateX.get() + vx * 0.18
    yAnim.current = animate(rotateY, projectY, { ...COAST, velocity: vy })
    xAnim.current = animate(rotateX, projectX, { ...COAST, velocity: vx })
  }

  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    let target: MotionValue<number> | null = null
    let delta = 0
    switch (e.key) {
      case 'ArrowLeft':
        target = rotateY
        delta = -KEY_STEP
        break
      case 'ArrowRight':
        target = rotateY
        delta = KEY_STEP
        break
      case 'ArrowUp':
        target = rotateX
        delta = KEY_STEP
        break
      case 'ArrowDown':
        target = rotateX
        delta = -KEY_STEP
        break
      default:
        return
    }
    e.preventDefault()
    stopAnims()
    const anim = animate(target, target.get() + delta, COAST)
    if (target === rotateY) yAnim.current = anim
    else xAnim.current = anim
  }

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]">
      <div
        className="relative flex items-center justify-center"
        style={{
          width: 'clamp(280px, 74vw, 560px)',
          height: 'clamp(220px, 52vw, 400px)',
        }}
      >
        <div
          aria-hidden
          className="pointer-events-none absolute inset-[12%] -z-10 rounded-full opacity-70 blur-3xl"
          style={{
            background:
              'radial-gradient(closest-side, rgba(0,0,0,0.18), transparent 75%)',
          }}
        />

        <motion.div
          onPanStart={onPanStart}
          onPan={onPan}
          onPanEnd={onPanEnd}
          onKeyDown={onKeyDown}
          aria-label="Drag or use the arrow keys to rotate the cube"
          role="button"
          tabIndex={0}
          className="absolute inset-0 z-10 cursor-grab select-none active:cursor-grabbing"
          style={{ touchAction: 'none' }}
        />

        <div
          style={{ perspective: '1400px' }}
          className="flex h-full w-full items-center justify-center"
        >
          <div
            style={{ transformStyle: 'preserve-3d' }}
            className="relative"
          >
            <motion.div
              style={
                {
                  width: 'var(--w)',
                  height: 'var(--h)',
                  rotateX,
                  rotateY,
                  transformStyle: 'preserve-3d',
                  '--w': 'clamp(210px, 56vw, 420px)',
                  '--h': 'calc(var(--w) * 9 / 16)',
                  '--d': 'var(--h)',
                  '--half-w': 'calc(var(--w) / 2)',
                  '--half-h': 'calc(var(--h) / 2)',
                  '--half-d': 'calc(var(--d) / 2)',
                  pointerEvents: 'none',
                } as React.CSSProperties
              }
              className="relative select-none"
            >
              {FACES.map((face, i) => {
                const isSide = face.shape === 'side'
                return (
                  <div
                    key={i}
                    className="absolute overflow-hidden ring-1 ring-black/10 dark:ring-white/15"
                    style={{
                      width: isSide ? 'var(--d)' : 'var(--w)',
                      height: isSide ? 'var(--h)' : 'var(--h)',
                      top: 0,
                      left: isSide ? 'calc((var(--w) - var(--d)) / 2)' : 0,
                      transform: face.transform,
                      backfaceVisibility: 'hidden',
                    }}
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={face.src}
                      alt={`Cube face ${i + 1}`}
                      className="h-full w-full select-none object-cover"
                      draggable={false}
                    />
                    <div
                      aria-hidden
                      className="pointer-events-none absolute inset-0"
                      style={{ boxShadow: 'inset 0 0 36px 0 rgba(0,0,0,0.32)' }}
                    />
                  </div>
                )
              })}
            </motion.div>

            <div
              aria-hidden
              className="absolute left-1/2 top-full -translate-x-1/2 rounded-full bg-black"
              style={{
                width: '72%',
                height: 28,
                marginTop: 28,
                filter: 'blur(22px)',
                opacity: 0.32,
              }}
            />
          </div>
        </div>

      </div>
    </div>
  )
}

```

---

## Curious AI

Category: 3D & Shaders
Slug: `curious-ai`
URL: https://aicanvas.me/components/curious-ai

A morphing 3D AI orb in Three.js with cyan and magenta rim lights, iridescent pink speckles on a wrinkled surface, and glowing pink robot-eye pills that follow your cursor and blink between idle looks.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/curious-ai
```

```tsx
'use client'

// npm install framer-motion three

/**
 * Renders a shader-driven orb that tracks pointer movement with animated eyes.
 * Idle gaze and blink cycles continue when the pointer leaves the component.
 */

import { useEffect, useRef, useState } from 'react'
import { motion, useMotionValue, useSpring } from 'framer-motion'
import * as THREE from 'three'

function useScopedTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    const element = ref.current
    if (!element) return
    const readTheme = () => {
      const scope = element.closest('[data-card-theme]') as HTMLElement | null
      if (scope) {
        setTheme(scope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    readTheme()
    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const obs = new MutationObserver(readTheme)
      obs.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(obs)
      current = current.parentElement
    }
    const htmlObs = new MutationObserver(readTheme)
    htmlObs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    observers.push(htmlObs)
    return () => observers.forEach((o) => o.disconnect())
  }, [ref])
  return theme
}

const VERT = /* glsl */ `
  uniform float uTime;
  uniform float uActive;        // 0..1 lerp toward "alert"
  uniform vec2  uLook;          // -1..1, current look direction (cursor or idle script)
  uniform float uReduce;        // 1 = motion allowed, 0 = motion frozen

  varying vec3 vNormal;
  varying vec3 vViewDir;
  varying vec3 vLocalPos;       // original mesh position — for stable surface speckles
  varying vec3 vViewPos;        // view-space position — fragment derives the displaced normal from this

  // Classic 3D simplex noise — Ashima Arts / Stefan Gustavson, MIT.
  vec3 mod289(vec3 x){return x-floor(x*(1./289.))*289.;}
  vec4 mod289(vec4 x){return x-floor(x*(1./289.))*289.;}
  vec4 permute(vec4 x){return mod289(((x*34.)+1.)*x);}
  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}
  float snoise(vec3 v){
    const vec2 C=vec2(1./6.,1./3.);
    const vec4 D=vec4(0.,.5,1.,2.);
    vec3 i=floor(v+dot(v,C.yyy));
    vec3 x0=v-i+dot(i,C.xxx);
    vec3 g=step(x0.yzx,x0.xyz);
    vec3 l=1.-g;
    vec3 i1=min(g.xyz,l.zxy);
    vec3 i2=max(g.xyz,l.zxy);
    vec3 x1=x0-i1+C.xxx;
    vec3 x2=x0-i2+C.yyy;
    vec3 x3=x0-D.yyy;
    i=mod289(i);
    vec4 p=permute(permute(permute(
              i.z+vec4(0.,i1.z,i2.z,1.))
            + i.y+vec4(0.,i1.y,i2.y,1.))
            + i.x+vec4(0.,i1.x,i2.x,1.));
    float n_=1./7.;
    vec3 ns=n_*D.wyz-D.xzx;
    vec4 j=p-49.*floor(p*ns.z*ns.z);
    vec4 x_=floor(j*ns.z);
    vec4 y_=floor(j-7.*x_);
    vec4 x=x_*ns.x+ns.yyyy;
    vec4 y=y_*ns.x+ns.yyyy;
    vec4 h=1.-abs(x)-abs(y);
    vec4 b0=vec4(x.xy,y.xy);
    vec4 b1=vec4(x.zw,y.zw);
    vec4 s0=floor(b0)*2.+1.;
    vec4 s1=floor(b1)*2.+1.;
    vec4 sh=-step(h,vec4(0.));
    vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
    vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
    vec3 p0=vec3(a0.xy,h.x);
    vec3 p1=vec3(a0.zw,h.y);
    vec3 p2=vec3(a1.xy,h.z);
    vec3 p3=vec3(a1.zw,h.w);
    vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
    p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;
    vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
    m=m*m;
    return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
  }

  void main(){
    vLocalPos = position;            // stable surface coord — speckles stick here
    vec3 pos  = position;
    float t   = uTime * uReduce;

    // Slow anisotropic stretch — orb morphs through ovoid orientations over time.
    float ax = sin(t * 0.27 + 0.0) * 0.16;
    float ay = sin(t * 0.19 + 1.7) * 0.20;
    float az = sin(t * 0.23 + 3.1) * 0.12;
    pos *= vec3(1.0 + ax, 1.0 + ay, 1.0 + az);

    // Two octaves — keep the surface glossier/smoother for the new aesthetic.
    float nLow = snoise(pos * 0.55 + vec3( t * 0.18,  t * 0.13, -t * 0.15));
    float nMid = snoise(pos * 1.45 + vec3(-t * 0.22,  t * 0.20,  t * 0.18));

    // Look direction biases the noise sample — the "face" bulges where it looks.
    vec3 lookDir = vec3(uLook, 0.55);
    float facing = clamp(dot(normalize(pos), normalize(lookDir)), 0.0, 1.0);
    float bulge  = pow(facing, 2.5) * (0.08 + uActive * 0.10);

    // Gentle breath — overall radial pulse, very slow.
    float breath = sin(t * 0.55) * 0.022;

    float amp = mix(0.20, 0.34, uActive);
    float displacement = (nLow * 0.66 + nMid * 0.34) * amp + bulge + breath;

    pos += normal * displacement;

    vec4 mv  = modelViewMatrix * vec4(pos, 1.0);
    vNormal  = normalize(normalMatrix * normal);
    vViewDir = normalize(-mv.xyz);
    vViewPos = mv.xyz;
    gl_Position = projectionMatrix * mv;
  }
`

const FRAG = /* glsl */ `
  precision highp float;

  uniform vec3  uBase;
  uniform vec3  uRimA;     // cyan rim (upper-left light)
  uniform vec3  uRimB;     // magenta rim (lower-right light)
  uniform vec3  uSpeckA;   // electric pink speckle
  uniform vec3  uSpeckB;   // electric cyan speckle
  uniform float uActive;

  varying vec3 vNormal;
  varying vec3 vViewDir;
  varying vec3 vLocalPos;
  varying vec3 vViewPos;

  // Simplex 3D noise — same as vertex, needed for speckle sampling.
  vec3 mod289(vec3 x){return x-floor(x*(1./289.))*289.;}
  vec4 mod289(vec4 x){return x-floor(x*(1./289.))*289.;}
  vec4 permute(vec4 x){return mod289(((x*34.)+1.)*x);}
  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}
  float snoise(vec3 v){
    const vec2 C=vec2(1./6.,1./3.);
    const vec4 D=vec4(0.,.5,1.,2.);
    vec3 i=floor(v+dot(v,C.yyy));
    vec3 x0=v-i+dot(i,C.xxx);
    vec3 g=step(x0.yzx,x0.xyz);
    vec3 l=1.-g;
    vec3 i1=min(g.xyz,l.zxy);
    vec3 i2=max(g.xyz,l.zxy);
    vec3 x1=x0-i1+C.xxx;
    vec3 x2=x0-i2+C.yyy;
    vec3 x3=x0-D.yyy;
    i=mod289(i);
    vec4 p=permute(permute(permute(
              i.z+vec4(0.,i1.z,i2.z,1.))
            + i.y+vec4(0.,i1.y,i2.y,1.))
            + i.x+vec4(0.,i1.x,i2.x,1.));
    float n_=1./7.;
    vec3 ns=n_*D.wyz-D.xzx;
    vec4 j=p-49.*floor(p*ns.z*ns.z);
    vec4 x_=floor(j*ns.z);
    vec4 y_=floor(j-7.*x_);
    vec4 x=x_*ns.x+ns.yyyy;
    vec4 y=y_*ns.x+ns.yyyy;
    vec4 h=1.-abs(x)-abs(y);
    vec4 b0=vec4(x.xy,y.xy);
    vec4 b1=vec4(x.zw,y.zw);
    vec4 s0=floor(b0)*2.+1.;
    vec4 s1=floor(b1)*2.+1.;
    vec4 sh=-step(h,vec4(0.));
    vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
    vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
    vec3 p0=vec3(a0.xy,h.x);
    vec3 p1=vec3(a0.zw,h.y);
    vec3 p2=vec3(a1.xy,h.z);
    vec3 p3=vec3(a1.zw,h.w);
    vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
    p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;
    vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
    m=m*m;
    return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
  }

  void main(){
    // True surface normal derived from view-space position derivatives — picks
    // up the actual wrinkles/ridges from the displaced geometry instead of the
    // smooth icosahedron normal. Gives proper shadow-in-valley, highlight-on-
    // ridge shading.
    vec3 dx = dFdx(vViewPos);
    vec3 dy = dFdy(vViewPos);
    vec3 n  = normalize(cross(dx, dy));
    vec3 v  = normalize(-vViewPos);

    // Fresnel — bright at glancing angles, dark where the surface faces us.
    float fres = 1.0 - clamp(dot(n, v), 0.0, 1.0);

    // ── Diffuse 3D lighting on the body ───────────────────────────────────────
    // Two soft lights: warm-cyan key from upper-left-front, cool-magenta fill
    // from lower-right. Combined with derivative normal, this makes wrinkle
    // ridges catch light and valleys fall into shadow.
    vec3 keyDir  = normalize(vec3(-0.45,  0.70,  0.85));
    vec3 fillDir = normalize(vec3( 0.65, -0.35,  0.55));

    float diffKey  = max(0.0, dot(n, keyDir));
    float diffFill = max(0.0, dot(n, fillDir));

    // Ambient + key + fill — wrap the body in directional light so ridges and
    // valleys actually read as 3D.
    vec3 lit = uBase * (0.30 + diffKey * 0.95 + diffFill * 0.45);

    // ── Two-tone rim lights ──────────────────────────────────────────────────
    vec3 dirCyan    = normalize(vec3(-0.70,  0.55,  0.50));
    vec3 dirMagenta = normalize(vec3( 0.75, -0.30,  0.50));

    float cyanWrap    = max(0.0, dot(n, dirCyan));
    float magentaWrap = max(0.0, dot(n, dirMagenta));

    float rimCoreP = mix(2.2, 1.7, uActive);
    float rimCyan    = pow(cyanWrap,    1.3) * pow(fres, rimCoreP);
    float rimMagenta = pow(magentaWrap, 1.3) * pow(fres, rimCoreP);

    // ── Specular highlight on ridges ─────────────────────────────────────────
    // Blinn-half-vector style spec from the key light — puts a moving glint on
    // ridges that face the light, sells the glossy / wet quality.
    vec3 halfKey = normalize(keyDir + v);
    float specKey = pow(max(0.0, dot(n, halfKey)), 32.0) * 0.55;

    vec3 col = lit
             + uRimA * rimCyan    * mix(1.10, 1.55, uActive)
             + uRimB * rimMagenta * mix(1.00, 1.45, uActive)
             + specKey * vec3(0.80, 0.95, 1.00);

    // ── Iridescent speckles (sparser than before) ────────────────────────────
    // Higher thresholds → ~half the previous density. Single big-scale layer
    // with a small-scale accent.
    float speckBig   = snoise(vLocalPos * 10.0);
    float speckSmall = snoise(vLocalPos * 24.0 + 1.7);
    float maskBig    = smoothstep(0.66, 0.74, speckBig);
    float maskSmall  = smoothstep(0.72, 0.78, speckSmall) * 0.40;
    float speckMask  = max(maskBig, maskSmall);

    // Per-cluster colour pick — biased toward pink, with cyan accents.
    float colorPick  = snoise(vLocalPos * 4.0 + 5.3);
    vec3  speckColor = mix(uSpeckA, uSpeckB, smoothstep(0.55, 0.75, colorPick));

    // Fade speckles in valley shadows so they read as surface, not stickers.
    float speckBody  = 1.0 - smoothstep(0.55, 0.95, fres);
    col += speckColor * speckMask * speckBody * 0.85;

    gl_FragColor = vec4(col, 1.0);
  }
`

type Palette = {
  base:      [number, number, number]
  rimA:      [number, number, number]
  rimB:      [number, number, number]
  speckA:    [number, number, number]
  speckB:    [number, number, number]
  eye:       string
  eyeGlow:   string
}

const PALETTE: Record<'dark' | 'light', Palette> = {
  dark: {
    base:    [0.050, 0.075, 0.085],
    rimA:    [0.380, 0.860, 0.940],
    rimB:    [0.730, 0.330, 0.940],
    speckA:  [0.880, 0.275, 0.985],
    speckB:  [0.400, 0.910, 1.000],
    eye:     'rgba(255, 140, 245, 0.85)',
    eyeGlow: 'rgba(225, 90, 230, 0.70)',
  },
  light: {
    base:    [0.075, 0.105, 0.120],
    rimA:    [0.400, 0.870, 0.940],
    rimB:    [0.745, 0.355, 0.940],
    speckA:  [0.895, 0.290, 0.985],
    speckB:  [0.420, 0.915, 1.000],
    eye:     'rgba(255, 150, 248, 0.88)',
    eyeGlow: 'rgba(225, 100, 230, 0.75)',
  },
}

// tune: adjust coordinates and durations to change the idle gaze pattern
const LOOK_SEQUENCE: { x: number; y: number; dur: number }[] = [
  { x: -0.65, y:  0.00, dur: 2400 },
  { x:  0.32, y:  0.00, dur: 2800 },
  { x: -0.24, y:  0.00, dur: 2200 },
  { x:  0.00, y: -0.55, dur: 2800 },
  { x:  0.00, y:  0.00, dur: 2600 },
]

export default function CuriousAi() {
  const containerRef = useRef<HTMLDivElement>(null)
  const stageRef     = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLDivElement>(null)
  const sizeRef      = useRef({ w: 320, h: 320 })

  const lookTargetRef  = useRef({ x: 0, y: 0 })
  const lookCurrentRef = useRef({ x: 0, y: 0 })
  const hoverActiveRef = useRef(false)

  const activeRef = useRef(0)
  const targetRef = useRef(0)

  const eyeX = useMotionValue(0)
  const eyeY = useMotionValue(0)
  const sx   = useSpring(eyeX, { stiffness: 200, damping: 22, mass: 0.4 })
  const sy   = useSpring(eyeY, { stiffness: 200, damping: 22, mass: 0.4 })

  const [blinkAt, setBlinkAt] = useState(0)
  const [open,    setOpen]    = useState(0.85)

  const theme = useScopedTheme(containerRef)

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

    const W = host.clientWidth  || 320
    const H = host.clientHeight || 320
    sizeRef.current = { w: W, h: H }

    const palette = PALETTE[theme]

    const scene  = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(38, W / H, 0.1, 100)
    camera.position.z = 4.4

    // Throws outright when the browser cannot hand back a WebGL context:
    // hardware acceleration switched off, an older or virtualised machine, or
    // too many live contexts on one page. Thrown from inside an effect it takes
    // the surrounding page down with it, so an empty frame is the better
    // failure.
    let renderer: THREE.WebGLRenderer
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    } catch {
      return
    }
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.setSize(W, H)
    renderer.setClearColor(0x000000, 0)
    host.appendChild(renderer.domElement)

    const detail = W < 400 ? 32 : 64
    const geo    = new THREE.IcosahedronGeometry(1, detail)

    const uniforms: Record<string, THREE.IUniform> = {
      uTime:   { value: 0 },
      uActive: { value: 0 },
      uLook:   { value: new THREE.Vector2(0, 0) },
      uReduce: { value: 1 },
      uBase:   { value: new THREE.Color(...palette.base) },
      uRimA:   { value: new THREE.Color(...palette.rimA) },
      uRimB:   { value: new THREE.Color(...palette.rimB) },
      uSpeckA: { value: new THREE.Color(...palette.speckA) },
      uSpeckB: { value: new THREE.Color(...palette.speckB) },
    }

    const mat = new THREE.ShaderMaterial({
      vertexShader:   VERT,
      fragmentShader: FRAG,
      uniforms,
      transparent:    true,
    })

    const mesh = new THREE.Mesh(geo, mat)
    scene.add(mesh)

    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
    const applyMotion = () => { uniforms.uReduce.value = mql.matches ? 0 : 1 }
    applyMotion()
    mql.addEventListener('change', applyMotion)

    const ro = new ResizeObserver((entries) => {
      const r = entries[0]?.contentRect
      if (!r) return
      const nw = Math.max(1, Math.floor(r.width))
      const nh = Math.max(1, Math.floor(r.height))
      sizeRef.current = { w: nw, h: nh }
      renderer.setSize(nw, nh)
      camera.aspect = nw / nh
      camera.updateProjectionMatrix()
    })
    ro.observe(host)

    let raf = 0
    const clock = new THREE.Clock()

    function tick() {
      raf = requestAnimationFrame(tick)
      const dt = Math.min(clock.getDelta(), 0.05)
      uniforms.uTime.value += dt

      // tune: raise the response rate to sharpen alert transitions
      const ka = 1 - Math.exp(-dt * 6)
      activeRef.current += (targetRef.current - activeRef.current) * ka
      uniforms.uActive.value = activeRef.current

      // tune: raise either rate to make gaze tracking more responsive
      const speed = hoverActiveRef.current ? 7 : 2.2
      const kl    = 1 - Math.exp(-dt * speed)
      const lc    = lookCurrentRef.current
      const lt    = lookTargetRef.current
      lc.x += (lt.x - lc.x) * kl
      lc.y += (lt.y - lc.y) * kl

      uniforms.uLook.value.set(lc.x, -lc.y)

      // tune: raise the lean range to increase orb travel
      const lean = 0.12 + activeRef.current * 0.06
      mesh.position.x += (lc.x * lean - mesh.position.x) * kl
      mesh.position.y += (-lc.y * lean - mesh.position.y) * kl

      // tune: raise the range factor to increase eye travel
      const range = sizeRef.current.w * 0.18
      eyeX.set(lc.x * range)
      eyeY.set(lc.y * range)

      mesh.rotation.y += dt * 0.04
      mesh.rotation.x += dt * 0.015

      renderer.render(scene, camera)
    }
    tick()

    return () => {
      cancelAnimationFrame(raf)
      mql.removeEventListener('change', applyMotion)
      ro.disconnect()
      geo.dispose()
      mat.dispose()
      // Hand the GPU context back explicitly: dispose() frees the scene but
      // leaves the context alive, and a browser grants only about sixteen per
      // page, so remounting a few times exhausts them.
      try {
        renderer.forceContextLoss()
      } catch {}
      renderer.dispose()
      if (host.contains(renderer.domElement)) host.removeChild(renderer.domElement)
    }
  }, [theme, eyeX, eyeY])

  useEffect(() => {
    const container = containerRef.current
    const stage     = stageRef.current
    if (!container || !stage) return

    function update(clientX: number, clientY: number) {
      const rect    = stage!.getBoundingClientRect()
      const centerX = rect.left + rect.width  / 2
      const centerY = rect.top  + rect.height / 2
      const radius  = rect.width / 2
      const dx      = clientX - centerX
      const dy      = clientY - centerY
      const nx      = Math.max(-1, Math.min(1, dx / radius))
      const ny      = Math.max(-1, Math.min(1, dy / radius))
      const dist    = Math.sqrt(nx * nx + ny * ny)

      // tune: raise the threshold to enlarge the focused pointer region
      const onOrb = dist < 0.62

      hoverActiveRef.current = true
      if (onOrb) {
        targetRef.current = 1
        lookTargetRef.current = { x: nx, y: ny }
        setOpen(0.32)
      } else {
        targetRef.current = 0.35
        // tune: raise the multiplier to increase off-orb eye tracking
        lookTargetRef.current = { x: nx * 0.40, y: ny * 0.40 }
        setOpen(0.70)
      }
    }

    function onMove(e: PointerEvent) {
      update(e.clientX, e.clientY)
    }
    function onEnter(e: PointerEvent) {
      update(e.clientX, e.clientY)
      setBlinkAt((v) => v + 1)
    }
    function onLeave() {
      hoverActiveRef.current = false
      targetRef.current = 0
      setOpen(0.85)
      setBlinkAt((v) => v + 1)
    }
    function onDown(e: PointerEvent) {
      update(e.clientX, e.clientY)
    }
    function onUp() {
      // tune: raise the delay to extend the touch-release grace period
      window.setTimeout(() => {
        if (!container?.matches(':hover')) onLeave()
      }, 500)
    }

    container.addEventListener('pointermove',   onMove)
    container.addEventListener('pointerenter',  onEnter)
    container.addEventListener('pointerleave',  onLeave)
    container.addEventListener('pointerdown',   onDown)
    container.addEventListener('pointerup',     onUp)
    container.addEventListener('pointercancel', onLeave)

    return () => {
      container.removeEventListener('pointermove',   onMove)
      container.removeEventListener('pointerenter',  onEnter)
      container.removeEventListener('pointerleave',  onLeave)
      container.removeEventListener('pointerdown',   onDown)
      container.removeEventListener('pointerup',     onUp)
      container.removeEventListener('pointercancel', onLeave)
    }
  }, [])

  useEffect(() => {
    if (typeof window === 'undefined') return
    let idx = 0
    let timer: number
    function step() {
      const s = LOOK_SEQUENCE[idx]
      if (!hoverActiveRef.current) {
        lookTargetRef.current = { x: s.x, y: s.y }
      }
      idx = (idx + 1) % LOOK_SEQUENCE.length
      timer = window.setTimeout(step, s.dur)
    }
    step()
    return () => window.clearTimeout(timer)
  }, [])

  useEffect(() => {
    if (typeof window === 'undefined') return
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
    let t: number
    function schedule() {
      // tune: raise either bound to reduce blink frequency
      const wait = 3800 + Math.random() * 3200
      t = window.setTimeout(() => {
        setBlinkAt((v) => v + 1)
        schedule()
      }, wait)
    }
    schedule()
    return () => window.clearTimeout(t)
  }, [])

  const palette = PALETTE[theme]
  const bgColor = theme === 'dark' ? '#0A0A09' : '#E8E8DF'

  return (
    <div
      ref={containerRef}
      className="relative flex min-h-screen w-full items-center justify-center"
      style={{ backgroundColor: bgColor }}
    >
      <div
        ref={stageRef}
        className="relative aspect-square h-full max-h-[min(42vh,42vw)] w-full max-w-[min(42vh,42vw)] cursor-pointer select-none touch-none"
      >
        <div ref={canvasRef} className="absolute inset-0" />

        {}
        <motion.div
          className="pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-between"
          style={{ x: sx, y: sy, width: '11%', height: '15%' }}
        >
          <Eye open={open} blinkKey={blinkAt} palette={palette} />
          <Eye open={open} blinkKey={blinkAt} palette={palette} />
        </motion.div>
      </div>
    </div>
  )
}

function Eye({
  open, blinkKey, palette,
}: {
  open: number
  blinkKey: number
  palette: Palette
}) {
  return (
    <motion.div
      style={{
        // tune: raise to widen the eyes
        width: '32%',
        // tune: raise to lengthen the eyes
        height: '100%',
        background: palette.eye,
        borderRadius: 9999,
        boxShadow: `0 0 4px 0 ${palette.eye}, 0 0 14px 1px ${palette.eyeGlow}, 0 0 28px 4px ${palette.eyeGlow}`,
        originY: 0.5,
      }}
      animate={{ scaleY: open }}
      transition={{ type: 'spring', stiffness: 240, damping: 22, mass: 0.4 }}
    >
      <motion.div
        key={blinkKey}
        className="h-full w-full"
        style={{ background: palette.eye, borderRadius: 9999 }}
        initial={{ scaleY: 1 }}
        animate={{ scaleY: [1, 0.05, 1] }}
        transition={{ duration: 0.18, times: [0, 0.45, 1], ease: 'easeInOut' }}
      />
    </motion.div>
  )
}

```

---

## Signature Pad

Category: Widgets
Slug: `signature-pad`
URL: https://aicanvas.me/components/signature-pad

A signature pad widget: pill button morphs into a canvas to draw with mouse or touch.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/signature-pad
```

```tsx
'use client'
// npm install @phosphor-icons/react framer-motion
/**
 * Presents a signature modal with a velocity-sensitive drawing canvas.
 * Pointer strokes can be erased, canceled, or confirmed into the trigger pill.
 */

import { useState, useRef, useEffect, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, Check, Eraser, Signature } from '@phosphor-icons/react'

type Pt = { x: number; y: number; t: number }
type Stroke = Pt[]
type ButtonRect = { x: number; y: number; w: number; h: number }

// tune: adjust these bounds to change stroke-width variation
const MIN_W = 1.1
const MAX_W = 2.6
const MORPH = { type: 'spring' as const, stiffness: 320, damping: 30, mass: 1 }

function widthForVelocity(prev: Pt, curr: Pt) {
  const d = Math.hypot(curr.x - prev.x, curr.y - prev.y)
  const dt = Math.max(1, curr.t - prev.t)
  const v = d / dt
  return Math.max(MIN_W, MAX_W - v * 0.55)
}



function buildPillPalette(isDark: boolean) {
  if (isDark) {
    return {
      pillBg: '#e0dfd8',
      pillHover: '#d4d3cc',
      pillText: '#1a1a18',
      iconTileBg: '#1a1a18',
      iconTileFg: '#f1f1f0',
    }
  }
  return {
    pillBg: '#1a1a18',
    pillHover: '#2d2d2b',
    pillText: '#f1f1f0',
    iconTileBg: '#f1f1f0',
    iconTileFg: '#1a1a18',
  }
}

const MODAL_PALETTE = {
  surfaceBg: '#f1f1f0',
  fieldBg: '#f8f8f8',
  fieldHover: '#ececec',
  labelColor: '#6c6c6c',
  titleColor: '#1a1a18',
  primaryBg: '#1a1a18',
  primaryFg: '#f2f1ec',
  inkColor: '#1a1a18',
  baselineColor: 'rgba(26,26,24,0.14)',
} as const

export default function SignaturePad() {
  const rootRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [open, setOpen] = useState(false)
  const [origin, setOrigin] = useState<ButtonRect | null>(null)
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    const el = rootRef.current
    const check = () => {
      const card = el?.closest('[data-card-theme]') as HTMLElement | null
      setIsDark(
        card
          ? card.classList.contains('dark')
          : document.documentElement.classList.contains('dark'),
      )
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    })
    const card = el?.closest('[data-card-theme]')
    if (card) observer.observe(card, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  const pill = buildPillPalette(isDark)

  function handleOpen() {
    if (buttonRef.current) {
      const r = buttonRef.current.getBoundingClientRect()
      setOrigin({ x: r.left, y: r.top, w: r.width, h: r.height })
    }
    setOpen(true)
  }

  function close() {
    setOpen(false)
  }

  return (
    <div
      ref={rootRef}
      className="flex min-h-screen w-full items-center justify-center p-6"
      style={{ backgroundColor: isDark ? '#1A1A19' : '#E8E8DF' }}
    >
      <motion.button
        ref={buttonRef}
        onClick={handleOpen}
        animate={{
          opacity: open ? 0 : 1,
          scale: open ? 0.85 : 1,
          backgroundColor: pill.pillBg,
        }}
        transition={
          open
            ? { duration: 0.18 }
            : { type: 'spring', stiffness: 400, damping: 28 }
        }
        whileHover={open ? {} : { scale: 1.03, backgroundColor: pill.pillHover }}
        whileTap={open ? {} : { scale: 0.97 }}
        style={{
          borderRadius: 9999,
          color: pill.pillText,
          boxShadow:
            '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
          pointerEvents: open ? 'none' : 'auto',
        }}
        className="flex items-center gap-3 py-2 pl-2 pr-5 font-sans text-[15px] font-semibold"
      >
        <span
          className="flex size-9 shrink-0 items-center justify-center rounded-full"
          style={{ backgroundColor: pill.iconTileBg, color: pill.iconTileFg }}
        >
          <Signature size={18} weight="regular" />
        </span>
        Create your digital signature
      </motion.button>

      <AnimatePresence>
        {open && (
          <motion.div
            key="backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={close}
            className="fixed inset-0 z-40"
            style={{
              backgroundColor: 'rgba(0,0,0,0.28)',
              backdropFilter: 'blur(3px)',
              WebkitBackdropFilter: 'blur(3px)',
            }}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {open && origin && (
          <ModalCard key="modal" origin={origin} onClose={close} />
        )}
      </AnimatePresence>
    </div>
  )
}

function ModalCard({
  origin,
  onClose,
}: {
  origin: ButtonRect
  onClose: () => void
}) {
  const palette = MODAL_PALETTE
  const surfaceRef = useRef<HTMLDivElement>(null)
  const canvasContainerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const strokesRef = useRef<Stroke[]>([])
  const currentRef = useRef<Stroke>([])
  const drawingRef = useRef(false)
  const sizeRef = useRef({ w: 0, h: 0 })

  const [hasInk, setHasInk] = useState(false)
  const [confirming, setConfirming] = useState(false)
  const [today, setToday] = useState('')

  useEffect(() => {
    setToday(
      new Date().toLocaleDateString(undefined, {
        month: 'long',
        day: 'numeric',
        year: 'numeric',
      }),
    )
  }, [])

  
  useEffect(() => {
    surfaceRef.current?.focus()
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        e.preventDefault()
        onClose()
      }
    }
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [onClose])

  const drawSegment = useCallback(
    (stroke: Stroke) => {
      const canvas = canvasRef.current
      if (!canvas || stroke.length < 2) return
      const ctx = canvas.getContext('2d')
      if (!ctx) return
      const prev = stroke[stroke.length - 2]
      const curr = stroke[stroke.length - 1]
      const mid = { x: (prev.x + curr.x) / 2, y: (prev.y + curr.y) / 2 }
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.strokeStyle = palette.inkColor
      ctx.lineWidth = widthForVelocity(prev, curr)
      ctx.beginPath()
      if (stroke.length === 2) {
        ctx.moveTo(prev.x, prev.y)
      } else {
        const prev2 = stroke[stroke.length - 3]
        const prevMid = { x: (prev2.x + prev.x) / 2, y: (prev2.y + prev.y) / 2 }
        ctx.moveTo(prevMid.x, prevMid.y)
      }
      ctx.quadraticCurveTo(prev.x, prev.y, mid.x, mid.y)
      ctx.stroke()
    },
    [palette.inkColor],
  )

  const redrawAll = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    const { w, h } = sizeRef.current
    ctx.clearRect(0, 0, w, h)
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.strokeStyle = palette.inkColor
    ctx.fillStyle = palette.inkColor

    for (const stroke of strokesRef.current) {
      if (stroke.length === 1) {
        const p = stroke[0]
        ctx.beginPath()
        ctx.arc(p.x, p.y, MIN_W, 0, Math.PI * 2)
        ctx.fill()
        continue
      }
      for (let i = 1; i < stroke.length; i++) {
        const prev = stroke[i - 1]
        const curr = stroke[i]
        const mid = { x: (prev.x + curr.x) / 2, y: (prev.y + curr.y) / 2 }
        ctx.lineWidth = widthForVelocity(prev, curr)
        ctx.beginPath()
        if (i === 1) {
          ctx.moveTo(prev.x, prev.y)
        } else {
          const prev2 = stroke[i - 2]
          const prevMid = { x: (prev2.x + prev.x) / 2, y: (prev2.y + prev.y) / 2 }
          ctx.moveTo(prevMid.x, prevMid.y)
        }
        ctx.quadraticCurveTo(prev.x, prev.y, mid.x, mid.y)
        ctx.stroke()
      }
    }
  }, [palette.inkColor])

  const setupCanvas = useCallback(() => {
    const canvas = canvasRef.current
    const container = canvasContainerRef.current
    if (!canvas || !container) return
    const dpr = window.devicePixelRatio || 1
    const width = container.clientWidth
    const height = container.clientHeight
    if (width === 0 || height === 0) return
    sizeRef.current = { w: width, h: height }
    canvas.width = Math.floor(width * dpr)
    canvas.height = Math.floor(height * dpr)
    canvas.style.width = `${width}px`
    canvas.style.height = `${height}px`
    const ctx = canvas.getContext('2d')
    if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    redrawAll()
  }, [redrawAll])

  useEffect(() => {
    setupCanvas()
    const ro = new ResizeObserver(setupCanvas)
    const el = canvasContainerRef.current
    if (el) ro.observe(el)
    return () => ro.disconnect()
  }, [setupCanvas])

  useEffect(() => {
    redrawAll()
  }, [redrawAll])

  function getPoint(e: React.PointerEvent<HTMLCanvasElement>): Pt {
    const rect = e.currentTarget.getBoundingClientRect()
    return { x: e.clientX - rect.left, y: e.clientY - rect.top, t: performance.now() }
  }

  function handlePointerDown(e: React.PointerEvent<HTMLCanvasElement>) {
    if (confirming) return
    e.preventDefault()
    try {
      e.currentTarget.setPointerCapture(e.pointerId)
    } catch {}
    drawingRef.current = true
    const p = getPoint(e)
    currentRef.current = [p]
    strokesRef.current.push(currentRef.current)
    if (!hasInk) setHasInk(true)
  }

  function handlePointerMove(e: React.PointerEvent<HTMLCanvasElement>) {
    if (!drawingRef.current) return
    const p = getPoint(e)
    currentRef.current.push(p)
    drawSegment(currentRef.current)
  }

  function handlePointerUp(e: React.PointerEvent<HTMLCanvasElement>) {
    if (!drawingRef.current) return
    drawingRef.current = false
    try {
      e.currentTarget.releasePointerCapture(e.pointerId)
    } catch {}
  }

  function clear() {
    strokesRef.current = []
    currentRef.current = []
    setHasInk(false)
    redrawAll()
  }

  function save() {
    if (!hasInk || confirming) return
    setConfirming(true)
    setTimeout(() => onClose(), 1100)
  }

  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
  const vh = typeof window !== 'undefined' ? window.innerHeight : 768
  const targetW = Math.min(480, vw - 32)
  const initialOffsetX = origin.x + origin.w / 2 - vw / 2
  const initialOffsetY = origin.y + origin.h / 2 - vh / 2
  const initialScaleX = origin.w / targetW

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center px-4"
      onClick={onClose}
    >
      <motion.div
        ref={surfaceRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="signature-pad-title"
        tabIndex={-1}
        initial={{
          x: initialOffsetX,
          y: initialOffsetY,
          scaleX: initialScaleX,
          scaleY: 0.18,
          borderRadius: 9999,
          opacity: 0.85,
        }}
        animate={{
          x: 0,
          y: 0,
          scaleX: 1,
          scaleY: 1,
          borderRadius: 28,
          opacity: 1,
        }}
        exit={{
          x: initialOffsetX,
          y: initialOffsetY,
          scaleX: initialScaleX,
          scaleY: 0.18,
          borderRadius: 9999,
          opacity: 0,
        }}
        transition={{
          default: MORPH,
          borderRadius: { duration: 0.32, ease: [0.32, 0.72, 0.34, 1] },
          opacity: { duration: 0.18 },
        }}
        style={{
          borderRadius: 28,
          willChange: 'transform, border-radius',
          backgroundColor: palette.surfaceBg,
          boxShadow: '0px 16px 56px rgba(0,0,0,0.18)',
        }}
        onClick={(e) => e.stopPropagation()}
        className="w-full max-w-[480px] px-6 pb-6 pt-6"
      >
        <motion.div
          variants={{
            hidden: { opacity: 0 },
            show: {
              opacity: 1,
              transition: { delay: 0.18, staggerChildren: 0.055 },
            },
            exit: { opacity: 0, transition: { duration: 0.08 } },
          }}
          initial="hidden"
          animate="show"
          exit="exit"
        >
          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: -6 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="mb-5 flex items-start justify-between gap-3"
          >
            <div className="flex items-start gap-3">
              <div
                className="flex size-10 shrink-0 items-center justify-center rounded-full"
                style={{
                  backgroundColor: palette.fieldBg,
                  color: palette.titleColor,
                }}
              >
                <Signature size={20} weight="regular" />
              </div>
              <div className="flex flex-col gap-0.5">
                <span
                  id="signature-pad-title"
                  className="font-sans text-[17px] font-bold leading-tight"
                  style={{ color: palette.titleColor }}
                >
                  Create your digital signature
                </span>
                <span
                  className="font-sans text-[13px] font-medium"
                  style={{ color: palette.labelColor }}
                >
                  Draw using your mouse or finger
                </span>
              </div>
            </div>
            <motion.button
              onClick={onClose}
              aria-label="Close"
              whileTap={{ scale: 0.88 }}
              whileHover={{ scale: 1.1, backgroundColor: palette.fieldHover }}
              transition={{ type: 'spring', stiffness: 400, damping: 26 }}
              className="flex size-9 shrink-0 items-center justify-center rounded-full"
              style={{ backgroundColor: palette.fieldBg, color: palette.labelColor }}
            >
              <X size={16} weight="bold" />
            </motion.button>
          </motion.div>

          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="relative mb-3"
          >
            <div
              ref={canvasContainerRef}
              className="relative aspect-[16/9] w-full overflow-hidden rounded-[20px]"
              style={{ backgroundColor: palette.fieldBg }}
            >
              <canvas
                ref={canvasRef}
                onPointerDown={handlePointerDown}
                onPointerMove={handlePointerMove}
                onPointerUp={handlePointerUp}
                onPointerCancel={handlePointerUp}
                onPointerLeave={handlePointerUp}
                className="absolute inset-0 touch-none"
                style={{ cursor: confirming ? 'default' : 'crosshair' }}
              />
              <div
                className="pointer-events-none absolute inset-x-8 bottom-[28%] h-px"
                style={{ backgroundColor: palette.baselineColor }}
              />
              <AnimatePresence>
                {!hasInk && (
                  <motion.span
                    key="hint"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.18 }}
                    className="pointer-events-none absolute bottom-[31%] left-1/2 -translate-x-1/2 font-sans text-[13px] font-medium"
                    style={{ color: palette.labelColor, opacity: 0.7 }}
                  >
                    Sign here
                  </motion.span>
                )}
              </AnimatePresence>
            </div>

            <div className="mt-2 flex h-7 items-center justify-between">
              <span
                className="font-sans text-[12px] font-medium tabular-nums"
                style={{ color: palette.labelColor, opacity: today ? 0.7 : 0 }}
              >
                {today || '—'}
              </span>
              <AnimatePresence>
                {hasInk && !confirming && (
                  <motion.button
                    key="clear"
                    initial={{ opacity: 0, x: 6 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 6 }}
                    transition={{ duration: 0.18 }}
                    onClick={clear}
                    whileHover={{ scale: 1.04 }}
                    whileTap={{ scale: 0.96 }}
                    className="flex items-center gap-1.5 rounded-full px-2 py-1 font-sans text-[13px] font-semibold"
                    style={{ color: palette.labelColor }}
                  >
                    <Eraser size={14} weight="regular" />
                    Clear
                  </motion.button>
                )}
              </AnimatePresence>
            </div>
          </motion.div>

          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="flex items-center justify-end gap-2"
          >
            <motion.button
              onClick={onClose}
              disabled={confirming}
              whileHover={confirming ? {} : { scale: 1.04, backgroundColor: palette.fieldHover }}
              whileTap={confirming ? {} : { scale: 0.96 }}
              transition={{ type: 'spring', stiffness: 400, damping: 26 }}
              className="rounded-full px-5 py-3 font-sans text-[15px] font-bold"
              style={{
                backgroundColor: palette.fieldBg,
                color: palette.titleColor,
                opacity: confirming ? 0.5 : 1,
              }}
            >
              Cancel
            </motion.button>
            <SaveButton
              hasInk={hasInk}
              confirming={confirming}
              onSave={save}
              primaryBg={palette.primaryBg}
              primaryFg={palette.primaryFg}
            />
          </motion.div>
        </motion.div>
      </motion.div>
    </div>
  )
}

function SaveButton({
  hasInk,
  confirming,
  onSave,
  primaryBg,
  primaryFg,
}: {
  hasInk: boolean
  confirming: boolean
  onSave: () => void
  primaryBg: string
  primaryFg: string
}) {
  const enabled = hasInk && !confirming
  return (
    <motion.button
      onClick={onSave}
      disabled={!enabled}
      animate={{
        scale: confirming ? 0.96 : 1,
        opacity: hasInk || confirming ? 1 : 0.4,
      }}
      whileHover={enabled ? { scale: 1.05 } : {}}
      whileTap={enabled ? { scale: 0.96 } : {}}
      transition={{ type: 'spring', stiffness: 500, damping: 40 }}
      className="flex min-w-[148px] items-center justify-center rounded-full px-7 py-3 font-sans text-[15px] font-bold"
      style={{
        backgroundColor: primaryBg,
        color: primaryFg,
        cursor: enabled ? 'pointer' : 'not-allowed',
      }}
    >
      <AnimatePresence mode="wait" initial={false}>
        {confirming ? (
          <motion.span
            key="check"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ type: 'spring', stiffness: 400, damping: 22 }}
            className="flex items-center justify-center"
          >
            <Check size={16} weight="bold" />
          </motion.span>
        ) : (
          <motion.span
            key="label"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.1 }}
          >
            Save signature
          </motion.span>
        )}
      </AnimatePresence>
    </motion.button>
  )
}

```

---

## Upload Progress

Category: Widgets
Slug: `upload-progress`
URL: https://aicanvas.me/components/upload-progress

A collapsible file upload widget with a shimmer progress bar (indigo while uploading, amber on pause). Expand to see per-file rows with live progress, time remaining, and pause, resume, refresh, and stop controls.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/upload-progress
```

```tsx
'use client'
// npm install @phosphor-icons/react framer-motion
/**
 * Presents simulated file uploads in a collapsible progress card.
 * Each transfer can be paused, resumed, canceled, or restarted after completion.
 */

import { useState, useEffect, useRef } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Pause,
  Play,
  ArrowCounterClockwise,
  X,
  ArrowsOutSimple,
  ArrowsInSimple,
} from '@phosphor-icons/react'

// customize: replace the simulated files and durations below
const FILES = [
  { name: 'Brand reel.mp4', durationMs: 8000 },
  { name: 'Product demo.mp4', durationMs: 12500 },
  { name: 'Hero animation.mp4', durationMs: 16000 },
]

type Status = 'uploading' | 'paused' | 'complete' | 'idle'

const SPRING = { type: 'spring' as const, stiffness: 380, damping: 30 }
const CARD_SHADOW = '0px 16px 56px rgba(0,0,0,0.14)'

function useDarkMode(ref: React.RefObject<HTMLElement | null>) {
  const [isDark, setIsDark] = useState(false)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const update = () => {
      const scope = el.closest('[data-card-theme]') as HTMLElement | null
      if (scope) { setIsDark(scope.dataset.cardTheme === 'dark'); return }
      setIsDark(document.documentElement.classList.contains('dark'))
    }
    update()
    const obs = new MutationObserver(update)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    // Watch the card wrapper too. Its own light/dark switch changes only the
    // wrapper, never <html>, so observing the document alone leaves this stuck
    // on whatever it read first.
    const scope = el.closest('[data-card-theme]')
    if (scope) obs.observe(scope, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
    return () => obs.disconnect()
  }, [ref])
  return isDark
}

export default function UploadProgress() {
  const rootRef = useRef<HTMLDivElement>(null)
  const isDark = useDarkMode(rootRef)

  const [status, setStatus] = useState<Status>('uploading')
  const [expanded, setExpanded] = useState(false)
  const [progress, setProgress] = useState([0, 0, 0])
  const progressRef = useRef([0, 0, 0])
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)

  useEffect(() => {
    if (status !== 'uploading') {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
        intervalRef.current = null
      }
      return
    }
    intervalRef.current = setInterval(() => {
      const next = progressRef.current.map((p, i) =>
        Math.min(100, p + (100 / FILES[i].durationMs) * 80)
      )
      progressRef.current = next
      setProgress([...next])
      if (next.every(p => p >= 100)) setStatus('complete')
    }, 80)
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
        intervalRef.current = null
      }
    }
  }, [status])

  useEffect(() => {
    if (status !== 'complete') return
    const t = setTimeout(() => {
      progressRef.current = [0, 0, 0]
      setProgress([0, 0, 0])
      setStatus('idle')
    }, 2000)
    return () => clearTimeout(t)
  }, [status])

  const overallPct = Math.round(progress.reduce((a, b) => a + b, 0) / FILES.length)
  const secondsLeft = Math.max(
    0,
    Math.round(((100 - progress[2]) / 100) * FILES[2].durationMs / 1000)
  )

  function togglePause() {
    setStatus(s => (s === 'uploading' ? 'paused' : 'uploading'))
  }

  function handleStop() {
    if (intervalRef.current) clearInterval(intervalRef.current)
    progressRef.current = [0, 0, 0]
    setProgress([0, 0, 0])
    setStatus('idle')
  }

  function handleRefresh() {
    progressRef.current = [0, 0, 0]
    setProgress([0, 0, 0])
    setStatus('uploading')
  }

  function startUpload() {
    progressRef.current = [0, 0, 0]
    setProgress([0, 0, 0])
    setStatus('uploading')
  }

  const isDone = status === 'complete'
  const isPaused = status === 'paused'

  const cardBg = isDark ? '#262623' : '#f1f1f0'
  const titleColor = isDark ? '#f1f1ec' : '#1a1a18'
  const mutedColor = isDark ? '#9a9a94' : '#6c6c6c'
  const btnBg = isDark ? '#34342f' : '#ededea'
  const btnColor = isDark ? '#b8b8b0' : '#6c6c6c'
  const dividerColor = isDark ? '#34342f' : '#e4e4dc'
  const trackColor = isDark ? '#34342f' : '#e4e4dc'

  const subtitle = isDone
    ? 'Upload complete'
    : isPaused
    ? `${overallPct}% · Paused`
    : `${overallPct}% · ${secondsLeft}s left`

  return (
    <div ref={rootRef} className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] px-4 dark:bg-[#1A1A19]">
      <div className="w-full max-w-[480px]">
        <AnimatePresence mode="wait">
          {status === 'idle' ? (
            <motion.div
              key="idle"
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={SPRING}
              className="flex justify-center"
            >
              <motion.button
                onClick={startUpload}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                transition={SPRING}
                style={{
                  backgroundColor: isDark ? '#f1f1f0' : '#1a1a18',
                  color: isDark ? '#1a1a18' : '#f1f1f0',
                  borderRadius: 9999,
                  boxShadow: '0 4px 8px rgba(0,0,0,0.12)',
                }}
                className="px-7 py-3.5 font-sans text-[15px] font-bold"
              >
                Upload Files
              </motion.button>
            </motion.div>
          ) : (
            <motion.div
              key="card"
              initial={{ opacity: 0, y: 12, scale: 0.97 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -8, scale: 0.97 }}
              transition={SPRING}
              style={{
                backgroundColor: cardBg,
                borderRadius: 28,
                boxShadow: CARD_SHADOW,
                overflow: 'hidden',
                position: 'relative',
              }}
            >

              {}
              <div className="flex items-start justify-between px-6 pt-5 pb-4">
                <div className="min-w-0 flex-1 pr-3">
                  <h2
                    style={{ color: titleColor }}
                    className="font-sans text-[18px] font-bold leading-tight"
                  >
                    {isDone ? 'Upload complete' : `Uploading ${FILES.length} files`}
                  </h2>
                  <AnimatePresence mode="wait" initial={false}>
                    {!expanded && (
                      <motion.p
                        key={status}
                        initial={{ opacity: 0, y: 3 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -3 }}
                        transition={{ duration: 0.15 }}
                        style={{ color: mutedColor }}
                        className="mt-0.5 whitespace-nowrap font-sans text-[14px] font-medium"
                      >
                        {isDone ? 'Upload complete' : (
                          <>
                            <span className="inline-block min-w-[2.5rem] tabular-nums">
                              {overallPct}%
                            </span>
                            {' · '}
                            {isPaused ? 'Paused' : `${secondsLeft}s left`}
                          </>
                        )}
                      </motion.p>
                    )}
                  </AnimatePresence>
                </div>

                {}
                <div className="flex shrink-0 items-center gap-1.5 pt-0.5">
                  {}
                  <AnimatePresence initial={false}>
                    {!isDone && (
                      <motion.div
                        key="upload-controls-left"
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={{ opacity: 1, scale: 1 }}
                        exit={{ opacity: 0, scale: 0.8 }}
                        transition={SPRING}
                        className="flex items-center gap-1.5"
                      >
                        {}
                        <IconBtn onClick={togglePause} bg={btnBg} color={btnColor}>
                          <AnimatePresence mode="wait" initial={false}>
                            {isPaused ? (
                              <motion.span
                                key="play-icon"
                                initial={{ opacity: 0, scale: 0.6 }}
                                animate={{ opacity: 1, scale: 1 }}
                                exit={{ opacity: 0, scale: 0.6 }}
                                transition={SPRING}
                                className="flex"
                              >
                                <Play size={15} weight="regular" />
                              </motion.span>
                            ) : (
                              <motion.span
                                key="pause-icon"
                                initial={{ opacity: 0, scale: 0.6 }}
                                animate={{ opacity: 1, scale: 1 }}
                                exit={{ opacity: 0, scale: 0.6 }}
                                transition={SPRING}
                                className="flex"
                              >
                                <Pause size={15} weight="regular" />
                              </motion.span>
                            )}
                          </AnimatePresence>
                        </IconBtn>

                        {}
                        <IconBtn onClick={handleRefresh} bg={btnBg} color={btnColor}>
                          <ArrowCounterClockwise size={15} weight="regular" />
                        </IconBtn>
                      </motion.div>
                    )}
                  </AnimatePresence>

                  {}
                  <IconBtn
                    onClick={() => setExpanded(e => !e)}
                    bg={btnBg}
                    color={btnColor}
                  >
                    <AnimatePresence mode="wait" initial={false}>
                      {expanded ? (
                        <motion.span
                          key="collapse-icon"
                          initial={{ opacity: 0, scale: 0.6 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 0.6 }}
                          transition={SPRING}
                          className="flex"
                        >
                          <ArrowsInSimple size={15} weight="regular" />
                        </motion.span>
                      ) : (
                        <motion.span
                          key="expand-icon"
                          initial={{ opacity: 0, scale: 0.6 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 0.6 }}
                          transition={SPRING}
                          className="flex"
                        >
                          <ArrowsOutSimple size={15} weight="regular" />
                        </motion.span>
                      )}
                    </AnimatePresence>
                  </IconBtn>

                  {}
                  <AnimatePresence initial={false}>
                    {!isDone && (
                      <motion.div
                        key="close-control"
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={{ opacity: 1, scale: 1 }}
                        exit={{ opacity: 0, scale: 0.8 }}
                        transition={SPRING}
                        className="flex items-center"
                      >
                        {}
                        <IconBtn onClick={handleStop} bg={btnBg} color={btnColor}>
                          <X size={15} weight="regular" />
                        </IconBtn>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </div>

              {}
              <AnimatePresence initial={false}>
                {expanded && (
                  <motion.div
                    key="file-list"
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{
                      height: { type: 'spring', stiffness: 380, damping: 38 },
                      opacity: { duration: 0.16 },
                    }}
                  >
                    <div
                      style={{
                        height: 1,
                        backgroundColor: dividerColor,
                        marginLeft: 24,
                        marginRight: 24,
                      }}
                    />
                    {FILES.map((f, i) => {
                      const pct = Math.round(progress[i])
                      const secs = Math.max(
                        0,
                        Math.round(((100 - progress[i]) / 100) * f.durationMs / 1000)
                      )
                      const fsub = isDone
                        ? 'Complete'
                        : isPaused
                        ? `${pct}% · Paused`
                        : `${pct}% · ${secs}s left`

                      return (
                        <div key={f.name} className="px-6 py-3">
                          <div className="flex items-center justify-between gap-3">
                            <span
                              style={{ color: titleColor }}
                              className="min-w-0 truncate font-sans text-[15px] font-bold"
                            >
                              {f.name}
                            </span>
                            <span
                              style={{ color: mutedColor }}
                              className="shrink-0 whitespace-nowrap font-sans text-[13px] font-medium"
                            >
                              {fsub}
                            </span>
                          </div>
                          <div
                            style={{ backgroundColor: trackColor }}
                            className="mt-2 h-[3px] overflow-hidden rounded-full"
                          >
                            <motion.div
                              className="h-full rounded-full"
                              animate={{
                                width: `${progress[i]}%`,
                                backgroundColor: isPaused ? '#f59e0b' : '#6366f1',
                              }}
                              transition={{
                                width: { duration: 0.08, ease: 'linear' },
                                backgroundColor: { duration: 0.35, ease: 'easeOut' },
                              }}
                            />
                          </div>
                        </div>
                      )
                    })}
                    <div className="h-2" />
                  </motion.div>
                )}
              </AnimatePresence>

              {}
              <AnimatePresence initial={false}>
                {!expanded && (
                  <motion.div
                    key="bottom-bar"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.15 }}
                  >
                    <div style={{ backgroundColor: trackColor, height: 6, overflow: 'hidden' }}>
                      <motion.div
                        className="h-full relative overflow-hidden"
                        animate={{
                          width: `${overallPct}%`,
                          backgroundColor: isPaused ? '#f59e0b' : '#6366f1',
                        }}
                        transition={{
                          width: { duration: 0.08, ease: 'linear' },
                          backgroundColor: { duration: 0.35, ease: 'easeOut' },
                        }}
                      >
                        <motion.div
                          className="absolute inset-y-0 w-1/2"
                          style={{ background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent)' }}
                          animate={{ x: isPaused ? '-100%' : ['-100%', '250%'] }}
                          transition={isPaused
                            ? { duration: 0 }
                            : { duration: 1.6, repeat: Infinity, ease: 'linear', repeatDelay: 0.8 }
                          }
                        />
                      </motion.div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}

function IconBtn({
  onClick,
  bg,
  color,
  children,
}: {
  onClick: () => void
  bg: string
  color: string
  children: React.ReactNode
}) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.12 }}
      whileTap={{ scale: 0.88 }}
      transition={{ type: 'spring', stiffness: 420, damping: 28 }}
      style={{ backgroundColor: bg, color }}
      className="flex size-9 items-center justify-center rounded-full"
    >
      {children}
    </motion.button>
  )
}

```

---

## Live Session Pill

Category: Cards & Modals
Slug: `voice-chat-pill`
URL: https://aicanvas.me/components/voice-chat-pill

A compact live-session presence pill with an animated speaking indicator and overlapping avatars. Clicks open a soft-UI modal showing all participants with a Join Now button.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/voice-chat-pill
```

```tsx
'use client'
// npm install @phosphor-icons/react framer-motion
/**
 * Presents a voice-chat pill that expands into participant controls.
 * Opening reveals selectable people and speaking indicators before collapsing again.
 */

import { useState, useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { CaretDown, X, Check } from '@phosphor-icons/react'

const MORPH = { type: 'spring' as const, stiffness: 320, damping: 30, mass: 1 }

// customize: replace the participant names and avatars below
const PEOPLE = [
  { id: 0, name: 'David',   avatar: 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=240&h=240&fit=crop&q=80' },
  { id: 1, name: 'Kira',    avatar: 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=240&h=240&fit=crop&q=80' },
  { id: 2, name: 'Marina',  avatar: 'https://images.unsplash.com/photo-1554780336-390462301acf?w=240&h=240&fit=crop&q=80' },
  { id: 3, name: 'Razvan',  avatar: 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?w=240&h=240&fit=crop&q=80' },
  { id: 4, name: 'Ana',     avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=240&h=240&fit=crop&q=80' },
  { id: 5, name: 'Daniel',  avatar: 'https://images.unsplash.com/photo-1654110455429-cf322b40a906?w=240&h=240&fit=crop&q=80' },
  { id: 6, name: 'Afshin',  avatar: 'https://images.unsplash.com/photo-1639747280804-dd2d6b3d88ac?w=240&h=240&fit=crop&q=80' },
  { id: 7, name: 'Lina',    avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=240&h=240&fit=crop&q=80' },
] as const

type ButtonRect = { x: number; y: number; w: number; h: number } | null

function SpeakingBars({ size = 14 }: { size?: number }) {
  return (
    <span
      className="flex items-center justify-center gap-[1.5px]"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      {[0, 1, 2, 3].map((i) => (
        <motion.span
          key={i}
          initial={{ scaleY: 0.35 }}
          animate={{ scaleY: [0.35, 1, 0.55, 0.9, 0.35] }}
          transition={{
            duration: 1.05,
            repeat: Infinity,
            delay: i * 0.13,
            ease: 'easeInOut',
          }}
          className="origin-center rounded-full bg-current"
          style={{ width: 2, height: size * 0.85 }}
        />
      ))}
    </span>
  )
}

export default function VoiceChatPill() {
  const [open, setOpen] = useState(false)
  const [origin, setOrigin] = useState<ButtonRect>(null)
  const [speakerId, setSpeakerId] = useState(0)
  const pillRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    const interval = setInterval(() => {
      setSpeakerId((id) => (id + 1) % PEOPLE.length)
    }, 2400)
    return () => clearInterval(interval)
  }, [])

  function handleOpen() {
    if (pillRef.current) {
      const r = pillRef.current.getBoundingClientRect()
      setOrigin({ x: r.left, y: r.top, w: r.width, h: r.height })
    }
    setOpen(true)
  }

  function close() {
    setOpen(false)
  }

  const collapsedSpeaker = PEOPLE.find((p) => p.id === speakerId) ?? PEOPLE[0]
  const visiblePeople = PEOPLE.slice(0, 4)
  const hiddenCount = PEOPLE.length - visiblePeople.length

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]">

      {}
      <motion.button
        ref={pillRef}
        onClick={handleOpen}
        aria-label="Open live session"
        animate={{ opacity: open ? 0 : 1, scale: open ? 0.85 : 1 }}
        transition={open ? { duration: 0.18 } : { type: 'spring', stiffness: 400, damping: 28 }}
        whileHover={open ? {} : { scale: 1.04 }}
        whileTap={open ? {} : { scale: 0.96 }}
        style={{
          borderRadius: 9999,
          boxShadow:
            '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
          pointerEvents: open ? 'none' : 'auto',
        }}
        className="flex items-center gap-3 rounded-full bg-[#1a1a18] px-2 py-2 pr-4 transition-colors duration-150 hover:bg-[#2d2d2b] dark:bg-[#e0dfd8] dark:hover:bg-[#d4d3cc]"
      >
        {}
        <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#f1f1f0] text-[#1a1a18] dark:bg-[#1a1a18] dark:text-[#f1f1f0]">
          <SpeakingBars size={14} />
        </span>

        {}
        <div className="flex">
          {visiblePeople.map((p, i) => (
            <motion.span
              key={p.id}
              animate={
                p.id === collapsedSpeaker.id
                  ? { y: -1.5, scale: 1.06 }
                  : { y: 0, scale: 1 }
              }
              transition={{ type: 'spring', stiffness: 380, damping: 24 }}
              className="overflow-hidden rounded-full ring-2 ring-[#1a1a18] dark:ring-[#e0dfd8]"
              style={{
                width: 32,
                height: 32,
                marginLeft: i === 0 ? 0 : -10,
                zIndex: visiblePeople.length - i,
              }}
            >
              <img
                src={p.avatar}
                alt={p.name}
                className="size-full object-cover"
                draggable={false}
              />
            </motion.span>
          ))}
        </div>

        {}
        <span className="flex items-center gap-0.5 font-sans text-[14px] font-semibold text-[#f1f1f0] dark:text-[#1a1a18]">
          +{hiddenCount}
          <CaretDown weight="bold" size={13} />
        </span>
      </motion.button>

      {}
      <AnimatePresence>
        {open && (
          <motion.div
            key="backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={close}
            className="fixed inset-0 z-40 bg-black/25 backdrop-blur-[3px]"
          />
        )}
      </AnimatePresence>

      {}
      <AnimatePresence>
        {open && origin && (
          <ModalCard origin={origin} onClose={close} speakerId={speakerId} />
        )}
      </AnimatePresence>
    </div>
  )
}

function ModalCard({
  origin,
  onClose,
  speakerId,
}: {
  origin: { x: number; y: number; w: number; h: number }
  onClose: () => void
  speakerId: number
}) {
  const [joining, setJoining] = useState(false)
  const targetW = typeof window !== 'undefined' ? Math.min(440, window.innerWidth - 32) : 440

  const initialOffsetX = origin.x + origin.w / 2 - window.innerWidth / 2
  const initialOffsetY = origin.y + origin.h / 2 - window.innerHeight / 2
  const initialScaleX = origin.w / targetW

  const shadowBase = '0px 16px 56px rgba(0,0,0,0.14)'
  const boxShadow = shadowBase

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center px-4"
      onClick={onClose}
    >
      <motion.div
        initial={{
          x: initialOffsetX, y: initialOffsetY,
          scaleX: initialScaleX, scaleY: 0.18,
          borderRadius: 9999, opacity: 0.85,
          boxShadow: shadowBase,
        }}
        animate={{
          x: 0, y: 0, scaleX: 1, scaleY: 1,
          borderRadius: 28, opacity: 1,
          boxShadow,
        }}
        exit={{
          x: initialOffsetX, y: initialOffsetY,
          scaleX: initialScaleX, scaleY: 0.18,
          borderRadius: 9999, opacity: 0,
          boxShadow: shadowBase,
        }}
        transition={{
          default: MORPH,
          borderRadius: { duration: 0.32, ease: [0.32, 0.72, 0.34, 1] },
          opacity: { duration: 0.18 },
          boxShadow: { duration: 0.35, ease: 'easeInOut' },
        }}
        style={{ borderRadius: 28, willChange: 'transform, border-radius' }}
        onClick={(e) => e.stopPropagation()}
        className="w-full max-w-[440px] rounded-[28px] bg-[#f1f1f0] px-6 pb-6 pt-6"
      >
        <motion.div
          variants={{
            hidden: { opacity: 0 },
            show: { opacity: 1, transition: { delay: 0.18, staggerChildren: 0.05 } },
            exit: { opacity: 0, transition: { duration: 0.08 } },
          }}
          initial="hidden"
          animate="show"
          exit="exit"
        >
          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: -6 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="relative mb-5 flex items-center justify-center"
          >
            <span className="font-sans text-[18px] font-bold text-[#1a1a18]">Live Session</span>
            <motion.button
              onClick={onClose}
              aria-label="Close live session"
              whileTap={{ scale: 0.88 }}
              whileHover={{ scale: 1.1, backgroundColor: '#ececec' }}
              transition={{ type: 'spring', stiffness: 400, damping: 26 }}
              className="absolute right-0 flex size-9 items-center justify-center rounded-full text-[#6c6c6c]"
              style={{ backgroundColor: '#f8f8f8' }}
            >
              <X size={16} weight="bold" />
            </motion.button>
          </motion.div>

          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="grid grid-cols-4 gap-x-3 gap-y-4"
          >
            {PEOPLE.map((p) => (
              <div key={p.id} className="flex flex-col items-center gap-1.5">
                <div className="relative">
                  <motion.div
                    animate={p.id === speakerId ? { scale: 1.04 } : { scale: 1 }}
                    transition={{ type: 'spring', stiffness: 380, damping: 24 }}
                    className="overflow-hidden rounded-full"
                    style={{ width: 60, height: 60 }}
                  >
                    <img
                      src={p.avatar}
                      alt={p.name}
                      className="size-full object-cover"
                      draggable={false}
                    />
                  </motion.div>
                  <AnimatePresence>
                    {p.id === speakerId && (
                      <motion.span
                        key="badge"
                        initial={{ opacity: 0, scale: 0.6 }}
                        animate={{ opacity: 1, scale: 1 }}
                        exit={{ opacity: 0, scale: 0.6 }}
                        transition={{ type: 'spring', stiffness: 500, damping: 26 }}
                        className="absolute -right-1 -top-0.5 flex size-[22px] items-center justify-center rounded-full bg-[#f1f1f0] ring-2 ring-[#f1f1f0]"
                      >
                        <span className="flex size-[22px] items-center justify-center rounded-full bg-[#1a1a18] text-[#f1f1f0]">
                          <SpeakingBars size={10} />
                        </span>
                      </motion.span>
                    )}
                  </AnimatePresence>
                </div>
                <span className="font-sans text-[13px] font-medium text-[#1a1a18]">
                  {p.name}
                </span>
              </div>
            ))}
          </motion.div>

          {}
          <motion.button
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            onClick={() => {
              if (joining) return
              setJoining(true)
              setTimeout(() => { setJoining(false); onClose() }, 700)
            }}
            disabled={joining}
            animate={{ scale: joining ? 0.96 : 1, backgroundColor: joining ? '#3a3a38' : '#1a1a18' }}
            whileHover={joining ? {} : { scale: 1.02, backgroundColor: '#2d2d2b' }}
            whileTap={joining ? {} : { scale: 0.98 }}
            transition={{ type: 'spring', stiffness: 500, damping: 40 }}
            className="mt-6 w-full rounded-full py-3.5 font-sans text-[15px] font-bold text-[#f2f1ec]"
            style={{ backgroundColor: '#1a1a18' }}
          >
            <AnimatePresence mode="wait" initial={false}>
              {joining ? (
                <motion.span
                  key="check"
                  initial={{ opacity: 0, scale: 0.5 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.5 }}
                  transition={{ type: 'spring', stiffness: 400, damping: 22 }}
                  className="flex items-center justify-center"
                >
                  <Check size={18} weight="bold" />
                </motion.span>
              ) : (
                <motion.span
                  key="label"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.1 }}
                >
                  Join Now
                </motion.span>
              )}
            </AnimatePresence>
          </motion.button>
        </motion.div>
      </motion.div>
    </div>
  )
}

```

---

## New Project Modal

Category: Cards & Modals
Slug: `new-project-modal`
URL: https://aicanvas.me/components/new-project-modal

A pill button that morphs into a soft-UI project creation form: title, description, 7-swatch color label picker, Private toggle, and a checkmark-confirm Create button.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/new-project-modal
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents a new-project form that expands from its trigger button.
 * Opening moves focus into the modal and submission validates the project title.
 */
import { useState, useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Plus, X, Check } from '@phosphor-icons/react'

const MORPH = { type: 'spring' as const, stiffness: 320, damping: 30, mass: 1 }

// customize: replace the project color choices below
const COLORS = [
  { value: '#E05C50', label: 'Rose' },
  { value: '#E09A3A', label: 'Amber' },
  { value: '#48B068', label: 'Sage' },
  { value: '#30AACC', label: 'Teal' },
  { value: '#5878D8', label: 'Slate' },
  { value: '#8F54D8', label: 'Lavender' },
] as const

type ButtonRect = { x: number; y: number; w: number; h: number } | null

export default function NewProjectModal() {
  const [open, setOpen] = useState(false)
  const [origin, setOrigin] = useState<ButtonRect>(null)
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [isPrivate, setIsPrivate] = useState(false)
  const [titleError, setTitleError] = useState(false)
  const [color, setColor] = useState<string | null>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
  const titleRef = useRef<HTMLInputElement>(null)

  function close() {
    setOpen(false)
    setTitle('')
    setDescription('')
    setIsPrivate(false)
    setTitleError(false)
    setColor(null)
  }

  useEffect(() => {
    if (open) {
      const t = setTimeout(() => titleRef.current?.focus(), 320)
      return () => clearTimeout(t)
    }
  }, [open])

  useEffect(() => {
    if (!open) return
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape') close()
    }
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [open])

  function handleOpen() {
    if (buttonRef.current) {
      const r = buttonRef.current.getBoundingClientRect()
      setOrigin({ x: r.left, y: r.top, w: r.width, h: r.height })
    }
    setOpen(true)
  }

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]">
      <motion.button
        ref={buttonRef}
        onClick={handleOpen}
        animate={{ opacity: open ? 0 : 1, scale: open ? 0.85 : 1 }}
        transition={open ? { duration: 0.18 } : { type: 'spring', stiffness: 400, damping: 28 }}
        whileHover={open ? {} : { scale: 1.04 }}
        whileTap={open ? {} : { scale: 0.96 }}
        style={{
          borderRadius: 9999,
          boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
          pointerEvents: open ? 'none' : 'auto',
        }}
        className="flex items-center gap-2 rounded-full bg-[#1a1a18] px-5 py-3 font-sans text-[16px] font-semibold text-[#f1f1f0] dark:bg-[#f1f1f0] dark:text-[#1a1a18]"
      >
        <Plus size={18} weight="bold" />
        New Project
      </motion.button>

      <AnimatePresence>
        {open && (
          <motion.div
            key="backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={close}
            className="fixed inset-0 z-40 bg-black/25 backdrop-blur-[3px]"
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {open && origin && (
          <ModalCard
            origin={origin}
            onClose={close}
            title={title}
            setTitle={(v) => { setTitle(v); if (v) setTitleError(false) }}
            description={description}
            setDescription={setDescription}
            isPrivate={isPrivate}
            setIsPrivate={setIsPrivate}
            titleError={titleError}
            titleRef={titleRef}
            onValidate={() => { if (!title.trim()) { setTitleError(true); return false } return true }}
            color={color}
            setColor={setColor}
          />
        )}
      </AnimatePresence>
    </div>
  )
}

function ModalCard({
  origin, onClose, title, setTitle, description, setDescription,
  isPrivate, setIsPrivate, titleError, titleRef, onValidate, color, setColor,
}: {
  origin: { x: number; y: number; w: number; h: number }
  onClose: () => void
  title: string
  setTitle: (v: string) => void
  description: string
  setDescription: (v: string) => void
  isPrivate: boolean
  setIsPrivate: (fn: (p: boolean) => boolean) => void
  titleError: boolean
  titleRef: React.RefObject<HTMLInputElement | null>
  onValidate: () => boolean
  color: string | null
  setColor: (c: string | null) => void
}) {
  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
  const vh = typeof window !== 'undefined' ? window.innerHeight : 768
  const targetW = Math.min(480, vw - 32)

  const initialOffsetX = origin.x + origin.w / 2 - vw / 2
  const initialOffsetY = origin.y + origin.h / 2 - vh / 2
  const initialScaleX = origin.w / targetW

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center px-4"
      onClick={onClose}
    >
      <motion.div
        initial={{
          x: initialOffsetX, y: initialOffsetY,
          scaleX: initialScaleX, scaleY: 0.18,
          borderRadius: 9999, opacity: 0.85,
          boxShadow: '0px 16px 56px rgba(0,0,0,0.14)',
        }}
        animate={{
          x: 0, y: 0, scaleX: 1, scaleY: 1,
          borderRadius: 28, opacity: 1,
          boxShadow: '0px 16px 56px rgba(0,0,0,0.14)',
        }}
        exit={{
          x: initialOffsetX, y: initialOffsetY,
          scaleX: initialScaleX, scaleY: 0.18,
          borderRadius: 9999, opacity: 0,
          boxShadow: '0px 16px 56px rgba(0,0,0,0.14)',
        }}
        transition={{
          default: MORPH,
          borderRadius: { duration: 0.32, ease: [0.32, 0.72, 0.34, 1] },
          opacity: { duration: 0.18 },
        }}
        style={{ borderRadius: 28, willChange: 'transform, border-radius' }}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-label="New Project"
        className="w-full max-w-[480px] rounded-[28px] bg-[#f1f1f0] px-6 pb-6 pt-6"
      >
        <motion.div
          variants={{
            hidden: { opacity: 0 },
            show: { opacity: 1, transition: { delay: 0.18, staggerChildren: 0.055 } },
            exit: { opacity: 0, transition: { duration: 0.08 } },
          }}
          initial="hidden"
          animate="show"
          exit="exit"
        >
          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: -6 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="relative mb-5 flex items-center justify-center"
          >
            <span className="font-sans text-[18px] font-bold text-[#1a1a18]">New Project</span>
            <motion.button
              onClick={onClose}
              whileTap={{ scale: 0.88 }}
              whileHover={{ scale: 1.1, backgroundColor: '#ececec' }}
              transition={{ type: 'spring', stiffness: 400, damping: 26 }}
              className="absolute right-0 flex size-9 items-center justify-center rounded-full text-[#6c6c6c]"
              style={{ backgroundColor: '#f8f8f8' }}
            >
              <X size={16} weight="bold" />
            </motion.button>
          </motion.div>

          {}
          <div className="flex flex-col gap-3">
            <motion.div
              variants={{
                hidden: { opacity: 0, y: 8 },
                show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
              }}
              className="flex flex-col gap-1"
            >
              <input
                ref={titleRef}
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Title"
                className={`h-[52px] w-full rounded-full border-2 bg-[#f8f8f8] px-5 font-sans text-[15px] font-medium text-[#1a1a18] placeholder-[#a0a09a] outline-none transition-[border-color] focus:border-[#1a1a18] ${
                  titleError ? 'border-red-400' : 'border-transparent'
                }`}
                style={{ caretColor: '#1a1a18' }}
              />
              <AnimatePresence>
                {titleError && (
                  <motion.span
                    initial={{ opacity: 0, y: -4 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -4 }}
                    transition={{ duration: 0.15 }}
                    className="pl-5 font-sans text-[12px] font-medium text-red-400"
                  >
                    Title is required
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.div>

            <motion.input
              variants={{
                hidden: { opacity: 0, y: 8 },
                show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
              }}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Description"
              className="h-[52px] w-full rounded-full border-2 border-transparent bg-[#f8f8f8] px-5 font-sans text-[15px] font-medium text-[#1a1a18] placeholder-[#a0a09a] outline-none transition-[border-color] focus:border-[#1a1a18]"
              style={{ caretColor: '#1a1a18' }}
            />
          </div>

          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="mt-4 flex items-center gap-2"
          >
            <Swatch
              label="None"
              selected={color === null}
              onClick={() => setColor(null)}
              ringColor="#6c6c6c"
              style={{
                background: 'linear-gradient(135deg, #e0dfd8 0%, #e0dfd8 45%, #c8c7c0 45%, #c8c7c0 55%, #e0dfd8 55%, #e0dfd8 100%)',
              }}
            />
            {COLORS.map((c) => (
              <Swatch
                key={c.value}
                label={c.label}
                selected={color === c.value}
                onClick={() => setColor(c.value)}
                ringColor={c.value}
                style={{ backgroundColor: c.value }}
              />
            ))}
          </motion.div>

          {}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 8 },
              show: { opacity: 1, y: 0, transition: { duration: 0.2 } },
            }}
            className="mt-4 flex items-center justify-between"
          >
            <button
              onClick={() => setIsPrivate((p) => !p)}
              className="flex items-center gap-2.5"
            >
              <motion.div
                animate={{ backgroundColor: isPrivate ? '#6c6c6c' : '#f8f8f8' }}
                transition={{ duration: 0.15 }}
                className="flex size-7 items-center justify-center rounded-lg border border-[#1a1a18]"
              >
                <AnimatePresence initial={false} mode="wait">
                  {isPrivate && (
                    <motion.span
                      key="check"
                      initial={{ opacity: 0, scale: 0.4, rotate: -10 }}
                      animate={{ opacity: 1, scale: 1, rotate: 0 }}
                      exit={{ opacity: 0, scale: 0.4, rotate: 10 }}
                      transition={{ type: 'spring', stiffness: 500, damping: 26 }}
                      className="flex"
                    >
                      <Check size={14} weight="bold" color="#f1f1f0" />
                    </motion.span>
                  )}
                </AnimatePresence>
              </motion.div>
              <span className="font-sans text-[15px] font-semibold text-[#1a1a18]">Private</span>
            </button>

            <CreateButton onValidate={onValidate} onConfirm={onClose} />
          </motion.div>
        </motion.div>
      </motion.div>
    </div>
  )
}

function Swatch({
  label, selected, onClick, ringColor, style,
}: {
  label: string
  selected: boolean
  onClick: () => void
  ringColor: string
  style: React.CSSProperties
}) {
  const [hovered, setHovered] = useState(false)

  return (
    <div className="relative flex flex-col items-center">
      <AnimatePresence>
        {hovered && (
          <motion.div
            initial={{ opacity: 0, y: 4, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.9 }}
            transition={{ duration: 0.12 }}
            className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#1a1a18] px-2 py-1 font-sans text-[11px] font-semibold text-[#f1f1f0]"
          >
            {label}
          </motion.div>
        )}
      </AnimatePresence>

      <motion.button
        onClick={onClick}
        aria-label={label}
        onHoverStart={() => setHovered(true)}
        onHoverEnd={() => setHovered(false)}
        whileHover={{ scale: 1.2 }}
        whileTap={{ scale: 0.88 }}
        animate={{
          scale: selected ? 1.1 : 1,
          boxShadow: selected
            ? `0 0 0 2px #f1f1f0, 0 0 0 3.5px ${ringColor}`
            : '0 0 0 0px transparent',
        }}
        transition={{ type: 'spring', stiffness: 400, damping: 24 }}
        className="size-[22px] shrink-0 rounded-full"
        style={style}
      />
    </div>
  )
}

function CreateButton({ onValidate, onConfirm }: { onValidate: () => boolean; onConfirm: () => void }) {
  const [confirming, setConfirming] = useState(false)

  function handleClick() {
    if (!onValidate()) return
    setConfirming(true)
    setTimeout(() => { setConfirming(false); onConfirm() }, 600)
  }

  return (
    <motion.button
      onClick={handleClick}
      disabled={confirming}
      animate={{ scale: confirming ? 0.96 : 1, backgroundColor: confirming ? '#3a3a38' : '#1a1a18' }}
      transition={{ type: 'spring', stiffness: 500, damping: 40 }}
      whileHover={confirming ? {} : { scale: 1.05, backgroundColor: '#2d2d2b' }}
      whileTap={confirming ? {} : { scale: 0.96 }}
      className="rounded-full px-7 py-3 font-sans text-[15px] font-bold text-[#f2f1ec]"
      style={{ backgroundColor: '#1a1a18' }}
    >
      <AnimatePresence mode="wait" initial={false}>
        {confirming ? (
          <motion.span
            key="check"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={{ type: 'spring', stiffness: 400, damping: 22 }}
            className="flex items-center justify-center"
          >
            <Check size={16} weight="bold" />
          </motion.span>
        ) : (
          <motion.span
            key="label"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.1 }}
          >
            Create
          </motion.span>
        )}
      </AnimatePresence>
    </motion.button>
  )
}

```

---

## Radial Cards

Category: Cards & Modals
Slug: `radial-cards`
URL: https://aicanvas.me/components/radial-cards

Seven health-metric cards bloom into a slowly rotating flower. Tap any petal to pull it forward and read your stats up close.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/radial-cards
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Arranges activity cards around a continuously rotating radial track.
 * Pointer engagement lifts and centers the nearest card for inspection.
 */

import { useEffect, useRef, useState, type ComponentType, type RefObject } from 'react'
import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react'
import {
  animate,
  motion,
  useAnimationFrame,
  useMotionValue,
  useMotionValueEvent,
  useSpring,
  useTransform,
  type MotionValue,
} from 'framer-motion'
import { Footprints, Fire, Moon, Drop, Heart, Lightning, Path } from '@phosphor-icons/react'


// tune: raise to slow the orbit
const SECONDS_PER_TURN = 45
const REDUCED_SECONDS_PER_TURN = SECONDS_PER_TURN * 4 

// tune: raise to bring the engaged card farther forward
const ENGAGED_LIFT_Z = 120
const REDUCED_LIFT_Z = 30
// tune: raise to enlarge the engaged card
const ENGAGED_SCALE = 1.18
const REDUCED_ENGAGED_SCALE = 1.06


const LIFT_SPRING = { stiffness: 140, damping: 28, mass: 1 } as const


const SPRING = { stiffness: 200, damping: 24, mass: 1 } as const
const SPEED_SPRING = { stiffness: 90, damping: 20, mass: 1 } as const


// tune: change both dimensions to resize the cards
const CARD_W = 240
const CARD_H = 138



const PETAL_SKEW_Y = 0





const OUTWARD_OFFSET_PX = '0px'



// tune: adjust to redistribute cards around the orbit
const SLOT_ANGLES: readonly number[] = [
  -35.55, 
  22.14, 
  71.01, 
  122.25, 
  161.58, 
  -150.4, 
  -108.41, 
]





const STAGE_SIZE = 'clamp(300px, 50vw, 560px)'


type PhosphorIconProps = {
  size?: number | string
  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
  color?: string
}

type Metric = {
  title: string
  label: string
  value: string
  delta: string
  
  surface: string
  
  gradientEnd: string
  
  dark: string
  
  sparkline: readonly number[]
  
  Icon: ComponentType<PhosphorIconProps>
}

// customize: replace the activity metrics below
const METRICS: Metric[] = [
  {
    title: 'Steps',
    label: 'TODAY',
    value: '20.5K',
    delta: '+5K',
    surface: '#EAF6AE',
    gradientEnd: '#ACC13C',
    dark: '#5C662A',
    sparkline: [28, 18, 10, 6],
    Icon: Footprints,
  },
  {
    title: 'Calories',
    label: 'BURNED',
    value: '1,820',
    delta: '+120',
    surface: '#F9C8A7',
    gradientEnd: '#D4783A',
    dark: '#853C0B',
    sparkline: [30, 8, 20, 6],
    Icon: Fire,
  },
  {
    title: 'Sleep',
    label: 'LAST NIGHT',
    value: '7h 42m',
    delta: '+18m',
    surface: '#C1C2FA',
    gradientEnd: '#7B7DF0',
    dark: '#363885',
    sparkline: [22, 30, 14, 18],
    Icon: Moon,
  },
  {
    title: 'Water',
    label: 'TODAY',
    value: '2.1 L',
    delta: '+0.4 L',
    surface: '#96D9F7',
    gradientEnd: '#4BB8F0',
    dark: '#085B80',
    sparkline: [26, 14, 20, 4],
    Icon: Drop,
  },
  {
    title: 'Heart',
    label: 'RESTING',
    value: '72 BPM',
    delta: '−4',
    surface: '#FBB1BE',
    gradientEnd: '#F07090',
    dark: '#862334',
    sparkline: [8, 22, 16, 28],
    Icon: Heart,
  },
  {
    title: 'Active',
    label: 'THIS WEEK',
    value: '48 min',
    delta: '+12 min',
    surface: '#9BE6DD',
    gradientEnd: '#48C7B8',
    dark: '#0B655B',
    sparkline: [32, 20, 10, 4],
    Icon: Lightning,
  },
  {
    title: 'Distance',
    label: 'THIS WEEK',
    value: '8.4 km',
    delta: '+1.2 km',
    surface: '#FAD79C',
    gradientEnd: '#E8B040',
    dark: '#875706',
    sparkline: [24, 12, 20, 6],
    Icon: Path,
  },
]



function SparkLine({ points, color, id }: { points: readonly number[]; color: string; id: string }) {
  const W = 54, H = 36
  const n = points.length
  const xs = points.map((_, i) => (i / (n - 1)) * W)
  const pts = points.map((y, i) => ({ x: xs[i], y }))

  const segs: string[] = [`M ${pts[0].x},${pts[0].y}`]
  for (let i = 0; i < n - 1; i++) {
    const p0 = pts[Math.max(0, i - 1)]
    const p1 = pts[i]
    const p2 = pts[i + 1]
    const p3 = pts[Math.min(n - 1, i + 2)]
    const cp1x = p1.x + (p2.x - p0.x) / 6
    const cp1y = p1.y + (p2.y - p0.y) / 6
    const cp2x = p2.x - (p3.x - p1.x) / 6
    const cp2y = p2.y - (p3.y - p1.y) / 6
    segs.push(`C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`)
  }
  const linePath = segs.join(' ')
  const areaPath = `${linePath} L ${W},${H} L 0,${H} Z`
  const gradId = `spark-${id}`

  return (
    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} fill="none" style={{ display: 'block', overflow: 'visible' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.12" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={areaPath} fill={`url(#${gradId})`} />
      <path d={linePath} stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}



function useTheme(ref: RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    const element = ref.current
    if (!element) return
    const read = () => {
      const scope = element.closest('[data-card-theme]') as HTMLElement | null
      if (scope) {
        setTheme(scope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    read()
    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const o = new MutationObserver(read)
      o.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(o)
      current = current.parentElement
    }
    return () => observers.forEach((o) => o.disconnect())
  }, [ref])
  return { theme }
}

function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState(false)
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
    const update = () => setReduced(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])
  return reduced
}


type CardProps = {
  index: number
  metric: Metric
  
  rotation: MotionValue<number>
  
  engagedIndex: number | null
  
  topIndex: number | null
  
  reduced: boolean
  onToggle: (index: number) => void
}

function Card({
  index,
  metric,
  rotation,
  engagedIndex,
  topIndex,
  reduced,
  onToggle,
}: CardProps) {
  const engaged = engagedIndex === index
  const isTop = topIndex === index

  
  
  
  
  
  
  
  
  const slotTargetDeg = SLOT_ANGLES[index]

  
  const outwardFactorTarget = useMotionValue(1)
  const outwardFactor = useSpring(outwardFactorTarget, SPRING)

  
  
  const centeringFactorTarget = useMotionValue(0)
  const centeringFactor = useSpring(centeringFactorTarget, LIFT_SPRING)

  const skewFactorTarget = useMotionValue(1)
  const skewFactor = useSpring(skewFactorTarget, SPRING)

  const liftTarget = useMotionValue(0)
  const lift = useSpring(liftTarget, LIFT_SPRING)

  const scaleTarget = useMotionValue(1)
  const scale = useSpring(scaleTarget, LIFT_SPRING)

  const opacityTarget = useMotionValue(1)
  const cardOpacity = useSpring(opacityTarget, SPRING)

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  const initialRot = SLOT_ANGLES[index] + rotation.get()
  const cardRotation = useMotionValue(initialRot)
  const followModeRef = useRef<boolean>(true)
  const followBaseRef = useRef<number>(SLOT_ANGLES[index])

  
  
  
  useMotionValueEvent(rotation, 'change', (latest) => {
    if (!followModeRef.current) return
    cardRotation.set(followBaseRef.current + latest)
  })

  
  
  
  
  
  
  useEffect(() => {
    
    
    const shortestEquivalent = (current: number, target: number): number => {
      let delta = target - current
      while (delta > 180) delta -= 360
      while (delta <= -180) delta += 360
      return current + delta
    }

    if (engaged) {
      
      
      
      followBaseRef.current = 0
      followModeRef.current = false

      const current = cardRotation.get()
      const shortestTarget = shortestEquivalent(current, 0)

      const controls = animate(cardRotation, shortestTarget, {
        type: 'spring',
        ...LIFT_SPRING,
      })
      return () => controls.stop()
    } else {
      
      
      
      
      
      followBaseRef.current = slotTargetDeg
      cardRotation.set(slotTargetDeg + rotation.get())
      followModeRef.current = true
    }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [engaged, slotTargetDeg, index])

  
  useEffect(() => {
    if (engaged) {
      
      
      outwardFactorTarget.set(0)
      centeringFactorTarget.set(1)
      skewFactorTarget.set(0)
      liftTarget.set(reduced ? REDUCED_LIFT_Z : ENGAGED_LIFT_Z)
      scaleTarget.set(reduced ? REDUCED_ENGAGED_SCALE : ENGAGED_SCALE)
      opacityTarget.set(1)
    } else {
      
      
      outwardFactorTarget.set(1)
      centeringFactorTarget.set(0)
      skewFactorTarget.set(1)
      liftTarget.set(0)
      scaleTarget.set(1)
      
      opacityTarget.set(reduced && engagedIndex != null ? 0.7 : 1)
    }
  }, [
    engaged,
    engagedIndex,
    reduced,
    slotTargetDeg,
    outwardFactorTarget,
    centeringFactorTarget,
    skewFactorTarget,
    liftTarget,
    scaleTarget,
    opacityTarget,
  ])

  
  
  
  const pivotTransform = useTransform(
    cardRotation,
    (r) => `rotate(${r as number}deg)`,
  )

  
  
  
  
  
  
  
  
  const cardBodyTransform = useTransform(
    [centeringFactor, skewFactor, outwardFactor],
    ([c, sk, ow]) => {
      const cf = c as number
      const skf = sk as number
      const owf = ow as number
      
      
      const txPct = -50 * cf
      return (
        `translate(${txPct}%, calc(-50% - (50% + (${OUTWARD_OFFSET_PX}) * ${owf}) * ${1 - cf})) ` +
        `skewY(${PETAL_SKEW_Y * skf}deg)`
      )
    },
  )

  
  
  
  
  const liftTransform = useTransform(
    [lift, scale],
    ([z, s]) => `translateZ(${z as number}px) scale(${s as number})`,
  )

  
  
  
  
  
  
  
  
  
  
  const dynamicZIndex = useTransform(lift, (z) => {
    if (z > 4) return 50
    if (engaged) return 40
    if (isTop) return 30
    return 1
  })

  
  
  useEffect(() => {
    lift.set(lift.get())
  }, [engaged, isTop, lift])

  
  const restShadow =
    '4px 6px 14px rgba(0,0,0,0.18), 12px 18px 40px rgba(0,0,0,0.22)'
  const liftedShadow =
    '8px 14px 26px rgba(0,0,0,0.30), 28px 36px 70px rgba(0,0,0,0.34)'

  function handlePointerDown(e: ReactPointerEvent<HTMLDivElement>) {
    e.stopPropagation()
    onToggle(index)
  }

  
  const interStack =
    '"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'

  const frontShadow =
    '-8px 16px 32px rgba(0,0,0,0.12), -3px 6px 14px rgba(0,0,0,0.18)'

  return (
    <motion.div
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        width: 0,
        height: 0,
        transformOrigin: '0 0',
        zIndex: dynamicZIndex,
        transformStyle: 'preserve-3d',
        transform: pivotTransform,
      }}
    >
      <motion.div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: CARD_W,
          height: CARD_H,
          transformOrigin: '0% 100%',
          transformStyle: 'preserve-3d',
          transform: cardBodyTransform,
          opacity: cardOpacity,
          touchAction: 'manipulation',
          cursor: 'pointer',
          userSelect: 'none',
        }}
        onPointerDown={handlePointerDown}
      >
        <motion.div
          style={{
            position: 'absolute',
            inset: 0,
            transformStyle: 'preserve-3d',
            transform: liftTransform,
          }}
        >
          {}
          <div
            style={{
              position: 'absolute',
              inset: 0,
              borderRadius: 24,
              overflow: 'hidden',
              background: `linear-gradient(to bottom, ${metric.surface}, ${metric.gradientEnd})`,
              boxShadow: engaged ? liftedShadow : frontShadow,
              transition: 'box-shadow 320ms ease',
              padding: '12px 4px 4px 4px',
              display: 'flex',
              flexDirection: 'column',
              gap: 10,
              fontFamily: interStack,
            }}
          >
            {}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                paddingLeft: 6,
                paddingTop: 2,
                flexShrink: 0,
              }}
            >
              <metric.Icon size={12} weight="regular" color={metric.dark} />
              <span
                style={{
                  color: '#1a1a1a',
                  fontSize: 12,
                  fontWeight: 500,
                  lineHeight: 1,
                }}
              >
                {metric.title}
              </span>
            </div>

            {}
            <div
              style={{
                flex: '1 0 0',
                background: '#f7f7f5',
                borderRadius: 20,
                padding: 12,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                boxShadow: '0px 1px 12px rgba(0,0,0,0.25)',
                minHeight: 0,
              }}
            >
              {}
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <span
                  style={{
                    background: metric.dark,
                    color: '#ffffff',
                    fontSize: 10,
                    fontWeight: 600,
                    padding: '5px 10px',
                    borderRadius: 999,
                    lineHeight: 1,
                    whiteSpace: 'nowrap',
                  }}
                >
                  {metric.delta}
                </span>
              </div>

              {}
              <div
                style={{
                  display: 'flex',
                  alignItems: 'flex-end',
                  justifyContent: 'space-between',
                }}
              >
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 2,
                  }}
                >
                  <span
                    style={{
                      color: '#1a1a1a',
                      fontSize: 10,
                      fontWeight: 600,
                      letterSpacing: '0.48px',
                      lineHeight: 1,
                    }}
                  >
                    {metric.label}
                  </span>
                  <span
                    style={{
                      color: metric.dark,
                      fontSize: 23,
                      fontWeight: 600,
                      letterSpacing: '-0.28px',
                      lineHeight: 1,
                    }}
                  >
                    {metric.value}
                  </span>
                </div>

                <SparkLine points={metric.sparkline} color={metric.dark} id={String(index)} />
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  )
}



export default function RadialCards() {
  const rootRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(rootRef)
  const isDark = theme === 'dark'
  const reduced = useReducedMotion()

  
  const rotation = useMotionValue(0)

  
  
  const speedTargetRef = useRef(1)
  const speedTarget = useMotionValue(1)
  const speedSmooth = useSpring(speedTarget, SPEED_SPRING)

  
  const [engagedIndex, setEngagedIndex] = useState<number | null>(null)

  
  
  
  const [topIndex, setTopIndex] = useState<number | null>(null)

  
  
  
  
  useEffect(() => {
    speedTargetRef.current = 1
    speedTarget.set(speedTargetRef.current)
  }, [engagedIndex, speedTarget])

  
  const prevTs = useRef<number | null>(null)
  useAnimationFrame((t) => {
    const last = prevTs.current
    prevTs.current = t
    if (last == null) return
    const dt = (t - last) / 1000
    const seconds = reduced ? REDUCED_SECONDS_PER_TURN : SECONDS_PER_TURN
    const degPerSec = 360 / seconds
    const next = rotation.get() + degPerSec * speedSmooth.get() * dt
    rotation.set(((next % 360) + 360) % 360)
  })

  function handleToggle(i: number) {
    
    
    
    setTopIndex(i)
    setEngagedIndex((prev) => (prev === i ? null : i))
  }

  function handleStageRelease() {
    
    
    
    setEngagedIndex(null)
  }

  return (
    <div
      ref={rootRef}
      className="relative flex min-h-screen w-full items-center justify-center overflow-hidden"
      style={{
        background: isDark ? '#1A1A19' : '#F0F0E8',
      }}
      onPointerDown={handleStageRelease}
    >
      {}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 35%, rgba(0,0,0,0) 70%)',
          pointerEvents: 'none',
        }}
      />

      {}
      <div
        style={{
          position: 'relative',
          width: STAGE_SIZE,
          height: STAGE_SIZE,
          perspective: '1200px',
          perspectiveOrigin: '50% 50%',
          touchAction: 'manipulation',
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: 0,
            transformStyle: 'preserve-3d',
          }}
        >
          {METRICS.map((metric, i) => (
            <Card
              key={metric.title}
              index={i}
              metric={metric}
              rotation={rotation}
              engagedIndex={engagedIndex}
              topIndex={topIndex}
              reduced={reduced}
              onToggle={handleToggle}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

```

---

## Ripple Type

Category: Typography
Slug: `ripple-type`
URL: https://aicanvas.me/components/ripple-type

SVG text animation warped by a turbulence filter. Toggle the fan and letters ripple.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/ripple-type
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a word around a rotating fan of repeated glyph layers.
 * Pointer engagement increases the ripple amplitude and rotation rate.
 */

import React, { useEffect, useId, useRef, useState } from 'react'
import { useAnimationFrame } from 'framer-motion'


// customize: replace the display word below
const WORD = 'RIPPLE'


const LEVEL_COUNT       = 1
// tune: raise to build ripple intensity faster
const LEVEL_RAMP        = 1.0
// tune: raise to release ripple intensity faster
const LEVEL_DECAY       = 2.5
// tune: raise to increase the maximum ripple scale
const MAX_SCALE         = 36
const OSCILLATION_HZ    = 0.09
const REST_FREQ         = 0.001
const HOVER_FREQ        = 0.009
const RIPPLE_PHASE_RATE = 0.9  


// tune: raise the divisor to slow the engaged fan
const FAN_FULL_RATE = (Math.PI * 2) / 0.6
const FAN_REDUCED_RATE = (Math.PI * 2) / 2.0

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    const element = ref.current
    if (!element) return
    const read = () => {
      const scope = element.closest('[data-card-theme]') as HTMLElement | null
      if (scope) {
        setTheme(scope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    read()
    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const o = new MutationObserver(read)
      o.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(o)
      current = current.parentElement
    }
    return () => observers.forEach((o) => o.disconnect())
  }, [ref])
  return { theme }
}

export default function RippleType() {
  const rootRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(rootRef)
  const isDark = theme === 'dark'

  const bg = isDark ? '#0A0A0A' : '#EFEEE6'
  const fg = isDark ? '#EFEEE6' : '#0A0A0A'
  const fanStroke = isDark ? '#EFEEE6' : '#0A0A0A'
  const vignette = isDark
    ? 'radial-gradient(70% 55% at 50% 50%, rgba(239,238,230,0.06) 0%, rgba(10,10,10,0) 70%)'
    : 'radial-gradient(70% 55% at 50% 50%, rgba(10,10,10,0.05) 0%, rgba(239,238,230,0) 70%)'

  const uid = useId().replace(/:/g, '-')
  const filterId = `ripple-${uid}`
  const turbRef  = useRef<SVGFETurbulenceElement>(null)
  const dispRef  = useRef<SVGFEDisplacementMapElement>(null)
  const bladesRef = useRef<SVGGElement>(null)

  const [reducedMotion, setReducedMotion] = useState(false)
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
    const update = () => setReducedMotion(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  
  const [fanOn, setFanOn] = useState(false)
  const fanOnRef = useRef(false)
  useEffect(() => { fanOnRef.current = fanOn }, [fanOn])

  
  
  const levelRef      = useRef(0)
  const fanAngleRef   = useRef(0)
  const ripplePhaseRef = useRef(0)
  const lastTimeRef   = useRef<number | null>(null)
  const textSvgRef    = useRef<SVGSVGElement>(null)

  useAnimationFrame((t) => {
    const turb  = turbRef.current
    const disp  = dispRef.current
    const blades = bladesRef.current
    if (!turb || !disp) return

    const last = lastTimeRef.current
    const dt = last == null ? 0 : Math.max(0, Math.min(0.05, (t - last) / 1000))
    lastTimeRef.current = t

    
    if (fanOnRef.current) {
      levelRef.current = Math.min(LEVEL_COUNT, levelRef.current + LEVEL_RAMP * dt)
    } else {
      levelRef.current = Math.max(0, levelRef.current - LEVEL_DECAY * dt)
    }

    const intensity = levelRef.current / LEVEL_COUNT  

    
    const secs = t / 1000
    const breath = Math.sin(secs * Math.PI * 2 * OSCILLATION_HZ)

    const peakScale = reducedMotion ? 14 : MAX_SCALE
    const scale = intensity * peakScale
    const freq  = Math.max(0.002,
      REST_FREQ + (HOVER_FREQ - REST_FREQ) * intensity + 0.004 * breath * intensity
    )

    
    
    
    ripplePhaseRef.current += intensity * RIPPLE_PHASE_RATE * dt
    const p = ripplePhaseRef.current
    const liveFreqX = Math.max(0.002, freq + 0.007 * Math.sin(p) * intensity)
    const liveFreqY = Math.max(0.002, 0.028 + 0.012 * Math.sin(p * 1.4 + 1) * intensity)
    turb.setAttribute('baseFrequency', `${liveFreqX} ${liveFreqY}`)
    disp.setAttribute('scale', String(scale))

    
    
    const textSvgEl = textSvgRef.current
    if (textSvgEl) {
      const skew = reducedMotion ? 0 : intensity * 13
      textSvgEl.style.transform = `skewX(${skew}deg)`
    }

    
    if (blades) {
      const rate = reducedMotion ? FAN_REDUCED_RATE : FAN_FULL_RATE
      fanAngleRef.current += rate * intensity * dt
      if (fanAngleRef.current > Math.PI * 2) fanAngleRef.current -= Math.PI * 2
      blades.style.transform = `rotate(${(fanAngleRef.current * 180) / Math.PI}deg)`
    }
  })

  const toggleFan = () => setFanOn((v) => !v)
  const onKey = (e: React.KeyboardEvent<SVGSVGElement>) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault()
      toggleFan()
    }
  }

  
  const fan = (
    <div
      role="button"
      aria-label="Toggle fan"
      aria-pressed={fanOn}
      tabIndex={0}
      onClick={toggleFan}
      onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleFan() } }}
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 4,
        cursor: 'pointer',
        outline: 'none',
        flexShrink: 0,
        userSelect: 'none',
        touchAction: 'manipulation',
      }}
    >
    <svg
      viewBox="0 0 100 100"
      style={{
        display: 'block',
        transform: 'perspective(220px) rotateY(38deg)',
        width: 'clamp(56px, 11vw, 112px)',
        height: 'clamp(56px, 11vw, 112px)',
      }}
    >
      {}
      <circle
        cx="50"
        cy="50"
        r="38"
        fill="none"
        stroke={fanStroke}
        strokeWidth="2"
        opacity="0.85"
      />
      <circle
        cx="50"
        cy="50"
        r="30"
        fill="none"
        stroke={fanStroke}
        strokeWidth="1"
        opacity="0.35"
      />
      <circle
        cx="50"
        cy="50"
        r="22"
        fill="none"
        stroke={fanStroke}
        strokeWidth="1"
        opacity="0.25"
      />

      {}
      <g
        ref={bladesRef}
        style={{
          transformBox: 'view-box',
          transformOrigin: '50px 50px',
          willChange: 'transform',
        }}
      >
        {[0, 120, 240].map((angle) => (
          <path
            key={angle}
            d="M50 50 C 56 34, 64 28, 70 26 C 66 34, 60 42, 50 50 Z"
            fill={fanStroke}
            opacity="0.9"
            transform={`rotate(${angle} 50 50)`}
          />
        ))}
      </g>

      {}
      <circle cx="50" cy="50" r="4.5" fill={fanStroke} />
      <circle cx="50" cy="50" r="1.6" fill={bg} />
    </svg>
    <span
      style={{
        fontFamily:
          'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
        fontWeight: 700,
        fontSize: 11,
        letterSpacing: '0.18em',
        color: fanOn ? '#22C55E' : '#EF4444',
        opacity: 1,
        transition: 'color 0.4s, opacity 0.4s',
      }}
    >
      {fanOn ? 'ON' : 'OFF'}
    </span>
    </div>
  )

  const textSvg = (
    <svg
      ref={textSvgRef}
      role="img"
      aria-label={WORD}
      viewBox="0 0 500 180"
      preserveAspectRatio="xMidYMid meet"
      style={{
        width: 'min(55vw, 500px)',
        height: 'auto',
        maxHeight: '70vh',
        overflow: 'visible',
      }}
    >
      <defs>
        <filter id={filterId} x="-15%" y="-15%" width="130%" height="130%">
          <feTurbulence
            ref={turbRef}
            type="fractalNoise"
            baseFrequency={REST_FREQ}
            numOctaves={1}
            seed={4}
            result="noise"
          />
          <feDisplacementMap
            ref={dispRef}
            in="SourceGraphic"
            in2="noise"
            scale={0}
            xChannelSelector="R"
            yChannelSelector="G"
          />
        </filter>
      </defs>

      <g filter={`url(#${filterId})`} fill={fg}>
        <text
          x="250"
          y="140"
          textAnchor="middle"
          style={{
            fontFamily:
              'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
            fontWeight: 900,
            fontSize: 140,
            letterSpacing: '-0.04em',
            userSelect: 'none',
          }}
        >
          {WORD}
        </text>
      </g>
    </svg>
  )

  return (
    <div
      ref={rootRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ backgroundColor: bg }}
    >
      {}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background: vignette,
          pointerEvents: 'none',
        }}
      />

      {}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 'clamp(14px, 3vw, 32px)',
        }}
      >
        {fan}
        {textSvg}
      </div>
    </div>
  )
}

```

---

## Stack Tower

Category: Typography
Slug: `stack-tower`
URL: https://aicanvas.me/components/stack-tower

A column of 12 stacked words that reads as a rotating 3D cylinder. 2D transforms skew, scale and shift each row so the rotation travels down the stack. Hover lights one row in warm orange without breaking the rhythm.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/stack-tower
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders repeated words as a vertically rotating typographic tower.
 * Hovering a row increases its scale while the stack continues cycling.
 */

import React, { useEffect, useMemo, useRef, useState } from 'react'
import {
  motion,
  motionValue,
  useAnimationFrame,
  useTransform,
} from 'framer-motion'
import type { MotionValue } from 'framer-motion'


// customize: replace the alternating tower words below
const WORDS = ['STACK', 'TOWER'] as const
// tune: raise to add more stacked rows
const ROW_COUNT = 12 
// tune: raise to slow the tower cycle
const SECONDS_PER_CYCLE = 5 
// tune: raise to increase horizontal row travel
const AMPLITUDE_PX = 22 
// tune: raise to enlarge the hovered row further
const HOVER_SCALE_BOOST = 0.1 
const HOVER_EASE_RATE = 10 

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    const element = ref.current
    if (!element) return
    const read = () => {
      const scope = element.closest('[data-card-theme]') as HTMLElement | null
      if (scope) {
        setTheme(scope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    read()
    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const o = new MutationObserver(read)
      o.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(o)
      current = current.parentElement
    }
    return () => observers.forEach((o) => o.disconnect())
  }, [ref])
  return { theme }
}

type RowProps = {
  text: string
  rowIndex: number
  phase: MotionValue<number>
  hover: MotionValue<number>
  fg: string
  dim: string
  accent: string
  fontSize: string
  onEnter: (i: number) => void
  onLeave: (i: number) => void
}

function TowerRow({
  text,
  rowIndex,
  phase,
  hover,
  fg,
  dim,
  accent,
  fontSize,
  onEnter,
  onLeave,
}: RowProps) {
  const rowOffset = rowIndex * 0.35

  
  
  const transform = useTransform([phase, hover], ([p, h]) => {
    const local = (p as number) * Math.PI * 2 + rowOffset
    const scaleX = 0.55 + 0.45 * Math.cos(local)
    const shiftX = Math.sin(local) * AMPLITUDE_PX
    const skewX = Math.sin(local) * 6
    const boost = 1 + (h as number) * HOVER_SCALE_BOOST
    return `translateX(${shiftX}px) skewX(${skewX}deg) scale(${
      Math.max(0.08, scaleX) * boost
    }, ${boost})`
  })

  
  const color = useTransform([phase, hover], ([p, h]) => {
    const local = (p as number) * Math.PI * 2 + rowOffset
    const tt = (Math.cos(local) + 1) / 2
    const base = mix(dim, fg, tt)
    const hv = h as number
    if (hv < 0.002) return base
    return mix(base, accent, hv)
  })

  return (
    <div
      onPointerEnter={() => onEnter(rowIndex)}
      onPointerLeave={() => onLeave(rowIndex)}
      onPointerDown={() => onEnter(rowIndex)}
      onPointerUp={() => onLeave(rowIndex)}
      onPointerCancel={() => onLeave(rowIndex)}
      style={{
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        cursor: 'pointer',
        touchAction: 'none',
      }}
    >
      <motion.div
        style={{
          fontFamily:
            'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
          fontWeight: 900,
          fontSize,
          lineHeight: 0.92,
          letterSpacing: '-0.03em',
          textAlign: 'center',
          whiteSpace: 'nowrap',
          transform,
          color,
          willChange: 'transform, color',
          userSelect: 'none',
        }}
      >
        {text}
      </motion.div>
    </div>
  )
}


function mix(a: string, b: string, t: number): string {
  const pa = parseInt(a.slice(1), 16)
  const pb = parseInt(b.slice(1), 16)
  const ar = (pa >> 16) & 0xff
  const ag = (pa >> 8) & 0xff
  const ab = pa & 0xff
  const br = (pb >> 16) & 0xff
  const bg = (pb >> 8) & 0xff
  const bb = pb & 0xff
  const r = Math.round(ar + (br - ar) * t)
  const g = Math.round(ag + (bg - ag) * t)
  const bl = Math.round(ab + (bb - ab) * t)
  return `#${((r << 16) | (g << 8) | bl).toString(16).padStart(6, '0')}`
}

export default function StackTower() {
  const rootRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(rootRef)
  const isDark = theme === 'dark'

  const bg = isDark ? '#0A0A0A' : '#EFEEE6'
  const fg = isDark ? '#EFEEE6' : '#0A0A0A'
  const dim = isDark ? '#3A3936' : '#C7C3B8'
  const accent = '#F16D14'
  const fadeTop = isDark
    ? 'linear-gradient(to bottom, #0A0A0A 0%, rgba(10,10,10,0) 100%)'
    : 'linear-gradient(to bottom, #EFEEE6 0%, rgba(239,238,230,0) 100%)'
  const fadeBot = isDark
    ? 'linear-gradient(to top, #0A0A0A 0%, rgba(10,10,10,0) 100%)'
    : 'linear-gradient(to top, #EFEEE6 0%, rgba(239,238,230,0) 100%)'

  const [reducedMotion, setReducedMotion] = useState(false)
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
    const update = () => setReducedMotion(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  
  
  const hoveredIndexRef = useRef<number | null>(null)

  
  
  
  const phases = useMemo<MotionValue<number>[]>(
    () => Array.from({ length: ROW_COUNT }, () => motionValue(0)),
    [],
  )

  
  const hovers = useMemo<MotionValue<number>[]>(
    () => Array.from({ length: ROW_COUNT }, () => motionValue(0)),
    [],
  )

  const hoverEased = useRef<number[]>(Array(ROW_COUNT).fill(0))
  const prevTs = useRef<number | null>(null)

  useAnimationFrame((t) => {
    if (reducedMotion) {
      phases.forEach((p, i) => p.set(0.2 + i * 0.03))
      return
    }
    const last = prevTs.current
    prevTs.current = t
    if (last == null) return

    const dtSec = (t - last) / 1000
    const phaseDt = dtSec / SECONDS_PER_CYCLE
    const alpha = 1 - Math.exp(-HOVER_EASE_RATE * dtSec)

    const hov = hoveredIndexRef.current
    for (let i = 0; i < ROW_COUNT; i++) {
      
      phases[i].set(phases[i].get() + phaseDt)

      
      const target = i === hov ? 1 : 0
      const cur = hoverEased.current[i]
      const next = cur + (target - cur) * alpha
      hoverEased.current[i] = next
      hovers[i].set(next)
    }
  })

  const handleEnter = (i: number) => {
    hoveredIndexRef.current = i
  }
  const handleLeave = (i: number) => {
    if (hoveredIndexRef.current === i) hoveredIndexRef.current = null
  }

  const rows = Array.from({ length: ROW_COUNT }, (_, i) => WORDS[i % WORDS.length])
  const fontSize = 'clamp(1.75rem, 9vw, 4.5rem)'

  return (
    <div
      ref={rootRef}
      className="flex min-h-screen w-full items-center justify-center overflow-hidden"
      style={{ backgroundColor: bg }}
    >
      <div
        className="relative flex flex-col items-center justify-center"
        style={{ width: 'min(92vw, 620px)' }}
      >
        {rows.map((word, i) => (
          <TowerRow
            key={i}
            text={word}
            rowIndex={i}
            phase={phases[i]}
            hover={hovers[i]}
            fg={fg}
            dim={dim}
            accent={accent}
            fontSize={fontSize}
            onEnter={handleEnter}
            onLeave={handleLeave}
          />
        ))}

        {}
        <div
          aria-hidden
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            height: '22%',
            background: fadeTop,
            pointerEvents: 'none',
          }}
        />
        <div
          aria-hidden
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: '22%',
            background: fadeBot,
            pointerEvents: 'none',
          }}
        />
      </div>
    </div>
  )
}

```

---

## Slice Type

Category: Typography
Slug: `slice-type`
URL: https://aicanvas.me/components/slice-type

A typographic magic trick. At rest you read one ambiguous word; hover and it splits into two: LIGHT lifting up, NIGHT sinking down, the shared letters resolving into separate glyphs.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/slice-type
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders sliced typography that transitions between contrasting color modes.
 * Hovering offsets the letter slices and reveals the alternate word treatment.
 */

import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import {
  animate,
  motion,
  useMotionValue,
  useSpring,
  useTransform,
} from 'framer-motion'
import type { MotionValue } from 'framer-motion'



const DARK_BG = '#0A0A0A'
const LIGHT_BG = '#EFEEE6'
const DARK_FG = '#EFEEE6'
const LIGHT_FG = '#0A0A0A'





function measureLeftInk(char: string, font: string): number {
  try {
    const W = 200, H = 200
    const canvas = document.createElement('canvas')
    canvas.width = W
    canvas.height = H
    const ctx = canvas.getContext('2d')
    if (!ctx) return 0
    ctx.font = font
    ctx.textBaseline = 'alphabetic'
    ctx.fillStyle = '#000'
    ctx.fillText(char, 50, 150) 
    const { data } = ctx.getImageData(0, 0, W, H)
    for (let x = 0; x < W; x++) {
      for (let y = 0; y < H; y++) {
        if (data[(y * W + x) * 4 + 3] > 32) return x - 50
      }
    }
    return 0
  } catch {
    return 0
  }
}

function mix(a: string, b: string, t: number): string {
  const pa = parseInt(a.slice(1), 16)
  const pb = parseInt(b.slice(1), 16)
  const ar = (pa >> 16) & 0xff; const ag = (pa >> 8) & 0xff; const ab = pa & 0xff
  const br = (pb >> 16) & 0xff; const bg = (pb >> 8) & 0xff; const bb = pb & 0xff
  const r = Math.round(ar + (br - ar) * t)
  const g = Math.round(ag + (bg - ag) * t)
  const bl = Math.round(ab + (bb - ab) * t)
  return `#${((r << 16) | (g << 8) | bl).toString(16).padStart(6, '0')}`
}




// customize: replace the paired words below
const WORD_TOP = 'LIGHT'
const WORD_BOTTOM = 'NIGHT'



// tune: raise to separate the slices farther
const OPEN_OFFSET = 0.65


// tune: raise to delay the introductory reveal
const INTRO_DELAY_MS = 700
// tune: raise to hold the introductory reveal longer
const INTRO_HOLD_MS = 1100
const INTRO_PEAK = 0.7
const INTRO_DURATION_S = 0.9

export default function SliceType() {
  const rootRef = useRef<HTMLDivElement>(null)

  const [reducedMotion, setReducedMotion] = useState(false)
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
    const update = () => setReducedMotion(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  
  const engage = useMotionValue(0)
  const engageSmooth = useSpring(engage, { stiffness: 140, damping: 18, mass: 0.9 })

  
  
  const bgColor = useTransform(engageSmooth, (e) => mix(DARK_BG, LIGHT_BG, e))
  const fgColor = useTransform(engageSmooth, (e) => mix(DARK_FG, LIGHT_FG, e))

  
  const topClip = useTransform(engageSmooth, (e) =>
    `inset(0 0 ${50 * (1 - e)}% 0)`,
  )
  const topY = useTransform(engageSmooth, (e) => `${-OPEN_OFFSET * 100 * e}%`)

  
  const botClip = useTransform(engageSmooth, (e) =>
    `inset(${50 * (1 - e)}% 0 0 0)`,
  )
  const botY = useTransform(engageSmooth, (e) => `${OPEN_OFFSET * 100 * e}%`)

  
  
  
  
  
  
  const containerRef = useRef<HTMLDivElement>(null)
  const lRef = useRef<HTMLSpanElement>(null)
  const ightRef = useRef<HTMLSpanElement>(null)

  
  
  
  const naturalLeftMV: MotionValue<number> = useMotionValue(0)
  const nudgeMV: MotionValue<number> = useMotionValue(0)

  useLayoutEffect(() => {
    const container = containerRef.current
    const lEl = lRef.current
    const ightEl = ightRef.current
    if (!container || !lEl || !ightEl) return
    const measure = () => {
      const cRect = container.getBoundingClientRect()
      const lRect = lEl.getBoundingClientRect()
      const iRect = ightEl.getBoundingClientRect()

      naturalLeftMV.set(Math.max(0, iRect.left - cRect.left - lRect.width))

      
      
      
      const computed = window.getComputedStyle(lEl)
      const font = `900 ${computed.fontSize} ${computed.fontFamily}`
      const lInk = measureLeftInk('L', font)
      const nInk = measureLeftInk('N', font)
      
      
      nudgeMV.set(nInk - lInk)
    }
    measure()
    const ro = new ResizeObserver(measure)
    ro.observe(container)
    return () => ro.disconnect()
  }, [naturalLeftMV, nudgeMV])

  
  
  const lX = useTransform(
    [engageSmooth, naturalLeftMV, nudgeMV],
    ([e, natural, nudge]) => {
      const eN = e as number
      return `${(nudge as number) * (1 - eN) + (natural as number) * eN}px`
    },
  )

  
  const didIntro = useRef(false)
  useEffect(() => {
    if (didIntro.current) return
    if (reducedMotion) {
      didIntro.current = true
      return
    }
    didIntro.current = true
    let cancelled = false
    let closeTimer: ReturnType<typeof setTimeout> | null = null

    const startTimer = setTimeout(async () => {
      if (cancelled) return
      const opener = animate(engage, INTRO_PEAK, {
        duration: INTRO_DURATION_S,
        ease: [0.22, 1, 0.36, 1],
      })
      try {
        await opener
      } catch {
        
      }
      if (cancelled) return
      closeTimer = setTimeout(() => {
        if (cancelled) return
        animate(engage, 0, {
          duration: INTRO_DURATION_S,
          ease: [0.32, 0, 0.36, 1],
        })
      }, INTRO_HOLD_MS)
    }, INTRO_DELAY_MS)

    const cancel = () => {
      cancelled = true
      clearTimeout(startTimer)
      if (closeTimer) clearTimeout(closeTimer)
    }
    cancelTeaserRef.current = cancel
    return cancel
  }, [engage, reducedMotion])

  
  const touchOpenRef = useRef(false)

  
  
  const cancelTeaserRef = useRef<(() => void) | null>(null)

  const cancelTeaser = () => {
    cancelTeaserRef.current?.()
    cancelTeaserRef.current = null
  }

  const handlePointerEnter = (e: React.PointerEvent) => {
    if (e.pointerType !== 'mouse') return
    cancelTeaser()
    engage.set(1)
  }
  const handlePointerLeave = (e: React.PointerEvent) => {
    if (e.pointerType !== 'mouse') return
    
    engage.set(0)
  }
  const handlePointerDown = (e: React.PointerEvent) => {
    if (e.pointerType === 'mouse') return
    
    cancelTeaser()
    touchOpenRef.current = !touchOpenRef.current
    engage.set(touchOpenRef.current ? 1 : 0)
  }

  const sharedTextStyle: React.CSSProperties = {
    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
    fontWeight: 900,
    fontSize: 'clamp(3.5rem, 18vw, 11rem)',
    lineHeight: 0.92,
    letterSpacing: '-0.04em',
    color: 'inherit',
    whiteSpace: 'nowrap',
    userSelect: 'none',
  }

  
  
  const TAIL = WORD_TOP.slice(1)

  return (
    <motion.div
      ref={rootRef}
      className="flex min-h-screen w-full items-center justify-center overflow-hidden"
      style={{ backgroundColor: bgColor, color: fgColor, touchAction: 'manipulation', cursor: 'pointer' }}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onPointerDown={handlePointerDown}
    >
      <div
        ref={containerRef}
        className="relative"
        aria-label={`${WORD_TOP} / ${WORD_BOTTOM}`}
      >
        {}
        <span aria-hidden style={{ ...sharedTextStyle, visibility: 'hidden' }}>
          {WORD_BOTTOM}
        </span>

        {}
        <motion.div
          aria-hidden
          style={{
            position: 'absolute',
            inset: 0,
            clipPath: topClip,
            WebkitClipPath: topClip,
            y: topY,
            willChange: 'transform, clip-path',
          }}
        >
          {}
          <motion.span
            ref={lRef}
            style={{
              ...sharedTextStyle,
              position: 'absolute',
              top: 0,
              left: 0,
              x: lX,
              willChange: 'transform',
            }}
          >
            {WORD_TOP.charAt(0)}
          </motion.span>

          {}
          <span
            ref={ightRef}
            style={{
              ...sharedTextStyle,
              position: 'absolute',
              top: 0,
              right: 0,
            }}
          >
            {TAIL}
          </span>
        </motion.div>

        {}
        <motion.span
          aria-hidden
          style={{
            ...sharedTextStyle,
            position: 'absolute',
            inset: 0,
            textAlign: 'right',
            clipPath: botClip,
            WebkitClipPath: botClip,
            y: botY,
            willChange: 'transform, clip-path',
          }}
        >
          {WORD_BOTTOM}
        </motion.span>
      </div>
    </motion.div>
  )
}

```

---

## Halo Type

Category: Typography
Slug: `halo-type`
URL: https://aicanvas.me/components/halo-type

Rotating 3D ring text animation: the front arc reads upright, the back arc upside-down.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/halo-type
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a rotating ring of individually positioned text glyphs.
 * Hover and touch slow the rotation, while reduced motion freezes the ring.
 */

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import {
  motion,
  useAnimationFrame,
  useMotionValue,
  useSpring,
  useTransform,
} from 'framer-motion'

// customize: replace the ring phrase below
const PHRASE = 'COPY ✦ PASTE ✦ SHIP ✦ REPEAT ✦ '

// tune: raise to tilt the ring farther at rest
const TILT_REST = 24
// tune: raise to tilt the ring farther during interaction
const TILT_HOVER = 24
// tune: raise to slow the rotation
const SECONDS_PER_TURN = 14
// tune: raise to preserve more speed during interaction
const SPEED_HOVER = 0.3
// tune: raise to widen the ring
const RADIUS_FRACTION = 0.35
// tune: raise to enlarge the separators
const STAR_SCALE = 0.65

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    const element = ref.current
    if (!element) return
    const read = () => {
      const scope = element.closest('[data-card-theme]') as HTMLElement | null
      if (scope) {
        setTheme(scope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    read()
    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const o = new MutationObserver(read)
      o.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(o)
      current = current.parentElement
    }
    return () => observers.forEach((o) => o.disconnect())
  }, [ref])
  return { theme }
}

export default function HaloType() {
  const rootRef = useRef<HTMLDivElement>(null)
  const wrapRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(rootRef)
  const isDark = theme === 'dark'

  const [size, setSize] = useState(480)
  useLayoutEffect(() => {
    const el = wrapRef.current
    if (!el) return
    const measure = () => {
      const rect = el.getBoundingClientRect()
      setSize(Math.max(260, Math.min(rect.width, rect.height)))
    }
    measure()
    const ro = new ResizeObserver(measure)
    ro.observe(el)
    return () => ro.disconnect()
  }, [])

  const [reducedMotion, setReducedMotion] = useState(false)
  useEffect(() => {
    if (typeof window === 'undefined') return
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
    const update = () => setReducedMotion(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  const engagement = useMotionValue(0)
  const engagementSmooth = useSpring(engagement, {
    stiffness: 120,
    damping: 22,
    mass: 0.6,
  })

  const tilt = useTransform(engagementSmooth, [0, 1], [TILT_REST, TILT_HOVER])
  const speedMul = useTransform(engagementSmooth, [0, 1], [1, SPEED_HOVER])

  const rotateY = useMotionValue(0)
  const prevTs = useRef<number | null>(null)

  const frontRefs = useRef<Array<HTMLSpanElement | null>>([])
  const backRefs = useRef<Array<HTMLSpanElement | null>>([])

  const radius = size * RADIUS_FRACTION
  const fontSize = Math.max(20, Math.min(48, radius * 0.22))
  const circumference = 2 * Math.PI * radius

  const [phraseWidths, setPhraseWidths] = useState<number[]>([])
  const measureRef = useRef<HTMLSpanElement>(null)
  useLayoutEffect(() => {
    if (typeof document === 'undefined') return
    const el = measureRef.current
    if (!el) return
    const measure = () => {
      const spans = el.querySelectorAll<HTMLSpanElement>('[data-m-char]')
      if (!spans.length) return
      const widths = Array.from(spans).map((s) => s.getBoundingClientRect().width)
      setPhraseWidths(widths)
    }
    measure()
    const ro = new ResizeObserver(measure)
    ro.observe(el)
    const fonts = (document as Document & { fonts?: FontFaceSet }).fonts
    if (fonts?.ready) {
      fonts.ready.then(measure)
    }
    return () => ro.disconnect()
  }, [fontSize])

  const phraseWidth = phraseWidths.reduce((a, b) => a + b, 0)
  const repeats = phraseWidth > 0
    ? Math.max(1, Math.round(circumference / phraseWidth))
    : Math.max(1, Math.round(circumference / (PHRASE.length * fontSize * 0.55)))
  const characters = PHRASE.repeat(repeats).split('')
  const totalChars = characters.length
  const totalTiledWidth = phraseWidth * repeats
  const charAngles: number[] = []
  if (totalTiledWidth > 0) {
    let cum = 0
    characters.forEach((_, i) => {
      const w = phraseWidths[i % PHRASE.length] ?? 0
      charAngles.push(((cum + w / 2) / totalTiledWidth) * 360)
      cum += w
    })
  } else {
    for (let i = 0; i < totalChars; i++) {
      charAngles.push((i / totalChars) * 360)
    }
  }

  useAnimationFrame((t) => {
    if (reducedMotion) {
      rotateY.set(30)
    } else {
      const last = prevTs.current
      prevTs.current = t
      if (last != null) {
        const dt = (t - last) / 1000
        const degPerSec = 360 / SECONDS_PER_TURN
        const next = rotateY.get() + degPerSec * speedMul.get() * dt
        rotateY.set(next % 360)
      }
    }
    const ry = rotateY.get()
    for (let i = 0; i < charAngles.length; i++) {
      const eff = ((ry + charAngles[i]) % 360 + 360) % 360
      const norm = eff > 180 ? eff - 360 : eff
      const c = Math.cos((norm * Math.PI) / 180)
      const frontOp = c > 0 ? c : 0
      const backOp = c < 0 ? -c : 0
      const fe = frontRefs.current[i]
      const be = backRefs.current[i]
      if (fe) fe.style.opacity = String(frontOp)
      if (be) be.style.opacity = String(backOp)
    }
  })

  const bg = isDark ? '#0A0A0A' : '#F5F1E8'
  const fg = isDark ? '#F5F1E8' : '#0A0A0A'
  const fgBack = isDark ? '#7A756C' : '#6A655C'
  const vignette = isDark
    ? `radial-gradient(60% ${size * 0.6}px at 50% 52%, rgba(245,241,232,0.10) 0%, rgba(245,241,232,0.04) 35%, rgba(10,10,10,0) 70%)`
    : `radial-gradient(60% ${size * 0.6}px at 50% 52%, rgba(10,10,10,0.08) 0%, rgba(10,10,10,0.03) 35%, rgba(245,241,232,0) 70%)`

  const handleEngage = () => engagement.set(1)
  const handleRelease = () => engagement.set(0)

  const ringTransform = useTransform(
    [tilt, rotateY],
    ([x, y]) => `rotateX(${x}deg) rotateY(${y}deg)`,
  )

  const edgeMask =
    'linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%)'

  return (
    <div
      ref={rootRef}
      className="flex min-h-screen w-full justify-center"
      style={{ backgroundColor: bg }}
    >
      <div
        ref={wrapRef}
        className="relative flex w-full items-center justify-center overflow-hidden"
        style={{
          maskImage: edgeMask,
          WebkitMaskImage: edgeMask,
        }}
        onPointerEnter={handleEngage}
        onPointerLeave={handleRelease}
        onPointerDown={handleEngage}
        onPointerUp={handleRelease}
        onPointerCancel={handleRelease}
      >
        {}
        <div
          aria-hidden
          style={{
            position: 'absolute',
            inset: 0,
            background: vignette,
            pointerEvents: 'none',
          }}
        />

        {}
        <span
          ref={measureRef}
          aria-hidden
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            visibility: 'hidden',
            pointerEvents: 'none',
            whiteSpace: 'pre',
            fontFamily:
              'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
            fontWeight: 800,
            lineHeight: 1,
            letterSpacing: '-0.01em',
          }}
        >
          {PHRASE.split('').map((ch, i) => (
            <span
              key={i}
              data-m-char=""
              style={{
                display: 'inline-block',
                whiteSpace: 'pre',
                fontSize: ch === '✦' ? fontSize * STAR_SCALE : fontSize,
              }}
            >
              {ch}
            </span>
          ))}
        </span>

        {}
        <div
          style={{
            perspective: '1200px',
            perspectiveOrigin: '50% 50%',
            width: size,
            height: size,
            position: 'relative',
          }}
        >
          <motion.div
            aria-label={PHRASE.trim()}
            style={{
              position: 'absolute',
              inset: 0,
              transformStyle: 'preserve-3d',
              transform: ringTransform,
              willChange: 'transform',
            }}
          >
            {characters.map((ch, i) => {
              const angle = charAngles[i] ?? (i / totalChars) * 360
              const display = ch === ' ' ? ' ' : ch
              const base = `translate(-50%, -50%) rotateY(${angle}deg) translateZ(${radius}px)`
              const glyphSize = ch === '✦' ? fontSize * STAR_SCALE : fontSize
              const glyphStyle: React.CSSProperties = {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transformOrigin: '50% 50%',
                fontFamily:
                  'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
                fontWeight: 800,
                fontSize: glyphSize,
                lineHeight: 1,
                letterSpacing: '-0.01em',
                userSelect: 'none',
                whiteSpace: 'pre',
              }
              return (
                <React.Fragment key={i}>
                  {}
                  <span
                    ref={(el) => {
                      frontRefs.current[i] = el
                    }}
                    style={{
                      ...glyphStyle,
                      transform: base,
                      color: fg,
                    }}
                  >
                    {display}
                  </span>
                  {}
                  <span
                    ref={(el) => {
                      backRefs.current[i] = el
                    }}
                    style={{
                      ...glyphStyle,
                      transform: `${base} rotateY(180deg) rotateZ(180deg)`,
                      color: fgBack,
                    }}
                  >
                    {display}
                  </span>
                </React.Fragment>
              )
            })}
          </motion.div>
        </div>
      </div>
    </div>
  )
}

```

---

## Orbit

Category: Typography
Slug: `orbit`
URL: https://aicanvas.me/components/orbit

Kinetic text animation arranged in a circle. Hover slows the spin; letters push outward.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/orbit
```

```tsx
'use client'

// npm install next
// font: Anton
/**
 * Displays text arranged around a responsive elliptical orbit.
 * Pointer movement shifts the ring perspective and its central marker.
 */

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Anton } from 'next/font/google'

const anton = Anton({ subsets: ['latin'], weight: '400' })

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const readTheme = () => {
      const cardScope = element.closest('[data-card-theme]') as HTMLElement | null
      if (cardScope) {
        setTheme(cardScope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    readTheme()

    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const observer = new MutationObserver(readTheme)
      observer.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(observer)
      current = current.parentElement
    }

    return () => observers.forEach((o) => o.disconnect())
  }, [ref])

  return { theme }
}

// customize: replace the orbit phrase below
const BASE_TEXT = 'KEEP MOVING • KEEP MOVING • '
const FULL_TEXT = BASE_TEXT + BASE_TEXT
const LETTERS = FULL_TEXT.split('')
const TOTAL = LETTERS.length

const INFLUENCE_RADIUS = 400
const MAX_SCALE = 1.5
const MAX_PUSH = 22
const EASE_ACTIVE = 0.15
const EASE_EXIT = 0.05
const SPEED_NORMAL = 0.3
const SPEED_SLOW = 0.075
const SPEED_EASE = 0.03
const TEXT_RADIUS_RATIO = 0.88

export default function Orbit() {
  const containerRef = useRef<HTMLDivElement>(null)
  const wheelRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(containerRef)
  const isDark = theme === 'dark'

  const letterRefs = useRef<(HTMLSpanElement | null)[]>([])
  const starRef = useRef<HTMLDivElement>(null)
  const mouseRef = useRef<{ x: number; y: number } | null>(null)
  const animIdRef = useRef<number>(0)
  const aliveRef = useRef(true)
  const isHoveredRef = useRef(false)
  const rotationRef = useRef(0)
  const speedRef = useRef(SPEED_NORMAL)
  const stateRef = useRef(LETTERS.map(() => ({ scale: 1, pushX: 0, pushY: 0 })))
  const [size, setSize] = useState(400)

  useLayoutEffect(() => {
    const el = wheelRef.current
    if (!el) return
    setSize(el.offsetWidth)

    const ro = new ResizeObserver(() => {
      setSize(el.offsetWidth)
    })
    ro.observe(el)
    return () => ro.disconnect()
  }, [])

  useEffect(() => {
    aliveRef.current = true

    function animate() {
      if (!aliveRef.current) return

      const wheel = wheelRef.current
      if (wheel) {
        const targetSpeed = isHoveredRef.current ? SPEED_SLOW : SPEED_NORMAL
        speedRef.current += (targetSpeed - speedRef.current) * SPEED_EASE
        rotationRef.current += speedRef.current
        wheel.style.transform = `rotate(${rotationRef.current}deg)`
      }

      const star = starRef.current
      if (star) {
        star.style.transform = `translate(-50%, -50%) rotate(${-rotationRef.current * 1.5}deg)`
      }

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const isExiting = !mouseRef.current

      const wheelEl = wheelRef.current
      const wheelRect = wheelEl?.getBoundingClientRect()
      const wheelCx = wheelRect ? wheelRect.left + wheelRect.width / 2 : 0
      const wheelCy = wheelRect ? wheelRect.top + wheelRect.height / 2 : 0

      LETTERS.forEach((_, i) => {
        const el = letterRefs.current[i]
        if (!el) return

        const rect = el.getBoundingClientRect()
        const lx = rect.left + rect.width / 2
        const ly = rect.top + rect.height / 2
        const dx = lx - mx
        const dy = ly - my
        const dist = Math.sqrt(dx * dx + dy * dy)

        let influence = 0
        if (dist < INFLUENCE_RADIUS) {
          influence = 1 - dist / INFLUENCE_RADIUS
          influence = influence * influence * (3 - 2 * influence)
        }

        const targetScale = 1 + (MAX_SCALE - 1) * influence

        const rdx = lx - wheelCx
        const rdy = ly - wheelCy
        const rlen = Math.sqrt(rdx * rdx + rdy * rdy) || 1
        const targetPushX = (rdx / rlen) * MAX_PUSH * influence
        const targetPushY = (rdy / rlen) * MAX_PUSH * influence

        const state = stateRef.current[i]
        const easing = isExiting ? EASE_EXIT : EASE_ACTIVE

        state.scale += (targetScale - state.scale) * easing
        state.pushX += (targetPushX - state.pushX) * easing
        state.pushY += (targetPushY - state.pushY) * easing

        el.style.setProperty('--scale', state.scale.toFixed(3))
        el.style.setProperty('--push-x', `${state.pushX.toFixed(2)}px`)
        el.style.setProperty('--push-y', `${state.pushY.toFixed(2)}px`)
      })

      animIdRef.current = requestAnimationFrame(animate)
    }

    animate()
    return () => {
      aliveRef.current = false
      cancelAnimationFrame(animIdRef.current)
    }
  }, [])

  const bgColor = isDark ? '#1A1A19' : '#E8E8DF'
  const textColor = isDark ? '#E8E8DF' : '#1A1A19'
  const radius = size / 2
  const textRadius = radius * TEXT_RADIUS_RATIO
  const fontSize = Math.max(8, size * 0.076)

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ backgroundColor: bgColor }}
      onMouseMove={(e) => {
        mouseRef.current = { x: e.clientX, y: e.clientY }
        isHoveredRef.current = true
      }}
      onMouseLeave={() => {
        mouseRef.current = null
        isHoveredRef.current = false
      }}
      onTouchStart={(e) => {
        const touch = e.touches[0]
        if (touch) {
          mouseRef.current = { x: touch.clientX, y: touch.clientY }
          isHoveredRef.current = true
        }
      }}
      onTouchMove={(e) => {
        const touch = e.touches[0]
        if (touch) {
          mouseRef.current = { x: touch.clientX, y: touch.clientY }
          isHoveredRef.current = true
        }
      }}
      onTouchEnd={() => {
        setTimeout(() => {
          mouseRef.current = null
          isHoveredRef.current = false
        }, 600)
      }}
    >
      <div style={{ position: 'relative', flexShrink: 0 }}>
      <div
        ref={wheelRef}
        className={anton.className}
        style={{
          position: 'relative',
          width: 'clamp(200px, 48vw, 420px)',
          height: 'clamp(200px, 48vw, 420px)',
          flexShrink: 0,
        }}
      >
        {LETTERS.map((letter, i) => {
          const angle = (i / TOTAL) * 2 * Math.PI - Math.PI / 2
          const x = radius + textRadius * Math.cos(angle)
          const y = radius + textRadius * Math.sin(angle)
          const rotDeg = (angle * 180) / Math.PI + 90

          return (
            <span
              key={i}
              style={{
                position: 'absolute',
                left: x,
                top: y,
                transform: `translate(-50%, -50%) rotate(${rotDeg}deg)`,
              }}
            >
              <span
                ref={(el) => {
                  letterRefs.current[i] = el
                }}
                style={{
                  display: 'inline-block',
                  fontSize,
                  lineHeight: 1,
                  color: textColor,
                  transform:
                    'translate(var(--push-x, 0px), var(--push-y, 0px)) scale(var(--scale, 1))',
                  willChange: 'transform',
                  userSelect: 'none',
                }}
              >
                {letter}
              </span>
            </span>
          )
        })}
      </div>
      <div
        ref={starRef}
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 6,
          willChange: 'transform',
        }}
      >
        {[0, 1, 2, 3].map((i) => (
          <div
            key={i}
            style={{ width: 4, height: 4, borderRadius: '50%', backgroundColor: textColor }}
          />
        ))}
      </div>
      </div>
    </div>
  )
}

```

---

## Wild Morph

Category: Typography
Slug: `wild-morph`
URL: https://aicanvas.me/components/wild-morph

Italic SVG word that warps under the cursor, a spring-physics text animation.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/wild-morph
```

```tsx
'use client'
// npm install framer-motion
// font: Anton
/**
 * Renders a word whose corners warp through a matrix transform.
 * Pointer position selects an upper or lower deformation before easing back at rest.
 */


import { useEffect, useRef, useState } from 'react'
import React from 'react'
import {
  animate,
  useMotionValue,
  useMotionValueEvent,
} from 'framer-motion'
import type { AnimationPlaybackControls, MotionValue } from 'framer-motion'






















const DARK_BG = '#1a1a19'
const LIGHT_BG = '#efeee6'

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const readTheme = () => {
      const cardScope = element.closest('[data-card-theme]') as HTMLElement | null
      if (cardScope) {
        setTheme(cardScope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    readTheme()

    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const observer = new MutationObserver(readTheme)
      observer.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(observer)
      current = current.parentElement
    }

    return () => observers.forEach((o) => o.disconnect())
  }, [ref])

  return { theme }
}



const ENTER_SPRING = { type: 'spring', stiffness: 280, damping: 14, mass: 1.8 } as const


const RETURN_SPRING = { type: 'spring', stiffness: 280, damping: 16, mass: 1.8 } as const


























type Pt = readonly [number, number]

function solve8(
  A: number[][], 
  b: number[], 
): number[] {
  
  const n = 8
  const M: number[][] = A.map((row, i) => [...row, b[i]])

  for (let col = 0; col < n; col++) {
    
    let pivot = col
    let maxAbs = Math.abs(M[col][col])
    for (let r = col + 1; r < n; r++) {
      const v = Math.abs(M[r][col])
      if (v > maxAbs) {
        maxAbs = v
        pivot = r
      }
    }
    if (maxAbs < 1e-12) {
      
      return [1, 0, 0, 1, 0, 0, 0, 0]
    }
    if (pivot !== col) {
      const tmp = M[col]
      M[col] = M[pivot]
      M[pivot] = tmp
    }
    
    const p = M[col][col]
    for (let c = col; c <= n; c++) M[col][c] /= p
    
    for (let r = 0; r < n; r++) {
      if (r === col) continue
      const factor = M[r][col]
      if (factor === 0) continue
      for (let c = col; c <= n; c++) {
        M[r][c] -= factor * M[col][c]
      }
    }
  }

  const x: number[] = new Array(n)
  for (let i = 0; i < n; i++) x[i] = M[i][n]
  return x
}

function cornerPinMatrix3d(
  tl: Pt,
  tr: Pt,
  br: Pt,
  bl: Pt,
  w: number,
  h: number,
): string {
  
  const src: readonly Pt[] = [
    [0, 0],
    [w, 0],
    [w, h],
    [0, h],
  ] as const
  const dst: readonly Pt[] = [tl, tr, br, bl] as const

  
  const A: number[][] = []
  const rhs: number[] = []

  for (let i = 0; i < 4; i++) {
    const [u, v] = src[i]
    const [x, y] = dst[i]
    
    A.push([u, 0, v, 0, 1, 0, -u * x, -v * x])
    rhs.push(x)
    
    A.push([0, u, 0, v, 0, 1, -u * y, -v * y])
    rhs.push(y)
  }

  const [a, b, c, d, e, f, g, hh] = solve8(A, rhs)

  
  
  
  
  
  
  
  
  return `matrix3d(${a},${b},0,${g},${c},${d},0,${hh},0,0,1,0,${e},${f},0,1)`
}





// tune: increase the magnitudes below to strengthen the corner warp
const X_OUTER_LEFT = -1.0 
const X_OUTER_RIGHT = 1.05 
const Y_LEFT_MAG = 1.55 
const Y_RIGHT_MAG = 1.48 





type Mode = 'none' | 'top' | 'bottom'



type Offsets8 = readonly [
  number,
  number,
  number,
  number,
  number,
  number,
  number,
  number,
]


function targetsFor(mode: Mode, w: number, h: number): Offsets8 {
  if (mode === 'top') {
    return [
      X_OUTER_LEFT * w, 
      -Y_LEFT_MAG * h, 
      X_OUTER_RIGHT * w, 
      -Y_RIGHT_MAG * h, 
      0,
      0, 
      0,
      0, 
    ] as const
  }
  if (mode === 'bottom') {
    return [
      0,
      0, 
      0,
      0, 
      X_OUTER_LEFT * w, 
      Y_LEFT_MAG * h, 
      X_OUTER_RIGHT * w, 
      Y_RIGHT_MAG * h, 
    ] as const
  }
  return [0, 0, 0, 0, 0, 0, 0, 0] as const
}

export default function WildMorph({ text = 'wild' }: { text?: string }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(containerRef)
  const isDark = theme === 'dark'
  const bgColor = isDark ? DARK_BG : LIGHT_BG
  const inkColor = isDark ? LIGHT_BG : DARK_BG

  
  
  const tlX: MotionValue<number> = useMotionValue(0)
  const tlY: MotionValue<number> = useMotionValue(0)
  const trX: MotionValue<number> = useMotionValue(0)
  const trY: MotionValue<number> = useMotionValue(0)
  const blX: MotionValue<number> = useMotionValue(0)
  const blY: MotionValue<number> = useMotionValue(0)
  const brX: MotionValue<number> = useMotionValue(0)
  const brY: MotionValue<number> = useMotionValue(0)

  
  const warpRef = useRef<HTMLDivElement>(null)
  
  const panelRef = useRef<HTMLDivElement>(null)
  
  const svgRef = useRef<SVGSVGElement>(null)
  const textRef = useRef<SVGTextElement>(null)

  
  
  const sizeRef = useRef<{ w: number; h: number }>({ w: 1, h: 1 })

  
  
  const controlsRef = useRef<AnimationPlaybackControls[]>([])

  
  
  const modeRef = useRef<Mode>('none')

  
  
  const [natural, setNatural] = useState({ width: 1, height: 1, ascent: 1 })

  
  const [fontSize, setFontSize] = useState(144)

  
  useEffect(() => {
    const update = () => {
      const vw = window.innerWidth
      const clamped = Math.min(Math.max(vw * 0.12, 64), 144)
      setFontSize(clamped)
    }
    update()
    window.addEventListener('resize', update)
    return () => window.removeEventListener('resize', update)
  }, [])

  
  useEffect(() => {
    const el = textRef.current
    if (!el) return
    const bbox = el.getBBox()
    if (bbox.width === 0) return
    setNatural({
      width: bbox.width,
      height: bbox.height,
      ascent: -bbox.y, 
    })
  }, [fontSize, text])

  
  const applyTransform = () => {
    const el = warpRef.current
    if (!el) return
    const { w, h } = sizeRef.current

    const tl: Pt = [0 + tlX.get(), 0 + tlY.get()]
    const tr: Pt = [w + trX.get(), 0 + trY.get()]
    const br: Pt = [w + brX.get(), h + brY.get()]
    const bl: Pt = [0 + blX.get(), h + blY.get()]

    el.style.transform = cornerPinMatrix3d(tl, tr, br, bl, w, h)
  }

  
  useEffect(() => {
    if (natural.width > 1 && natural.height > 1) {
      sizeRef.current = { w: natural.width, h: natural.height }
      applyTransform()
    }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [natural])

  
  
  
  useEffect(() => {
    const el = warpRef.current
    if (!el) return

    const update = () => {
      const w = el.offsetWidth
      const h = el.offsetHeight
      if (w > 0 && h > 0) {
        sizeRef.current = { w, h }
        
        
        applyTransform()
      }
    }

    const ro = new ResizeObserver(update)
    ro.observe(el)
    update()

    return () => ro.disconnect()
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  
  
  useMotionValueEvent(tlX, 'change', applyTransform)
  useMotionValueEvent(tlY, 'change', applyTransform)
  useMotionValueEvent(trX, 'change', applyTransform)
  useMotionValueEvent(trY, 'change', applyTransform)
  useMotionValueEvent(blX, 'change', applyTransform)
  useMotionValueEvent(blY, 'change', applyTransform)
  useMotionValueEvent(brX, 'change', applyTransform)
  useMotionValueEvent(brY, 'change', applyTransform)

  
  const stopAll = () => {
    for (const c of controlsRef.current) c.stop()
    controlsRef.current = []
  }

  
  
  const applyMode = (next: Mode) => {
    if (next === modeRef.current) return
    modeRef.current = next

    
    
    
    
    if (warpRef.current) {
      warpRef.current.style.transformOrigin = '0 0'
    }

    stopAll()

    const { w, h } = sizeRef.current
    const targets = targetsFor(next, w, h)

    
    
    const opts = next === 'none' ? RETURN_SPRING : ENTER_SPRING

    controlsRef.current = [
      animate(tlX, targets[0], opts),
      animate(tlY, targets[1], opts),
      animate(trX, targets[2], opts),
      animate(trY, targets[3], opts),
      animate(blX, targets[4], opts),
      animate(blY, targets[5], opts),
      animate(brX, targets[6], opts),
      animate(brY, targets[7], opts),
    ]
  }

  
  useEffect(() => {
    return () => stopAll()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  
  
  const modeFromClientY = (clientY: number): Mode => {
    const el = panelRef.current
    if (!el) return 'none'
    const rect = el.getBoundingClientRect()
    if (clientY < rect.top || clientY > rect.bottom) return 'none'
    return clientY < rect.top + rect.height / 2 ? 'top' : 'bottom'
  }

  
  
  
  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    e.currentTarget.setPointerCapture(e.pointerId)
    applyMode(modeFromClientY(e.clientY))
  }

  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    applyMode(modeFromClientY(e.clientY))
  }

  const onPointerUp = () => applyMode('none')
  const onPointerLeave = () => applyMode('none')
  const onPointerCancel = () => applyMode('none')

  return (
    <div
      ref={(el) => {
        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
        (panelRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
      }}
      className="relative flex min-h-screen w-full select-none items-center justify-center"
      style={{
        backgroundColor: bgColor,
        perspective: '1400px',
        perspectiveOrigin: '50% 50%',
        cursor: 'crosshair',
        touchAction: 'none',
      }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerLeave={onPointerLeave}
      onPointerCancel={onPointerCancel}
    >
      <style>{`@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`}</style>

      <div
        ref={warpRef}
        className="relative"
        style={{
          transformOrigin: '0 0',
          willChange: 'transform',
          display: 'inline-block',
        }}
      >
        <svg
          ref={svgRef}
          style={{ display: 'block', overflow: 'visible' }}
          width={natural.width}
          height={natural.height}
        >
          <text
            ref={textRef}
            x={0}
            y={natural.ascent}
            fontFamily='Anton, "Arial Narrow", Impact, sans-serif'
            fontStyle="italic"
            fontWeight={400}
            fontSize={fontSize}
            letterSpacing="-0.02em"
            fill={inkColor}
          >
            {text}
          </text>
        </svg>
      </div>
    </div>
  )
}

```

---

## Playful

Category: Typography
Slug: `playful`
URL: https://aicanvas.me/components/playful

Kinetic typography where letters jump, drop, and rotate on cursor proximity.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/playful
```

```tsx
'use client'

// npm install framer-motion next
// font: Science Gothic
/**
 * Renders variable-font lettering that responds to pointer proximity.
 * Nearby glyphs change width, weight, and position as the pointer moves.
 */

import React, { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion'
import { Science_Gothic } from 'next/font/google'

const scienceGothic = Science_Gothic({ subsets: ['latin'] })

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const readTheme = () => {
      const cardScope = element.closest('[data-card-theme]') as HTMLElement | null
      if (cardScope) {
        setTheme(cardScope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    readTheme()

    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const observer = new MutationObserver(readTheme)
      observer.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(observer)
      current = current.parentElement
    }

    return () => observers.forEach((o) => o.disconnect())
  }, [ref])

  return { theme }
}

interface LetterSpanProps {
  letter: string
  textColor: string
  fontFamily: string
  textShadow: string
  forwardedRef: React.Ref<HTMLSpanElement>
}

const LetterSpanComponent = ({ letter, textColor, fontFamily, textShadow, forwardedRef }: LetterSpanProps) => {
  const spanRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    if (forwardedRef) {
      if (typeof forwardedRef === 'function') {
        forwardedRef(spanRef.current)
      } else {
        forwardedRef.current = spanRef.current
      }
    }
  }, [forwardedRef])

  return (
    <span
      ref={spanRef}
      className={`inline-block select-none ${textColor}`}
      style={{
        fontSize: 'clamp(1.6rem, 16vw, 9.6rem)',
        fontWeight: 700,
        fontFamily,
        lineHeight: 1,
        textShadow,
        transform:
          'translateY(var(--translate-y, 0px)) rotate(var(--rotate, 0deg)) scale(var(--scale, 1))',
        transformOrigin: 'center',
        willChange: 'transform',
      }}
    >
      {letter}
    </span>
  )
}

const LetterSpan = motion(LetterSpanComponent)


// customize: replace the two text rows below
const TEXT_ROW_1 = 'STAY'
const TEXT_ROW_2 = 'WEIRD'
const ALL_LETTERS = TEXT_ROW_1 + TEXT_ROW_2
// tune: raise to widen pointer influence
const INFLUENCE_RADIUS = 600
// tune: raise to increase maximum glyph rotation
const MAX_ROTATION = 75
// tune: raise to increase vertical glyph travel
const MAX_TRANSLATE_Y = 100
// tune: raise to enlarge nearby glyphs further
const MAX_SCALE = 1.4
const MIN_SCALE = 1
// tune: raise to quicken the active response
const EASE_ACTIVE = 0.15
// tune: raise to quicken the return to rest
const EASE_EXIT = 0.05

export default function Playful() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(containerRef)
  const isDark = theme === 'dark'
  const lettersRef = useRef<(HTMLSpanElement | null)[]>([])
  const mouseRef = useRef<{ x: number; y: number } | null>(null)
  const animIdRef = useRef<number>(0)
  const aliveRef = useRef(true)

  const stateRef = useRef<
    Array<{
      rotate: number
      translateY: number
      scale: number
    }>
  >([])

  useEffect(() => {
    aliveRef.current = true
    const container = containerRef.current
    if (!container) return

    ALL_LETTERS.split('').forEach((_, i) => {
      if (!stateRef.current[i]) {
        stateRef.current[i] = {
          rotate: 0,
          translateY: 0,
          scale: MIN_SCALE,
        }
      }
    })

    function animate() {
      if (!aliveRef.current) return

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const isExiting = !mouseRef.current

      ALL_LETTERS.split('').forEach((_, i) => {
        const letterEl = lettersRef.current[i]
        if (!letterEl) return

        const rect = letterEl.getBoundingClientRect()
        const letterCenterX = rect.left + rect.width / 2
        const letterCenterY = rect.top + rect.height / 2

        const dx = letterCenterX - mx
        const dy = letterCenterY - my
        const dist = Math.sqrt(dx * dx + dy * dy)

        let influence = 0
        if (dist < INFLUENCE_RADIUS) {
          influence = 1 - dist / INFLUENCE_RADIUS
          influence = influence * influence * (3 - 2 * influence)
        }

        
        let targetRotate = 0
        if (influence > 0) {
          const angle = Math.atan2(dy, dx)
          const rotateDirection = Math.sin(angle)
          targetRotate = MAX_ROTATION * influence * rotateDirection
        }

        
        const direction = i % 2 === 0 ? -1 : 1
        const targetTranslateY = MAX_TRANSLATE_Y * influence * direction

        
        const targetScale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * influence

        const state = stateRef.current[i]
        const easing = isExiting ? EASE_EXIT : EASE_ACTIVE

        state.rotate += (targetRotate - state.rotate) * easing
        state.translateY += (targetTranslateY - state.translateY) * easing
        state.scale += (targetScale - state.scale) * easing

        letterEl.style.setProperty('--rotate', `${state.rotate.toFixed(2)}deg`)
        letterEl.style.setProperty('--translate-y', `${state.translateY.toFixed(2)}px`)
        letterEl.style.setProperty('--scale', state.scale.toFixed(3))
      })

      animIdRef.current = requestAnimationFrame(animate)
    }

    animate()

    return () => {
      aliveRef.current = false
      if (animIdRef.current) cancelAnimationFrame(animIdRef.current)
    }
  }, [])

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    mouseRef.current = { x: e.clientX, y: e.clientY }
  }

  function handleMouseLeave() {
    mouseRef.current = null
  }

  function handleTouchStart(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchEnd() {
    setTimeout(() => {
      mouseRef.current = null
    }, 600)
  }

  const bgColor = isDark ? '#1A1A19' : '#869631'
  const textColor = isDark ? 'text-[#869631]' : 'text-[#1A1A19]'
  const textShadow = isDark
    ? '2px 2px 0 rgba(0, 0, 0, 0.85)'
    : '2px 2px 0 rgba(0, 0, 0, 0.25)'

  return (
    <div
      ref={containerRef}
      className={`flex min-h-screen w-full flex-col items-center justify-center px-6 sm:px-10 ${scienceGothic.className}`}
      style={{ backgroundColor: bgColor }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div className="flex flex-col items-center justify-center gap-2 sm:gap-4">
        <div className="flex flex-nowrap items-center justify-center gap-1 sm:gap-2">
          {TEXT_ROW_1.split('').map((letter, i) => (
            <LetterSpan
              key={i}
              letter={letter}
              forwardedRef={(el) => {
                if (el) lettersRef.current[i] = el
              }}
              textColor={textColor}
              textShadow={textShadow}
              fontFamily={scienceGothic.style.fontFamily}
            />
          ))}
        </div>
        <div className="flex flex-nowrap items-center justify-center gap-1 sm:gap-2">
          {TEXT_ROW_2.split('').map((letter, i) => (
            <LetterSpan
              key={i + TEXT_ROW_1.length}
              letter={letter}
              forwardedRef={(el) => {
                if (el) lettersRef.current[i + TEXT_ROW_1.length] = el
              }}
              textColor={textColor}
              textShadow={textShadow}
              fontFamily={scienceGothic.style.fontFamily}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

```

---

## Good Vibes

Category: Typography
Slug: `good-vibes`
URL: https://aicanvas.me/components/good-vibes

Interactive typography where letters scale 2x and become bold on hover.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/good-vibes
```

```tsx
'use client'

// npm install framer-motion next
// font: Science Gothic
/**
 * Renders variable-font text whose glyphs react to pointer and touch proximity.
 * Nearby letters gain weight, scale, and spacing with eased falloff.
 */

import React, { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion'
import { Science_Gothic } from 'next/font/google'

const scienceGothic = Science_Gothic({ subsets: ['latin'] })

function useTheme(ref: React.RefObject<HTMLElement | null>) {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const readTheme = () => {
      const cardScope = element.closest('[data-card-theme]') as HTMLElement | null
      if (cardScope) {
        setTheme(cardScope.dataset.cardTheme === 'dark' ? 'dark' : 'light')
        return
      }
      setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
    }
    readTheme()

    const observers: MutationObserver[] = []
    let current: HTMLElement | null = element
    while (current) {
      const observer = new MutationObserver(readTheme)
      observer.observe(current, { attributes: true, attributeFilter: ['class', 'data-card-theme'] })
      observers.push(observer)
      current = current.parentElement
    }

    return () => observers.forEach((o) => o.disconnect())
  }, [ref])

  return { theme }
}

interface LetterSpanProps {
  letter: string
  textColor: string
  fontFamily: string
  forwardedRef: React.Ref<HTMLSpanElement>
}

const LetterSpanComponent = ({ letter, textColor, fontFamily, forwardedRef }: LetterSpanProps) => {
  const spanRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    if (forwardedRef) {
      if (typeof forwardedRef === 'function') {
        forwardedRef(spanRef.current)
      } else {
        forwardedRef.current = spanRef.current
      }
    }
  }, [forwardedRef])

  return (
    <span
      ref={spanRef}
      className={`inline-block select-none ${textColor}`}
      style={{
        fontSize: 'clamp(1.25rem, 7vw, 5rem)',
        fontWeight: 'var(--font-weight, 100)',
        fontFamily,
        lineHeight: 1,
        letterSpacing: 'var(--letter-spacing, 0em)',
        transform: 'scale(var(--scale, 1))',
        transformOrigin: 'center',
      }}
    >
      {letter}
    </span>
  )
}

const LetterSpan = motion(LetterSpanComponent)

// customize: change the text and pointer response values below
const TEXT = 'GOOD VIBES'
const INFLUENCE_RADIUS = 300
const MAX_WEIGHT = 700
const MIN_WEIGHT = 100
const MAX_SCALE = 2
const MIN_SCALE = 1
const MAX_LETTER_SPACING = 0.3
const MIN_LETTER_SPACING = 0
const EASE_DURATION = 0.15

export default function GoodVibes() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(containerRef)
  const isDark = theme === 'dark'
  const lettersRef = useRef<(HTMLSpanElement | null)[]>([])
  const mouseRef = useRef<{ x: number; y: number } | null>(null)
  const animIdRef = useRef<number>(0)
  const aliveRef = useRef(true)

  const stateRef = useRef<
    Array<{
      weight: number
      scale: number
      letterSpacing: number
    }>
  >([])

  useEffect(() => {
    aliveRef.current = true
    const container = containerRef.current
    if (!container) return

    TEXT.split('').forEach((_, i) => {
      if (!stateRef.current[i]) {
        stateRef.current[i] = {
          weight: MIN_WEIGHT,
          scale: MIN_SCALE,
          letterSpacing: MIN_LETTER_SPACING,
        }
      }
    })

    function animate() {
      if (!aliveRef.current) return

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const isExiting = !mouseRef.current

      TEXT.split('').forEach((_, i) => {
        const letterEl = lettersRef.current[i]
        if (!letterEl) return

        const rect = letterEl.getBoundingClientRect()
        const letterCenterX = rect.left + rect.width / 2
        const letterCenterY = rect.top + rect.height / 2

        const dx = letterCenterX - mx
        const dy = letterCenterY - my
        const dist = Math.sqrt(dx * dx + dy * dy)

        let influence = 0
        if (dist < INFLUENCE_RADIUS) {
          influence = 1 - dist / INFLUENCE_RADIUS
          influence = influence * influence * (3 - 2 * influence)
        }

        const targetWeight = MIN_WEIGHT + (MAX_WEIGHT - MIN_WEIGHT) * influence
        const targetScale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * influence
        const targetLetterSpacing = MIN_LETTER_SPACING + (MAX_LETTER_SPACING - MIN_LETTER_SPACING) * influence

        const state = stateRef.current[i]
        const easing = isExiting ? 0.05 : EASE_DURATION

        state.weight += (targetWeight - state.weight) * easing
        state.scale += (targetScale - state.scale) * easing
        state.letterSpacing += (targetLetterSpacing - state.letterSpacing) * easing

        letterEl.style.setProperty('--font-weight', Math.round(state.weight).toString())
        letterEl.style.setProperty('--scale', state.scale.toFixed(3))
        letterEl.style.setProperty('--letter-spacing', `${state.letterSpacing.toFixed(3)}em`)
      })

      animIdRef.current = requestAnimationFrame(animate)
    }

    animate()

    return () => {
      aliveRef.current = false
      if (animIdRef.current) cancelAnimationFrame(animIdRef.current)
    }
  }, [])

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    mouseRef.current = { x: e.clientX, y: e.clientY }
  }

  function handleMouseLeave() {
    mouseRef.current = null
  }

  function handleTouchStart(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchEnd() {
    setTimeout(() => {
      mouseRef.current = null
    }, 600)
  }

  const bgColor = isDark ? '#1a1a1a' : '#f5f5f5'
  const textColor = isDark ? 'text-[#ed7550]' : 'text-[#ed7550]'

  return (
    <div
      ref={containerRef}
      className={`flex min-h-screen w-full flex-col items-center justify-center gap-8 px-6 sm:px-10 ${scienceGothic.className}`}
      style={{ backgroundColor: bgColor }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div className="flex flex-nowrap items-center justify-center gap-1 sm:gap-4">
        {TEXT.split('').map((letter, i) => (
          <LetterSpan
            key={i}
            letter={letter}
            forwardedRef={(el) => {
              if (el) lettersRef.current[i] = el
            }}
            textColor={textColor}
            fontFamily={scienceGothic.style.fontFamily}
          />
        ))}
      </div>
    </div>
  )
}

```

---

## Responsive Letters

Category: Typography
Slug: `responsive-letters`
URL: https://aicanvas.me/components/responsive-letters

Interactive text where each letter responds to cursor proximity, animating variable font properties (weight, stretch, italic, letter-spacing, skew) to create a deformation-under-pressure effect.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/responsive-letters
```

```tsx
'use client'

// npm install framer-motion next
// font: Science Gothic
/**
 * Renders variable-font letters that react independently to pointer distance.
 * Nearby glyphs adjust width, weight, slant, and scale with eased falloff.
 */

import { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion'
import { Science_Gothic } from 'next/font/google'





const scienceGothic = Science_Gothic({ subsets: ['latin'], axes: ['wdth'] })



interface LetterSpanProps {
  letter: string
  textColor: string
  fontFamily: string
  forwardedRef: React.Ref<HTMLSpanElement>
}

const LetterSpanComponent = ({ letter, textColor, fontFamily, forwardedRef }: LetterSpanProps) => {
  const [fontStyle, setFontStyle] = useState<'italic' | 'normal'>('italic')
  const spanRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const element = spanRef.current
    if (!element) return

    const updateStyle = () => {
      const italicVar = getComputedStyle(element).getPropertyValue('--italic')
      const italicValue = parseFloat(italicVar) || 1
      
      setFontStyle(italicValue > 0.5 ? 'italic' : 'normal')
    }

    
    updateStyle()

    
    const observer = new MutationObserver(updateStyle)
    observer.observe(element, { attributes: true, attributeFilter: ['style'] })

    
    const interval = setInterval(updateStyle, 16) 

    return () => {
      observer.disconnect()
      clearInterval(interval)
    }
  }, [])

  
  useEffect(() => {
    if (forwardedRef) {
      if (typeof forwardedRef === 'function') {
        forwardedRef(spanRef.current)
      } else {
        forwardedRef.current = spanRef.current
      }
    }
  }, [forwardedRef])

  return (
    <span
      ref={spanRef}
      className={`inline-block select-none ${textColor}`}
      style={{
        fontSize: 'clamp(4rem, 12vw, 7rem)',
        fontWeight: 'var(--font-weight, 100)',
        
        
        fontVariationSettings: `'wdth' var(--font-width, 100)`,
        fontFamily,
        fontStyle,
        lineHeight: 1,
        letterSpacing: 'var(--letter-spacing, 0.15em)',
        wordSpacing: '0.8em',
        transform: `skewY(var(--skew, 0)deg)`,
      }}
    >
      {letter}
    </span>
  )
}

const LetterSpan = motion(LetterSpanComponent)


// customize: replace the display text below
const TEXT = 'WHAT ?!'
// tune: raise to widen pointer influence
const INFLUENCE_RADIUS = 300  
// tune: adjust these bounds to change the variable-font response
const MAX_WEIGHT = 900        
const MIN_WEIGHT = 100        
const MAX_STRETCH = 200       
const MIN_STRETCH = 100       
const MAX_LETTER_SPACING = 0.4 
const MIN_LETTER_SPACING = 0 
const MAX_SKEW = 18           
const MIN_SKEW = 0            
// tune: raise to slow glyph transitions
const EASE_DURATION = 0.3     

export default function ResponsiveLetters() {
  const [isDark, setIsDark] = useState(true)
  const containerRef = useRef<HTMLDivElement>(null)
  const lettersRef = useRef<(HTMLSpanElement | null)[]>([])
  const mouseRef = useRef<{ x: number; y: number } | null>(null)
  const animIdRef = useRef<number>(0)
  const aliveRef = useRef(true)

  
  
  useEffect(() => {
    function detectTheme(): boolean {
      
      let element: HTMLElement | null = containerRef.current
      while (element) {
        const cardTheme = element.getAttribute('data-card-theme')
        if (cardTheme) {
          return cardTheme === 'dark'
        }
        element = element.parentElement
      }

      
      return document.documentElement.classList.contains('dark')
    }

    
    setIsDark(detectTheme())

    
    const observer = new MutationObserver(() => {
      setIsDark(detectTheme())
    })

    
    let element: HTMLElement | null = containerRef.current
    while (element) {
      observer.observe(element, { attributes: true, attributeFilter: ['data-card-theme', 'class'] })
      element = element.parentElement
    }

    
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

    return () => observer.disconnect()
  }, [])

  
  const exitStateRef = useRef<Array<{
    weight: number
    stretch: number
    letterSpacing: number
    skew: number
    italic: number
  }>>([])

  
  useEffect(() => {
    aliveRef.current = true
    const container = containerRef.current
    if (!container) return

    
    TEXT.split('').forEach((_, i) => {
      if (!exitStateRef.current[i]) {
        exitStateRef.current[i] = {
          weight: MIN_WEIGHT,
          stretch: MIN_STRETCH,
          letterSpacing: MIN_LETTER_SPACING,
          skew: 0,
          italic: 1,
        }
      }
    })

    
    const exitSpring = { type: 'spring', damping: 6, stiffness: 35 }

    function animate() {
      if (!aliveRef.current) return

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const isExiting = !mouseRef.current 

      TEXT.split('').forEach((_, i) => {
        const letterEl = lettersRef.current[i]
        if (!letterEl) return

        const rect = letterEl.getBoundingClientRect()
        const letterCenterX = rect.left + rect.width / 2
        const letterCenterY = rect.top + rect.height / 2

        
        const dx = letterCenterX - mx
        const dy = letterCenterY - my
        const dist = Math.sqrt(dx * dx + dy * dy)

        
        let influence = 0
        if (dist < INFLUENCE_RADIUS) {
          
          influence = 1 - dist / INFLUENCE_RADIUS
          
          influence = influence * influence * (3 - 2 * influence)
        }

        
        const targetWeight = MIN_WEIGHT + (MAX_WEIGHT - MIN_WEIGHT) * influence
        const targetStretch = MIN_STRETCH + (MAX_STRETCH - MIN_STRETCH) * influence
        const targetLetterSpacing = MIN_LETTER_SPACING + (MAX_LETTER_SPACING - MIN_LETTER_SPACING) * influence

        
        
        
        const italicValue = 1 - influence

        
        
        let targetSkew = 0
        if (influence > 0) {
          
          const angle = Math.atan2(dy, dx)
          
          const skewDirection = Math.sin(angle)
          targetSkew = (MAX_SKEW - MIN_SKEW) * influence * skewDirection
        }

        
        const state = exitStateRef.current[i]

        
        
        const spring = isExiting ? exitSpring : { type: 'spring', damping: 10, stiffness: 160 }
        const easing = isExiting ? 0.05 : 0.15 

        state.weight += (targetWeight - state.weight) * easing
        state.stretch += (targetStretch - state.stretch) * easing
        state.letterSpacing += (targetLetterSpacing - state.letterSpacing) * easing
        state.skew += (targetSkew - state.skew) * easing
        state.italic += (italicValue - state.italic) * easing

        
        
        
        letterEl.style.setProperty('--font-weight', Math.round(state.weight).toString())
        letterEl.style.setProperty('--font-width', state.stretch.toFixed(1))
        letterEl.style.setProperty('--letter-spacing', `${state.letterSpacing.toFixed(3)}em`)
        letterEl.style.setProperty('--skew', `${state.skew.toFixed(1)}`)
        letterEl.style.setProperty('--italic', state.italic.toFixed(3))
      })

      animIdRef.current = requestAnimationFrame(animate)
    }

    animate()

    return () => {
      aliveRef.current = false
      if (animIdRef.current) cancelAnimationFrame(animIdRef.current)
    }
  }, [])

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    mouseRef.current = { x: e.clientX, y: e.clientY }
  }

  function handleMouseLeave() {
    mouseRef.current = null
  }

  function handleTouchStart(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
    const touch = e.touches[0]
    if (touch) mouseRef.current = { x: touch.clientX, y: touch.clientY }
  }

  function handleTouchEnd() {
    setTimeout(() => {
      mouseRef.current = null
    }, 600)
  }

  
  const bgColor = isDark ? '#0d001a' : '#40FFA7'
  const textColor = isDark ? 'text-[#40FFA7]' : 'text-[#0d001a]'

  return (
    <div
      ref={containerRef}
      className={`flex min-h-screen w-full flex-col items-center justify-center gap-8 px-6 sm:px-10 ${scienceGothic.className}`}
      style={{ backgroundColor: bgColor }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {}
      <div className="flex flex-wrap items-center justify-center gap-0.5 sm:gap-1">
        {TEXT.split('').map((letter, i) => (
          <LetterSpan
            key={i}
            letter={letter}
            forwardedRef={(el) => {
              if (el) lettersRef.current[i] = el
            }}
            textColor={textColor}
            fontFamily={scienceGothic.style.fontFamily}
          />
        ))}
      </div>
    </div>
  )
}

```

---

## Emoji Reaction Jar

Category: Widgets
Slug: `jar-of-emotions`
URL: https://aicanvas.me/components/jar-of-emotions

Glass jar widget. Click a reaction to spring the lid and watch the emoji bounce down.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/jar-of-emotions
```

```tsx
'use client'

// npm install framer-motion matter-js
/**
 * Displays a physics-driven jar that dispenses selected emotion emoji.
 * Clicking an emotion opens the lid and launches a matching body toward its button.
 */

import {
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import type { RefObject } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import type { Engine, World, Body, Runner } from 'matter-js'

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect

function useTheme(ref: RefObject<HTMLElement | null>): { theme: 'light' | 'dark' } {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    if (typeof document === 'undefined') return
    const el = ref.current
    const update = () => {
      const card = el?.closest('[data-card-theme]') ?? null
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setTheme(dark ? 'dark' : 'light')
    }
    update()
    const observer = new MutationObserver(update)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el?.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [ref])
  return { theme }
}


// tune: raise to make dispensed emoji fall faster
const GRAVITY_SCALE = 0.0018
// tune: change to resize the physics bodies
const EMOJI_SIZE = 34 
// tune: change to resize the visible emoji
const EMOJI_FONT = 30 
// tune: raise to allow more active emoji
const MAX_BODIES = 30
// tune: raise to keep more emoji inside the jar
const MAX_INTERIOR = 8 
const WALL_THICKNESS = 40
const JAR_WALL_THICKNESS = 24


const JAR_VIEW_W = 200
const JAR_VIEW_H = 240

const MOUTH_LEFT = 40
const MOUTH_RIGHT = 160

const JAR_INNER_LEFT = 32
const JAR_INNER_RIGHT = 168
const JAR_INNER_TOP = 46 
const JAR_INNER_BOTTOM = 226

const LID_X = 26
const LID_Y = 22 
const LID_W = 148
const LID_H = 18
const LID_HINGE_X = LID_X
const LID_HINGE_Y = LID_Y + LID_H / 2


type Emotion = {
  id: string
  emoji: string
  label: string
  darkColor: string
  lightColor: string
}

// customize: replace the emotion labels and emoji below
const EMOTIONS: Emotion[] = [
  { id: 'banger',   emoji: '🔥', label: 'Banger',   darkColor: '#FF6B35', lightColor: '#C94400' },
  { id: 'perfect',  emoji: '👌', label: 'Perfect',  darkColor: '#6BD97A', lightColor: '#1E8A35' },
  { id: 'purejoy',  emoji: '😄', label: 'Pure joy', darkColor: '#F5C046', lightColor: '#C47A00' },
  { id: 'crying',   emoji: '😭', label: 'Crying',   darkColor: '#7FB4F0', lightColor: '#2E6FC1' },
  { id: 'cooking',  emoji: '🧑‍🍳', label: 'Cooking',  darkColor: '#FFB347', lightColor: '#B86A00' },
  { id: 'goat',     emoji: '🐐', label: 'GOAT',     darkColor: '#C4A0F5', lightColor: '#7A45CF' },
]


type Dispensed = {
  id: number
  body: Body
  emoji: string
  emotionId: string
  
  location: 'inside' | 'outside'
}

type BodyWithMeta = Body & { plugin?: { emotion?: string } }

let uid = 0

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

export default function JarOfEmotions() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { theme } = useTheme(containerRef)
  const isDark = theme === 'dark'
  const overlayRef = useRef<HTMLDivElement>(null)
  const jarWrapRef = useRef<HTMLDivElement>(null)
  const buttonRowRef = useRef<HTMLDivElement>(null)
  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})

  const matterRef = useRef<typeof import('matter-js') | null>(null)
  const engineRef = useRef<Engine | null>(null)
  const runnerRef = useRef<Runner | null>(null)
  const worldRef = useRef<World | null>(null)
  const dispensedRef = useRef<Dispensed[]>([])
  
  const jarBoxRef = useRef<{
    x: number 
    y: number
    w: number
    h: number
    scale: number
  }>({ x: 0, y: 0, w: 0, h: 0, scale: 1 })

  const [lidOpen, setLidOpen] = useState(false)
  const [dispensedTotal, setDispensedTotal] = useState(0)
  const [renderTick, setRenderTick] = useState(0) 
  const lidCloseTimerRef = useRef<number | null>(null)

  
  useEffect(() => {
    let alive = true
    let rafId = 0
    let ro: ResizeObserver | null = null
    let outerWalls: Body[] = []
    let jarWalls: Body[] = []
    let buttonFloors: Body[] = []

    function recomputeJarBox() {
      const container = containerRef.current
      const jarWrap = jarWrapRef.current
      if (!container || !jarWrap) return
      const cRect = container.getBoundingClientRect()
      const jRect = jarWrap.getBoundingClientRect()
      jarBoxRef.current = {
        x: jRect.left - cRect.left,
        y: jRect.top - cRect.top,
        w: jRect.width,
        h: jRect.height,
        scale: jRect.width / JAR_VIEW_W,
      }
    }

    function buildOuterWalls(
      Matter: typeof import('matter-js'),
      w: number,
      h: number,
    ): Body[] {
      const t = WALL_THICKNESS
      const opts = { isStatic: true, render: { visible: false } }
      return [
        
        Matter.Bodies.rectangle(w / 2, h + t / 2, w + t * 2, t, opts),
        
        Matter.Bodies.rectangle(-t / 2, h / 2, t, h * 2, opts),
        Matter.Bodies.rectangle(w + t / 2, h / 2, t, h * 2, opts),
        
        Matter.Bodies.rectangle(w / 2, -t * 3, w + t * 2, t, opts),
      ]
    }

    function buildJarWalls(Matter: typeof import('matter-js')): Body[] {
      const { x, y, scale } = jarBoxRef.current
      const jy = y
      const t = JAR_WALL_THICKNESS
      const opts = { isStatic: true, render: { visible: false }, friction: 0.6 }

      
      const leftX = x + (JAR_INNER_LEFT - 2) * scale
      const rightX = x + (JAR_INNER_RIGHT + 2) * scale
      const topY = y + JAR_INNER_TOP * scale
      const botY = y + JAR_INNER_BOTTOM * scale
      const innerH = botY - topY

      return [
        
        Matter.Bodies.rectangle(
          leftX - t / 2,
          topY + innerH / 2,
          t,
          innerH,
          opts,
        ),
        
        Matter.Bodies.rectangle(
          rightX + t / 2,
          topY + innerH / 2,
          t,
          innerH,
          opts,
        ),
        
        
        ...(() => {
          const pts = [
            [30, 218], [40, 226], [65, 233], [100, 236],
            [135, 233], [160, 226], [170, 218],
          ]
          const segs: Body[] = []
          for (let i = 0; i < pts.length - 1; i++) {
            const [x1s, y1s] = pts[i]
            const [x2s, y2s] = pts[i + 1]
            const cx = x + (x1s + x2s) / 2 * scale
            const cy = y + (y1s + y2s) / 2 * scale + t / 2
            const len = Math.hypot((x2s - x1s) * scale, (y2s - y1s) * scale)
            const angle = Math.atan2(y2s - y1s, x2s - x1s)
            const seg = Matter.Bodies.rectangle(cx, cy, len + 2, t, opts)
            Matter.Body.setAngle(seg, angle)
            segs.push(seg)
          }
          return segs
        })(),
      ]
    }

    function buildButtonFloors(Matter: typeof import('matter-js')): Body[] {
      const container = containerRef.current
      const row = buttonRowRef.current
      if (!container || !row) return []
      const cRect = container.getBoundingClientRect()
      const bodies: Body[] = []
      for (const emotion of EMOTIONS) {
        const el = buttonRefs.current[emotion.id]
        if (!el) continue
        const r = el.getBoundingClientRect()
        const x = r.left - cRect.left + r.width / 2
        
        const y = r.top - cRect.top + 4
        const body = Matter.Bodies.rectangle(x, y, r.width, 8, {
          isStatic: true,
          render: { visible: false },
          friction: 0.9,
          restitution: 0.15,
        }) as BodyWithMeta
        body.plugin = { emotion: emotion.id }
        bodies.push(body)
      }
      return bodies
    }

    function seedInterior(Matter: typeof import('matter-js')) {
      const world = worldRef.current
      if (!world) return
      const { x, y, scale } = jarBoxRef.current
      const leftX = x + (JAR_INNER_LEFT + 12) * scale
      const rightX = x + (JAR_INNER_RIGHT - 12) * scale
      const topY = y + JAR_INNER_TOP * scale
      const botY = y + (JAR_INNER_BOTTOM - 10) * scale
      const innerH = botY - topY
      
      for (let i = 0; i < EMOTIONS.length; i++) {
        const e = EMOTIONS[i]
        const px = rand(leftX, rightX)
        const py = botY - rand(0, innerH * 0.6)
        const body = Matter.Bodies.circle(px, py, EMOJI_SIZE / 2, {
          friction: 0.55,
          frictionAir: 0.06,
          restitution: 0.05,
          density: 0.0018,
          render: { visible: false },
        }) as BodyWithMeta
        body.plugin = { emotion: e.id }
        Matter.Body.setVelocity(body, { x: 0, y: 0 })
        Matter.Composite.add(world, body)
        dispensedRef.current.push({
          id: ++uid,
          body,
          emoji: e.emoji,
          emotionId: e.id,
          location: 'inside',
        })
      }
    }

    function rebuildStatics() {
      const Matter = matterRef.current
      const world = worldRef.current
      if (!Matter || !world) return
      const container = containerRef.current
      if (!container) return
      const cw = container.clientWidth
      const ch = container.clientHeight

      if (outerWalls.length) for (const w of outerWalls) Matter.Composite.remove(world, w)
      if (jarWalls.length) for (const w of jarWalls) Matter.Composite.remove(world, w)
      if (buttonFloors.length) for (const w of buttonFloors) Matter.Composite.remove(world, w)

      outerWalls = buildOuterWalls(Matter, cw, ch)
      Matter.Composite.add(world, outerWalls)

      recomputeJarBox()
      jarWalls = buildJarWalls(Matter)
      Matter.Composite.add(world, jarWalls)

      buttonFloors = buildButtonFloors(Matter)
      Matter.Composite.add(world, buttonFloors)

      
      for (const d of dispensedRef.current) {
        const p = d.body.position
        let nx = p.x
        let ny = p.y
        if (nx < 8) nx = 8
        if (nx > cw - 8) nx = cw - 8
        if (ny > ch - 8) ny = ch - 8
        if (nx !== p.x || ny !== p.y) Matter.Body.setPosition(d.body, { x: nx, y: ny })
      }
    }

    function tick() {
      if (!alive) return
      
      const Matter = matterRef.current
      if (Matter) {
        const list = dispensedRef.current
        
        const outsideCount = list.filter(d => d.location === 'outside').length
        if (outsideCount > MAX_BODIES) {
          const extra = outsideCount - MAX_BODIES
          let removed = 0
          for (let i = 0; i < list.length && removed < extra; i++) {
            const d = list[i]
            if (d.location === 'outside') {
              Matter.Composite.remove(worldRef.current!, d.body)
              list.splice(i, 1)
              i--
              removed++
            }
          }
        }
      }
      
      setRenderTick((t) => (t + 1) & 0xffff)
      rafId = requestAnimationFrame(tick)
    }

    import('matter-js').then((Matter) => {
      if (!alive) return
      matterRef.current = Matter

      const engine = Matter.Engine.create({
        gravity: { x: 0, y: 1, scale: GRAVITY_SCALE },
      })
      engine.timing.timeScale = 1
      engineRef.current = engine
      worldRef.current = engine.world

      const runner = Matter.Runner.create()
      runnerRef.current = runner
      Matter.Runner.run(runner, engine)

      rebuildStatics()
      seedInterior(Matter)

      ro = new ResizeObserver(() => {
        rebuildStatics()
      })
      if (containerRef.current) ro.observe(containerRef.current)

      rafId = requestAnimationFrame(tick)
    })

    return () => {
      alive = false
      cancelAnimationFrame(rafId)
      if (ro) ro.disconnect()
      if (lidCloseTimerRef.current !== null) {
        clearTimeout(lidCloseTimerRef.current)
        lidCloseTimerRef.current = null
      }
      const Matter = matterRef.current
      if (Matter) {
        if (runnerRef.current) Matter.Runner.stop(runnerRef.current)
        if (worldRef.current) Matter.Composite.clear(worldRef.current, false, true)
        if (engineRef.current) Matter.Engine.clear(engineRef.current)
      }
      matterRef.current = null
      engineRef.current = null
      runnerRef.current = null
      worldRef.current = null
      dispensedRef.current = []
    }
  }, [])

  
  useIsomorphicLayoutEffect(() => {
    return () => {
      if (lidCloseTimerRef.current !== null) {
        clearTimeout(lidCloseTimerRef.current)
        lidCloseTimerRef.current = null
      }
    }
  }, [])

  
  function dispense(emotion: Emotion) {
    const Matter = matterRef.current
    const world = worldRef.current
    const container = containerRef.current
    if (!Matter || !world || !container) return

    
    setLidOpen(true)
    if (lidCloseTimerRef.current !== null) clearTimeout(lidCloseTimerRef.current)
    lidCloseTimerRef.current = window.setTimeout(() => {
      setLidOpen(false)
      lidCloseTimerRef.current = null
    }, 900)

    
    const list = dispensedRef.current
    let candidate = list.find(
      (d) => d.location === 'inside' && d.emotionId === emotion.id,
    )
    if (!candidate) {
      const interiorCount = list.filter(d => d.location === 'inside').length
      if (interiorCount < MAX_INTERIOR) {
        const { x, y, scale } = jarBoxRef.current
        const leftX = x + (JAR_INNER_LEFT + 14) * scale
        const rightX = x + (JAR_INNER_RIGHT - 14) * scale
        const botY = y + (JAR_INNER_BOTTOM - 14) * scale
        const px = rand(leftX, rightX)
        const py = botY - 4
        const body = Matter.Bodies.circle(px, py, EMOJI_SIZE / 2, {
          friction: 0.55,
          frictionAir: 0.06,
          restitution: 0.05,
          density: 0.0018,
          render: { visible: false },
        }) as BodyWithMeta
        body.plugin = { emotion: emotion.id }
        Matter.Composite.add(world, body)
        candidate = {
          id: ++uid,
          body,
          emoji: emotion.emoji,
          emotionId: emotion.id,
          location: 'inside',
        }
        list.push(candidate)
      }
      
    }

    
    if (!candidate) {
      const { x: jx, y: jy, scale: s } = jarBoxRef.current
      const mouthCx = jx + ((MOUTH_LEFT + MOUTH_RIGHT) / 2) * s
      const exitY = jy - 18
      const body = Matter.Bodies.circle(mouthCx, exitY, EMOJI_SIZE / 2, {
        friction: 0.55,
        frictionAir: 0.06,
        restitution: 0.05,
        density: 0.0018,
        render: { visible: false },
      }) as BodyWithMeta
      body.plugin = { emotion: emotion.id }
      Matter.Composite.add(world, body)
      candidate = {
        id: ++uid,
        body,
        emoji: emotion.emoji,
        emotionId: emotion.id,
        location: 'outside',
      }
      list.push(candidate)
    }

    
    const btn = buttonRefs.current[emotion.id]
    if (!btn) return
    const cRect = container.getBoundingClientRect()
    const bRect = btn.getBoundingClientRect()
    const targetX = bRect.left - cRect.left + bRect.width / 2
    const targetY = bRect.top - cRect.top + 4

    
    
    
    const { x: jx, y: jy, scale: s } = jarBoxRef.current
    const mouthCx = jx + ((MOUTH_LEFT + MOUTH_RIGHT) / 2) * s
    const exitY = jy - 18 

    Matter.Body.setPosition(candidate.body, {
      x: mouthCx + rand(-6, 6),
      y: exitY,
    })
    Matter.Body.setAngularVelocity(candidate.body, rand(-0.12, 0.12))

    
    
    
    const dx = targetX - mouthCx
    
    const upKick = -14 - Math.min(2, Math.abs(dx) / 200)
    
    const hVel = dx / 60 
    Matter.Body.setVelocity(candidate.body, {
      x: hVel + rand(-0.3, 0.3),
      y: upKick,
    })

    candidate.location = 'outside'
    setDispensedTotal(t => t + 1)

    
    
    
    const remainingInside = list.some(
      (d) => d.location === 'inside' && d.emotionId === emotion.id,
    )
    if (!remainingInside) {
      window.setTimeout(() => {
        const w = worldRef.current
        const M = matterRef.current
        if (!w || !M) return
        const innerCount = dispensedRef.current.filter(d => d.location === 'inside').length
        if (innerCount >= MAX_INTERIOR) return
        const { x, y, scale } = jarBoxRef.current
        const lx = x + (JAR_INNER_LEFT + 14) * scale
        const rx = x + (JAR_INNER_RIGHT - 14) * scale
        const spawnY = y + (JAR_INNER_TOP + EMOJI_SIZE / 2 + 4) * scale
        const body = M.Bodies.circle(rand(lx, rx), spawnY, EMOJI_SIZE / 2, {
          friction: 0.55,
          frictionAir: 0.06,
          restitution: 0.05,
          density: 0.0018,
          render: { visible: false },
        }) as BodyWithMeta
        body.plugin = { emotion: emotion.id }
        M.Composite.add(w, body)
        dispensedRef.current.push({ id: ++uid, body, emoji: emotion.emoji, emotionId: emotion.id, location: 'inside' })
      }, 600)
    }
  }

  
  const styles = useMemo(
    () => ({
      jarFill: isDark ? 'rgba(220, 235, 245, 0.10)' : 'rgba(120, 140, 160, 0.18)',
      jarStroke: isDark ? 'rgba(220, 235, 245, 0.55)' : 'rgba(70, 90, 110, 0.55)',
      jarHighlight: isDark ? 'rgba(255,255,255,0.35)' : 'rgba(255,255,255,0.7)',
      jarShadow: isDark ? 'rgba(0,0,0,0.35)' : 'rgba(60,80,100,0.22)',
      lidFill: isDark ? '#B4A27A' : '#8B7349',
      lidStroke: isDark ? '#7A6A47' : '#5C4A28',
      promptColor: isDark ? 'rgba(250, 246, 238, 0.92)' : 'rgba(40, 36, 32, 0.88)',
    }),
    [isDark],
  )

  
  void renderTick

  
  return (
    <div
      
      
      
      
      
      
      className="flex min-h-screen w-full items-stretch justify-center"
      style={{ background: isDark ? '#1A1A19' : '#E8E8DF' }}
    >
      <div
        ref={containerRef}
        className="relative flex w-full max-w-2xl flex-col items-center justify-center gap-7 overflow-hidden px-4 py-6 sm:gap-8 sm:px-6 sm:py-10"
        style={{ minHeight: 520 }}
      >
        {}
        <div className="relative">
        <div className="relative z-10 flex items-center justify-center">
          <div
            ref={jarWrapRef}
            className="relative"
            style={{
              width: 'min(62vw, 280px)',
              aspectRatio: `${JAR_VIEW_W} / ${JAR_VIEW_H}`,
            }}
          >
            <svg
              viewBox={`0 0 ${JAR_VIEW_W} ${JAR_VIEW_H}`}
              className="block h-full w-full overflow-visible"
              preserveAspectRatio="xMidYMid meet"
            >
              <defs>
                {}
                <linearGradient id="jar-body-grad" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%"   stopColor="rgba(255,255,255,0.35)" />
                  <stop offset="18%"  stopColor="rgba(255,255,255,0.08)" />
                  <stop offset="82%"  stopColor="rgba(0,0,0,0.06)" />
                  <stop offset="100%" stopColor="rgba(0,0,0,0.18)" />
                </linearGradient>
                {}
                <linearGradient id="lid-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%"   stopColor="rgba(255,255,255,0.55)" stopOpacity={1} />
                  <stop offset="8%"   stopColor={styles.lidFill} stopOpacity={1} />
                  <stop offset="50%"  stopColor={styles.lidFill} stopOpacity={1} />
                  <stop offset="100%" stopColor={styles.lidStroke} stopOpacity={1} />
                </linearGradient>
                {}
                <filter id="lid-drop-shadow" x="-20%" y="-20%" width="160%" height="160%">
                  <feDropShadow dx="1" dy="3" stdDeviation="3" floodColor="rgba(0,0,0,0.35)" />
                </filter>
                {}
                <filter id="shadow-blur" x="-40%" y="-100%" width="180%" height="400%">
                  <feGaussianBlur stdDeviation="6" />
                </filter>
                {}
                <linearGradient id="jar-right-shadow" x1="1" y1="0" x2="0" y2="0">
                  <stop offset="0%"  stopColor="rgba(0,0,0,0.18)" />
                  <stop offset="30%" stopColor="rgba(0,0,0,0)" />
                </linearGradient>
                {}
                <radialGradient id="jar-bottom-glow" cx="50%" cy="100%" r="50%" fx="50%" fy="100%">
                  <stop offset="0%"   stopColor="rgba(255,255,255,0.12)" />
                  <stop offset="100%" stopColor="rgba(255,255,255,0)" />
                </radialGradient>
                <clipPath id="jar-clip">
                  <path
                    d={`
                      M ${JAR_INNER_LEFT - 4} 44
                      Q ${JAR_INNER_LEFT - 10} 120, ${JAR_INNER_LEFT - 2} ${JAR_INNER_BOTTOM - 8}
                      Q ${JAR_INNER_LEFT} ${JAR_VIEW_H - 6}, ${JAR_VIEW_W / 2} ${JAR_VIEW_H - 4}
                      Q ${JAR_INNER_RIGHT} ${JAR_VIEW_H - 6}, ${JAR_INNER_RIGHT + 2} ${JAR_INNER_BOTTOM - 8}
                      Q ${JAR_INNER_RIGHT + 10} 120, ${JAR_INNER_RIGHT + 4} 44
                      Z
                    `}
                  />
                </clipPath>
              </defs>

              {}
              <ellipse
                cx={JAR_VIEW_W / 2}
                cy={JAR_VIEW_H - 16}
                rx={JAR_VIEW_W / 2.1}
                ry={10}
                fill={styles.jarShadow}
                opacity={0.75}
                filter="url(#shadow-blur)"
              />

              {}
              <path
                d={`
                  M ${JAR_INNER_LEFT - 4} 44
                  Q ${JAR_INNER_LEFT - 10} 120, ${JAR_INNER_LEFT - 2} ${JAR_INNER_BOTTOM - 8}
                  Q ${JAR_INNER_LEFT} ${JAR_VIEW_H - 6}, ${JAR_VIEW_W / 2} ${JAR_VIEW_H - 4}
                  Q ${JAR_INNER_RIGHT} ${JAR_VIEW_H - 6}, ${JAR_INNER_RIGHT + 2} ${JAR_INNER_BOTTOM - 8}
                  Q ${JAR_INNER_RIGHT + 10} 120, ${JAR_INNER_RIGHT + 4} 44
                  Z
                `}
                fill="url(#jar-body-grad)"
                stroke={styles.jarStroke}
                strokeWidth={2}
                strokeLinejoin="round"
              />

              {}
              <rect
                x={JAR_INNER_LEFT - 8}
                y={36}
                width={JAR_INNER_RIGHT - JAR_INNER_LEFT + 16}
                height={12}
                rx={4}
                fill={styles.jarFill}
                stroke={styles.jarStroke}
                strokeWidth={1.5}
                opacity={0.85}
              />

              {}
              <g clipPath="url(#jar-clip)">
                {}
                <ellipse
                  cx={JAR_INNER_LEFT + 10}
                  cy={(JAR_INNER_TOP + JAR_INNER_BOTTOM) / 2}
                  rx={8}
                  ry={60}
                  fill="white"
                  opacity={0.30}
                />
                {}
                <rect
                  x={JAR_INNER_RIGHT - 18}
                  y={JAR_INNER_TOP}
                  width={18}
                  height={JAR_INNER_BOTTOM - JAR_INNER_TOP}
                  fill="url(#jar-right-shadow)"
                />
                {}
                <path
                  d={`
                    M ${JAR_INNER_LEFT - 4} ${JAR_INNER_BOTTOM - 40}
                    L ${JAR_INNER_RIGHT + 4} ${JAR_INNER_BOTTOM - 40}
                    L ${JAR_INNER_RIGHT + 2} ${JAR_INNER_BOTTOM - 8}
                    Q ${JAR_INNER_RIGHT} ${JAR_VIEW_H - 6}, ${JAR_VIEW_W / 2} ${JAR_VIEW_H - 4}
                    Q ${JAR_INNER_LEFT} ${JAR_VIEW_H - 6}, ${JAR_INNER_LEFT - 2} ${JAR_INNER_BOTTOM - 8}
                    Z
                  `}
                  fill="url(#jar-bottom-glow)"
                />
              </g>

              {}
              <motion.g
                animate={{ rotate: lidOpen ? -70 : 0 }}
                transition={{
                  type: 'spring',
                  stiffness: lidOpen ? 260 : 200,
                  damping: lidOpen ? 14 : 22,
                }}
                style={{
                  transformOrigin: `${LID_HINGE_X}px ${LID_HINGE_Y}px`,
                  transformBox: 'fill-box',
                }}
              >
                {}
                <rect
                  x={LID_X}
                  y={LID_Y}
                  width={LID_W}
                  height={LID_H}
                  rx={6}
                  fill="url(#lid-grad)"
                  stroke={styles.lidStroke}
                  strokeWidth={1.5}
                  filter="url(#lid-drop-shadow)"
                />
                {}
                <rect
                  x={LID_X + 4}
                  y={LID_Y + 2}
                  width={LID_W - 8}
                  height={2}
                  rx={1}
                  fill="white"
                  opacity={0.35}
                />
                {}
                <rect
                  x={LID_X + 6}
                  y={LID_Y + 5}
                  width={LID_W - 12}
                  height={1}
                  rx={0.5}
                  fill={styles.lidStroke}
                  opacity={0.20}
                />
                <rect
                  x={LID_X + 6}
                  y={LID_Y + 9}
                  width={LID_W - 12}
                  height={1}
                  rx={0.5}
                  fill={styles.lidStroke}
                  opacity={0.18}
                />
                <rect
                  x={LID_X + 6}
                  y={LID_Y + 13}
                  width={LID_W - 12}
                  height={1}
                  rx={0.5}
                  fill={styles.lidStroke}
                  opacity={0.15}
                />
                {}
                <circle
                  cx={LID_HINGE_X + 3}
                  cy={LID_HINGE_Y}
                  r={1.8}
                  fill={styles.lidStroke}
                />
              </motion.g>
            </svg>
          </div>
        </div>

        {}
        <AnimatePresence>
          {dispensedTotal >= 30 && (
            <motion.div
              initial={{ opacity: 0, scale: 0.75, y: 8 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.75 }}
              transition={{ type: 'spring', stiffness: 320, damping: 22 }}
              className="pointer-events-none absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-2xl px-5 py-3"
              style={{ background: '#ef4444', boxShadow: '4px 4px 0px 0px rgba(0,0,0,0.5)' }}
            >
              <p className="text-center font-sans text-sm font-bold leading-snug text-white sm:text-base">
                Full. Please Stop.
              </p>
            </motion.div>
          )}
        </AnimatePresence>
        </div>{}

        {}
        <motion.div
          initial={{ opacity: 0, y: 6 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="z-10 flex flex-col items-center gap-1 text-center"
        >
          <h2
            className="font-sans text-xl font-extrabold tracking-tight sm:text-2xl"
            style={{ color: styles.promptColor, letterSpacing: '-0.02em' }}
          >
            Emoji Reaction Jar
          </h2>
          <p
            className="font-sans text-xs font-medium sm:text-sm"
            style={{ color: isDark ? 'rgba(250,246,238,0.45)' : 'rgba(40,36,32,0.45)' }}
          >
            Reactions on tap
          </p>
        </motion.div>

        {}
        <div
          ref={buttonRowRef}
          className="z-10 flex w-full flex-wrap items-end justify-center gap-2 sm:gap-3"
        >
          {EMOTIONS.map((e) => (
            <motion.button
              key={e.id}
              ref={(el) => {
                buttonRefs.current[e.id] = el
              }}
              type="button"
              onClick={() => dispense(e)}
              whileHover={{ y: -2, scale: 1.04 }}
              whileTap={{ scale: 0.94 }}
              transition={{ type: 'spring', stiffness: 400, damping: 22 }}
              className="flex min-w-[58px] flex-col items-center justify-center gap-2 rounded-2xl border px-2 py-2 font-sans transition-colors sm:min-w-[68px] sm:px-3"
              style={{
                minHeight: 48,
                background: isDark
                  ? 'rgba(255, 250, 235, 0.04)'
                  : 'rgba(255, 255, 255, 0.7)',
                borderColor: isDark
                  ? 'rgba(255, 250, 235, 0.14)'
                  : 'rgba(40, 36, 32, 0.12)',
                boxShadow: isDark
                  ? '0 2px 6px rgba(0,0,0,0.18)'
                  : '0 2px 8px rgba(40, 36, 32, 0.08)',
              }}
              aria-label={e.label}
            >
              <span className="text-xl leading-none sm:text-2xl" aria-hidden>
                {e.emoji}
              </span>
              <span
                className="text-[10px] font-semibold uppercase tracking-wider sm:text-xs"
                style={{
                  letterSpacing: '0.06em',
                  color: isDark ? 'rgba(255,250,235,0.65)' : 'rgba(40,36,32,0.55)',
                }}
              >
                {e.label}
              </span>
            </motion.button>
          ))}
        </div>

        {}
        <div
          ref={overlayRef}
          className="pointer-events-none absolute inset-0 z-20"
          aria-hidden
        >
          <AnimatePresence>
            {dispensedRef.current.map((d) => {
              const p = d.body.position
              const angle = d.body.angle
              
              
              if (d.location !== 'outside') return null
              return (
                <motion.div
                  key={d.id}
                  initial={{ opacity: 0, scale: 0.6 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  style={{
                    position: 'absolute',
                    left: p.x - EMOJI_SIZE / 2,
                    top: p.y - EMOJI_SIZE / 2,
                    width: EMOJI_SIZE,
                    height: EMOJI_SIZE,
                    fontSize: EMOJI_FONT,
                    lineHeight: `${EMOJI_SIZE}px`,
                    textAlign: 'center',
                    transform: `rotate(${angle}rad)`,
                    willChange: 'transform, left, top',
                    userSelect: 'none',
                    filter: isDark
                      ? 'drop-shadow(0 2px 3px rgba(0,0,0,0.4))'
                      : 'drop-shadow(0 2px 3px rgba(40,36,32,0.25))',
                  }}
                >
                  {d.emoji}
                </motion.div>
              )
            })}
          </AnimatePresence>
        </div>

        {}
        <div
          className="pointer-events-none absolute inset-0 z-[15]"
          aria-hidden
        >
          {dispensedRef.current.map((d) => {
            if (d.location !== 'inside') return null
            const p = d.body.position
            const angle = d.body.angle
            return (
              <div
                key={d.id}
                style={{
                  position: 'absolute',
                  left: p.x - EMOJI_SIZE / 2,
                  top: p.y - EMOJI_SIZE / 2,
                  width: EMOJI_SIZE,
                  height: EMOJI_SIZE,
                  fontSize: EMOJI_FONT,
                  lineHeight: `${EMOJI_SIZE}px`,
                  textAlign: 'center',
                  transform: `rotate(${angle}rad)`,
                  willChange: 'transform, left, top',
                  userSelect: 'none',
                  opacity: 0.92,
                }}
              >
                {d.emoji}
              </div>
            )
          })}
        </div>

      </div>
    </div>
  )
}

```

---

## Peel to Scan

Category: Cards & Modals
Slug: `peel-corner-reveal`
URL: https://aicanvas.me/components/peel-corner-reveal

A portrait card whose corner peels on tap, revealing a scannable Wi-Fi QR code.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/peel-corner-reveal
```

```tsx
'use client'
// npm install framer-motion qrcode.react
/**
 * Presents a Wi-Fi card with a peelable corner containing a QR code.
 * Hover teases the fold, while click and keyboard input lock the reveal open.
 */

import { useEffect, useRef, useState } from 'react'
import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react'
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useMotionValueEvent,
  useSpring,
  useTransform,
} from 'framer-motion'
import { QRCodeSVG } from 'qrcode.react'

function useTheme(ref: RefObject<HTMLElement | null>): 'light' | 'dark' {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
  useEffect(() => {
    if (typeof document === 'undefined') return
    const el = ref.current
    const update = () => {
      const card = el?.closest('[data-card-theme]') ?? null
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setTheme(dark ? 'dark' : 'light')
    }
    update()
    const observer = new MutationObserver(update)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el?.closest('[data-card-theme]')
    if (cardWrapper) {
      observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    }
    return () => observer.disconnect()
  }, [ref])
  return theme
}








const PEEL_FILL = '#1A9D51'
const PEEL_FILL_DEEP = '#127A3D'
const PEEL_INK = '#FFFFFF'


const VB_W = 500
const VB_H = 620
const CARD_W = 320
const CARD_H = 440
const CARD_X = 90 
const CARD_Y = 70 
// tune: raise to round the fixed card corners further
const CARD_RADIUS = 12 


const TL = { x: CARD_X, y: CARD_Y }
const TR = { x: CARD_X + CARD_W, y: CARD_Y }
const BR = { x: CARD_X + CARD_W, y: CARD_Y + CARD_H }
const BL = { x: CARD_X, y: CARD_Y + CARD_H }


const REST_W_PCT = 0.22
const REST_H_PCT = 0.18
const OPEN_W_PCT = 0.78
const OPEN_H_PCT = 0.9


const BOB_AMPLITUDE = 2.4

export default function PeelCornerReveal() {
  const containerRef = useRef<HTMLDivElement>(null)
  const theme = useTheme(containerRef)
  const [isOpen, setIsOpen] = useState(false)
  const [isHovered, setIsHovered] = useState(false)
  const qrGroupRef = useRef<SVGGElement>(null)

  
  
  
  const PAGE_BG = theme === 'dark' ? '#2E2E2C' : '#D0CCC4'
  const CARD_FILL = theme === 'dark' ? '#FFFFFF' : '#121212'
  const CARD_INK = theme === 'dark' ? '#0A0A0A' : '#F5F5F0'
  const FOLD_STROKE = theme === 'dark' ? 'rgba(0,0,0,0.28)' : 'rgba(255,255,255,0.22)'
  const DIVIDER_STROKE = theme === 'dark' ? CARD_INK : '#FFFFFF'
  const DROP_SHADOW = theme === 'dark'
    ? '4px 4px 24px rgba(0,0,0,0.55)'
    : '4px 4px 24px rgba(20,15,10,0.28)'

  
  
  const target = useMotionValue(0)
  useEffect(() => {
    target.set(isOpen ? 1 : isHovered ? 0.18 : 0)
  }, [isOpen, isHovered, target])
  const progress = useSpring(target, { stiffness: 170, damping: 22, mass: 0.9 })

  
  const w = useTransform(
    progress,
    [0, 1],
    [REST_W_PCT * CARD_W, OPEN_W_PCT * CARD_W],
  )
  const h = useTransform(
    progress,
    [0, 1],
    [REST_H_PCT * CARD_H, OPEN_H_PCT * CARD_H],
  )

  
  const Ax = useTransform(w, (v) => BR.x - v)
  const Ay = useMotionValue(BR.y)
  const Bx = useMotionValue(BR.x)
  const By = useTransform(h, (v) => BR.y - v)

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  const Cx = useTransform<number, number>([Ax, By], ([ax, by]) => {
    const dx = BR.x - ax
    const dy = by - BR.y
    const len2 = dx * dx + dy * dy
    if (len2 === 0) return BR.x
    
    const t = (dx * dx) / len2
    const footX = ax + t * dx
    return 2 * footX - BR.x
  })
  const Cy = useTransform<number, number>([Ax, By], ([ax, by]) => {
    const dx = BR.x - ax
    const dy = by - BR.y
    const len2 = dx * dx + dy * dy
    if (len2 === 0) return BR.y
    const t = (dx * dx) / len2
    const footY = BR.y + t * dy
    return 2 * footY - BR.y
  })

  
  const angle = useTransform<number, number>([Ax, By], ([ax, by]) => {
    const dy = by - BR.y 
    const dx = BR.x - ax 
    return (Math.atan2(dy, dx) * 180) / Math.PI
  })

  
  
  const cardPoints = useMotionTemplate`${TL.x},${TL.y} ${TR.x},${TR.y} ${Bx},${By} ${Ax},${Ay} ${BL.x},${BL.y}`

  
  
  
  const cardPath = useMotionTemplate`M ${TL.x + CARD_RADIUS} ${TL.y} L ${TR.x - CARD_RADIUS} ${TR.y} A ${CARD_RADIUS} ${CARD_RADIUS} 0 0 1 ${TR.x} ${TR.y + CARD_RADIUS} L ${Bx} ${By} L ${Ax} ${Ay} L ${BL.x + CARD_RADIUS} ${BL.y} A ${CARD_RADIUS} ${CARD_RADIUS} 0 0 1 ${BL.x} ${BL.y - CARD_RADIUS} L ${TL.x} ${TL.y + CARD_RADIUS} A ${CARD_RADIUS} ${CARD_RADIUS} 0 0 1 ${TL.x + CARD_RADIUS} ${TL.y} Z`

  
  const peelPoints = useMotionTemplate`${Ax},${Ay} ${Bx},${By} ${Cx},${Cy}`

  
  const foldX1 = Ax
  const foldY1 = Ay
  const foldX2 = Bx
  const foldY2 = By

  
  const foldMidX = useTransform<number, number>([Ax, Bx], ([ax, bx]) => (ax + bx) / 2)
  const foldMidY = useTransform<number, number>([Ay, By], ([ay, by]) => (ay + by) / 2)

  
  
  const bobRaw = useMotionValue(0)
  useEffect(() => {
    let raf = 0
    let alive = true
    const start = performance.now()
    function tick(now: number) {
      if (!alive) return
      const t = (now - start) / 1000
      bobRaw.set(Math.sin(t * 1.2) * BOB_AMPLITUDE)
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => {
      alive = false
      cancelAnimationFrame(raf)
    }
  }, [bobRaw])
  const bobGate = useTransform(progress, [0, 0.4], [1, 0])
  const bobY = useTransform<number, number>(
    [bobRaw, bobGate],
    ([b, g]) => b * g,
  )


  function handleToggle() {
    setIsOpen((v) => !v)
  }
  function handleKey(e: ReactKeyboardEvent<HTMLDivElement>) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      setIsOpen((v) => !v)
    }
  }

  
  const revealOpacity = useTransform(progress, [0.35, 0.75], [0, 1])

  // tune: change to resize the QR code
  const QR_SIZE = 110
  // tune: raise to move the QR anchor toward the right fold endpoint
  const QR_ALONG_FRAC = 0.3 
  // tune: raise to move the QR anchor farther from the fold
  const QR_PERP_FRAC = 0.7 

  
  
  
  const QR_OFFSET_X = 54
  const QR_OFFSET_Y = 18
  const qrAnchorX = useTransform<number, number>(
    [Ax, Bx, Cx],
    ([ax, bx, cx]) =>
      ax + QR_ALONG_FRAC * (bx - ax) + (QR_PERP_FRAC / 2) * (cx - BR.x) + QR_OFFSET_X,
  )
  const qrAnchorY = useTransform<number, number>(
    [Ay, By, Cy],
    ([ay, by, cy]) =>
      ay + QR_ALONG_FRAC * (by - ay) + (QR_PERP_FRAC / 2) * (cy - BR.y) + QR_OFFSET_Y,
  )

  
  
  const qrAngle = useTransform(angle, (a) => a + 31)
  const qrTransform = useMotionTemplate`translate(${qrAnchorX} ${qrAnchorY}) rotate(${qrAngle})`

  useMotionValueEvent(qrTransform, 'change', (latest) => {
    qrGroupRef.current?.setAttribute('transform', latest)
  })

  useEffect(() => {
    const el = qrGroupRef.current
    if (!el) return
    el.setAttribute('transform', qrTransform.get())
  }, [qrTransform])

  return (
    <div
      ref={containerRef}
      className="relative flex min-h-screen w-full items-center justify-center overflow-hidden px-6 py-10"
      style={{ background: PAGE_BG }}
    >
      <motion.div
        role="button"
        tabIndex={0}
        aria-label={isOpen ? 'Hide Wi-Fi credentials' : 'Show Wi-Fi credentials'}
        aria-pressed={isOpen}
        onTap={handleToggle}
        onKeyDown={handleKey}
        onPointerEnter={() => setIsHovered(true)}
        onPointerLeave={() => setIsHovered(false)}
        whileHover={{ scale: 1.015 }}
        transition={{ type: 'spring', stiffness: 260, damping: 22 }}
        className="relative w-full max-w-[440px] cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1A9D51] focus-visible:ring-offset-4 focus-visible:ring-offset-transparent rounded-[20px]"
        style={{ y: bobY, filter: `drop-shadow(${DROP_SHADOW})` }}
      >

        <motion.svg
          viewBox={`0 0 ${VB_W} ${VB_H}`}
          xmlns="http://www.w3.org/2000/svg"
          className="block h-auto w-full"
          style={{ rotate: 3, transformOrigin: '50% 50%' }}
          aria-hidden
        >
          <defs>
            {}
            <motion.linearGradient
              id="pcr-peel-gradient"
              gradientUnits="userSpaceOnUse"
              x1={foldMidX}
              y1={foldMidY}
              x2={Cx}
              y2={Cy}
            >
              <stop offset="0%" stopColor={PEEL_FILL_DEEP} />
              <stop offset="22%" stopColor={PEEL_FILL} />
              <stop offset="100%" stopColor={PEEL_FILL} />
            </motion.linearGradient>

            {}
            <clipPath id="pcr-peel-clip">
              <motion.polygon points={peelPoints} />
            </clipPath>

            {}
            <clipPath id="pcr-card-clip">
              <motion.path d={cardPath} />
            </clipPath>
          </defs>

          {}
          <motion.g>
            <motion.path d={cardPath} fill={CARD_FILL} />
          </motion.g>

          {}
          <g clipPath="url(#pcr-card-clip)">
            {}
            <g
              transform={`translate(${CARD_X + 24}, ${CARD_Y + 62}) scale(1.5)`}
              stroke={PEEL_FILL}
              strokeWidth={1.6}
              strokeLinecap="round"
              strokeLinejoin="round"
              fill="none"
            >
              <circle cx="8" cy="12.5" r="1.4" fill={PEEL_FILL} />
              <motion.path
                d="M4 9 Q8 5 12 9"
                animate={{ opacity: [0.15, 1, 0.15] }}
                transition={{
                  duration: 2.2,
                  repeat: Infinity,
                  times: [0, 0.2, 1],
                  ease: [0.22, 1, 0.36, 1],
                  delay: 0,
                }}
              />
              <motion.path
                d="M1 6 Q8 -1 15 6"
                animate={{ opacity: [0.1, 0.9, 0.1] }}
                transition={{
                  duration: 2.2,
                  repeat: Infinity,
                  times: [0, 0.25, 1],
                  ease: [0.22, 1, 0.36, 1],
                  delay: 0.25,
                }}
              />
              <motion.path
                d="M-2 3 Q8 -7 18 3"
                animate={{ opacity: [0.05, 0.6, 0.05] }}
                transition={{
                  duration: 2.2,
                  repeat: Infinity,
                  times: [0, 0.3, 1],
                  ease: [0.22, 1, 0.36, 1],
                  delay: 0.5,
                }}
              />
            </g>

            {}
            <text
              x={CARD_X + 24}
              y={CARD_Y + 190}
              fill={CARD_INK}
              fontFamily="var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
              fontSize={96}
              fontWeight={900}
              letterSpacing={-3}
              style={{ lineHeight: 0.9 }}
            >
              Free
            </text>
            <text
              x={CARD_X + 24}
              y={CARD_Y + 276}
              fill={CARD_INK}
              fontFamily="var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
              fontSize={96}
              fontWeight={900}
              letterSpacing={-3}
              style={{ lineHeight: 0.9 }}
            >
              Wi-Fi
            </text>

            {}
            <line
              x1={CARD_X + 40}
              y1={CARD_Y + 316}
              x2={CARD_X + 140}
              y2={CARD_Y + 316}
              stroke={DIVIDER_STROKE}
              strokeWidth={1}
              opacity={0.15}
            />

            {}
            <text
              x={CARD_X + 24}
              y={CARD_Y + CARD_H - 20}
              fill={PEEL_FILL}
              fontFamily="var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
              fontSize={9}
              fontWeight={900}
              letterSpacing={2.5}
            >
              TAP TO SCAN
            </text>
          </g>

          {}
          <motion.g>
            <motion.polygon
              points={peelPoints}
              fill="url(#pcr-peel-gradient)"
            />
          </motion.g>

          {}
          <motion.line
            x1={foldX1}
            y1={foldY1}
            x2={foldX2}
            y2={foldY2}
            stroke={FOLD_STROKE}
            strokeWidth={1.1}
            strokeLinecap="round"
          />

          {}
          <motion.g
            clipPath="url(#pcr-peel-clip)"
            style={{ opacity: revealOpacity }}
          >
            <g ref={qrGroupRef}>
              <foreignObject
                x={-QR_SIZE / 2}
                y={-QR_SIZE / 2}
                width={QR_SIZE}
                height={QR_SIZE}
              >
                <div
                  style={{
                    width: QR_SIZE,
                    height: QR_SIZE,
                    padding: 6,
                    background: '#FFFFFF',
                    borderRadius: 6,
                    boxSizing: 'border-box',
                  }}
                >
                  <QRCodeSVG
                    value="WIFI:S:SlowBrew_4G;T:WPA;P:BREW_ME_BABY!;;"
                    size={QR_SIZE - 12}
                    level="M"
                    bgColor="#FFFFFF"
                    fgColor="#0A0A0A"
                    style={{ display: 'block' }}
                  />
                </div>
              </foreignObject>
            </g>
          </motion.g>

        </motion.svg>
      </motion.div>
    </div>
  )
}

```

---

## Sticker Wall

Category: Widgets
Slug: `sticker-wall`
URL: https://aicanvas.me/components/sticker-wall

A draggable sticker card wall. Drop notes, toss emoji, pile them up with real 2D physics.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/sticker-wall
```

```tsx
'use client'

// npm install framer-motion matter-js
/**
 * Presents a physics wall where text and emoji stickers can be added and dragged.
 * New stickers fall into the scene and collide with existing bodies and boundaries.
 */

import { useEffect, useLayoutEffect, useRef, useState, FormEvent } from 'react'
import { motion } from 'framer-motion'
import type { Engine, Runner, World, Body, MouseConstraint as MC, Mouse as MatterMouse } from 'matter-js'

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


// tune: raise to make stickers fall faster
const GRAVITY_SCALE = 0.0012
// tune: raise to increase collision bounce
const RESTITUTION   = 0.05
const FRICTION      = 0.6
const FRICTION_AIR  = 0.02
const DENSITY       = 0.0015
// tune: raise to allow more stickers in the scene
const STICKER_CAP   = 60
// tune: raise to slow sticker removal fades
const FADE_MS       = 250

const WALL_THICKNESS = 60

const TEXT_FONT_PX   = 15
// tune: raise to allow wider text stickers
const TEXT_MAX_WIDTH = 180
const TEXT_PAD_X     = 14
const TEXT_PAD_Y     = 10
const TEXT_LINE_H    = 20

// tune: change to resize emoji sticker bodies
const EMOJI_SIZE     = 72
const EMOJI_FONT_PX  = 42

const CARD_RADIUS    = 32
const BORDER_WIDTH   = 2


const PALETTE_DARK = ['#FDE68A', '#BBF7D0', '#FBCFE8', '#C7D2FE', '#BAE6FD', '#FED7AA']
const PALETTE_LIGHT = ['#F59E0B', '#34D399', '#F472B6', '#A78BFA', '#38BDF8', '#FB923C']

const STICKER_TEXT_COLOR_DARK = '#111827'
const STICKER_TEXT_COLOR_LIGHT = '#FFFFFF'
const BG_DARK  = '#0F0F12'
const BG_LIGHT = '#F5F1E8'

// customize: replace the initial text and emoji stickers below
const SEED_QUOTES = [
  'love the new layout',
  'prompts are 🔥',
  'found a tiny bug on hover',
  'please add a search',
  'this saved me hours',
  'fonts feel just right',
  'mobile nav could be bigger',
  'the physics here rules',
  'more components please',
  'onboarding was smooth',
]

const SEED_EMOJIS = ['👏', '💡', '🙌', '👀', '💬', '✅', '🔥', '💯', '🎉', '❤️', '🤔', '⭐']


type StickerKind = 'text' | 'emoji'

interface Sticker {
  body: Body
  kind: StickerKind
  content: string
  w: number
  h: number
  color: string
  lines: string[] 
  createdAt: number
  fadeStart?: number
}

type BodyWithPlugin = Body & { plugin: { sticker?: Sticker } }


function roundedRect(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  w: number,
  h: number,
  r: number,
) {
  const rr = Math.min(r, w / 2, h / 2)
  ctx.beginPath()
  ctx.moveTo(x + rr, y)
  ctx.arcTo(x + w, y, x + w, y + h, rr)
  ctx.arcTo(x + w, y + h, x, y + h, rr)
  ctx.arcTo(x, y + h, x, y, rr)
  ctx.arcTo(x, y, x + w, y, rr)
  ctx.closePath()
}



function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
  const words = text.trim().split(/\s+/)
  const lines: string[] = []
  let current = ''
  for (const word of words) {
    const candidate = current ? `${current} ${word}` : word
    const width = ctx.measureText(candidate).width
    if (width <= maxWidth) {
      current = candidate
    } else if (!current) {
      
      lines.push(word)
      current = ''
    } else {
      lines.push(current)
      current = word
    }
  }
  if (current) lines.push(current)
  return lines.length > 0 ? lines : ['']
}

function measureTextCard(
  ctx: CanvasRenderingContext2D,
  text: string,
): { lines: string[]; w: number; h: number } {
  ctx.save()
  ctx.font = `600 ${TEXT_FONT_PX}px ui-sans-serif, system-ui, -apple-system, Segoe UI, Manrope, sans-serif`
  const lines = wrapText(ctx, text, TEXT_MAX_WIDTH)
  let maxW = 0
  for (const line of lines) {
    const lw = ctx.measureText(line).width
    if (lw > maxW) maxW = lw
  }
  ctx.restore()
  const w = Math.max(70, Math.round(maxW + TEXT_PAD_X * 2))
  const h = Math.max(40, Math.round(lines.length * TEXT_LINE_H + TEXT_PAD_Y * 2))
  return { lines, w, h }
}

function randBetween(min: number, max: number): number {
  return min + Math.random() * (max - min)
}

function pickPalette(isDark: boolean): string[] {
  return isDark ? PALETTE_DARK : PALETTE_LIGHT
}


export default function StickerWall() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const inputRef     = useRef<HTMLInputElement>(null)

  
  const engineRef    = useRef<Engine | null>(null)
  const worldRef     = useRef<World | null>(null)
  const stickersRef  = useRef<Sticker[]>([])
  const sizeRef      = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
  
  const measureCtxRef = useRef<CanvasRenderingContext2D | null>(null)
  const paletteRef   = useRef<string[]>(PALETTE_DARK)
  
  const matterRef    = useRef<typeof import('matter-js') | null>(null)

  const [isDark, setIsDark] = useState<boolean>(() =>
    typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : true,
  )
  const isDarkRef = useRef<boolean>(isDark)

  useIsomorphicLayoutEffect(() => {
    isDarkRef.current = isDark
    paletteRef.current = pickPalette(isDark)
  }, [isDark])

  useEffect(() => {
    const palette = pickPalette(isDark)
    stickersRef.current.forEach((sticker, i) => {
      sticker.color = palette[i % palette.length]
    })
  }, [isDark])

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas    = canvasRef.current
    const container = containerRef.current
    if (!canvas || !container) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    measureCtxRef.current = ctx

    let alive = true
    let rafId = 0

    
    let engine: Engine | null = null
    let runner: Runner | null = null
    let world: World | null = null
    let walls: Body[] = []
    let mouse: MatterMouse | null = null
    let mouseConstraint: MC | null = null
    let ro: ResizeObserver | null = null

    let dpr = Math.min(window.devicePixelRatio || 1, 2)

    function buildWalls(Matter: typeof import('matter-js'), w: number, h: number): Body[] {
      const t = WALL_THICKNESS
      const opts = { isStatic: true, render: { visible: false } }
      return [
        Matter.Bodies.rectangle(w / 2, -t / 2, w + t * 2, t, opts), 
        Matter.Bodies.rectangle(w / 2, h + t / 2, w + t * 2, t, opts), 
        Matter.Bodies.rectangle(-t / 2, h / 2, t, h + t * 2, opts), 
        Matter.Bodies.rectangle(w + t / 2, h / 2, t, h + t * 2, opts), 
      ]
    }

    function makeTextSticker(
      Matter: typeof import('matter-js'),
      text: string,
      x: number,
      y: number,
      color: string,
      spawnMotion: boolean,
    ): Sticker {
      const { lines, w, h } = measureTextCard(ctx!, text)
      const body = Matter.Bodies.rectangle(x, y, w, h, {
        restitution: RESTITUTION,
        friction: FRICTION,
        frictionAir: FRICTION_AIR,
        density: DENSITY,
        angle: randBetween(-0.25, 0.25),
        render: { visible: false },
      })
      if (spawnMotion) {
        Matter.Body.setAngularVelocity(body, randBetween(-0.03, 0.03))
        Matter.Body.setVelocity(body, { x: randBetween(-0.3, 0.3), y: 0 })
      }
      const sticker: Sticker = {
        body,
        kind: 'text',
        content: text,
        w,
        h,
        color,
        lines,
        createdAt: performance.now(),
      }
      ;(body as BodyWithPlugin).plugin = { sticker }
      return sticker
    }

    function makeEmojiSticker(
      Matter: typeof import('matter-js'),
      emoji: string,
      x: number,
      y: number,
      color: string,
    ): Sticker {
      const body = Matter.Bodies.rectangle(x, y, EMOJI_SIZE, EMOJI_SIZE, {
        restitution: RESTITUTION,
        friction: FRICTION,
        frictionAir: FRICTION_AIR,
        density: DENSITY,
        angle: randBetween(-0.25, 0.25),
        render: { visible: false },
      })
      const sticker: Sticker = {
        body,
        kind: 'emoji',
        content: emoji,
        w: EMOJI_SIZE,
        h: EMOJI_SIZE,
        color,
        lines: [],
        createdAt: performance.now(),
      }
      ;(body as BodyWithPlugin).plugin = { sticker }
      return sticker
    }

    function seed(Matter: typeof import('matter-js'), w: number, h: number) {
      const palette = paletteRef.current
      
      for (let i = 0; i < SEED_QUOTES.length; i++) {
        const quote = SEED_QUOTES[i]
        const color = palette[i % palette.length]
        const x = randBetween(100, Math.max(120, w - 100))
        const y = randBetween(80, Math.max(120, h - 120))
        const sticker = makeTextSticker(Matter, quote, x, y, color, false)
        Matter.Body.setAngularVelocity(sticker.body, randBetween(-0.05, 0.05))
        Matter.Body.setVelocity(sticker.body, { x: randBetween(-0.5, 0.5), y: randBetween(-0.5, 0.5) })
        Matter.Composite.add(world!, sticker.body)
        stickersRef.current.push(sticker)
      }
      
      for (let i = 0; i < SEED_EMOJIS.length; i++) {
        const emoji = SEED_EMOJIS[i]
        const color = palette[(i + 3) % palette.length]
        const x = randBetween(80, Math.max(100, w - 80))
        const y = randBetween(80, Math.max(120, h - 120))
        const sticker = makeEmojiSticker(Matter, emoji, x, y, color)
        Matter.Body.setAngularVelocity(sticker.body, randBetween(-0.05, 0.05))
        Matter.Body.setVelocity(sticker.body, { x: randBetween(-0.5, 0.5), y: randBetween(-0.5, 0.5) })
        Matter.Composite.add(world!, sticker.body)
        stickersRef.current.push(sticker)
      }
    }

    function resize() {
      const Matter = matterRef.current
      if (!Matter || !world) return
      const w = container!.clientWidth || 480
      const h = container!.clientHeight || 480
      dpr = Math.min(window.devicePixelRatio || 1, 2)

      canvas!.width  = Math.round(w * dpr)
      canvas!.height = Math.round(h * dpr)
      canvas!.style.width  = `${w}px`
      canvas!.style.height = `${h}px`
      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)

      
      if (walls.length > 0) {
        for (const wall of walls) Matter.Composite.remove(world, wall)
      }
      walls = buildWalls(Matter, w, h)
      Matter.Composite.add(world, walls)

      
      for (const s of stickersRef.current) {
        const p = s.body.position
        let nx = p.x
        let ny = p.y
        if (nx < 20) nx = 20
        if (nx > w - 20) nx = w - 20
        if (ny > h - 20) ny = h - 20
        if (nx !== p.x || ny !== p.y) Matter.Body.setPosition(s.body, { x: nx, y: ny })
      }

      if (mouse) mouse.pixelRatio = dpr

      sizeRef.current = { w, h }
    }

    function drawFrame(now: number) {
      if (!alive) return
      const dark = isDarkRef.current
      const bg = dark ? BG_DARK : BG_LIGHT
      const { w: W, h: H } = sizeRef.current

      
      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
      ctx!.fillStyle = bg
      ctx!.fillRect(0, 0, W, H)

      const stickers = stickersRef.current
      const Matter = matterRef.current

      
      if (Matter && world) {
        for (let i = stickers.length - 1; i >= 0; i--) {
          const s = stickers[i]
          if (s.fadeStart !== undefined) {
            const dt = now - s.fadeStart
            if (dt >= FADE_MS) {
              Matter.Composite.remove(world, s.body)
              stickers.splice(i, 1)
            }
          }
        }
      }

      
      for (const s of stickers) {
        const { body, w, h, color, kind, lines, content } = s

        let alpha = 1
        if (s.fadeStart !== undefined) {
          const dt = now - s.fadeStart
          alpha = Math.max(0, 1 - dt / FADE_MS)
        }

        ctx!.save()
        ctx!.globalAlpha = alpha
        ctx!.translate(body.position.x, body.position.y)
        ctx!.rotate(body.angle)

        
        ctx!.fillStyle = color
        roundedRect(ctx!, -w / 2, -h / 2, w, h, CARD_RADIUS)
        ctx!.fill()

        
        ctx!.strokeStyle = 'rgba(255,255,255,0.7)'
        ctx!.lineWidth = BORDER_WIDTH
        const inset = BORDER_WIDTH
        roundedRect(
          ctx!,
          -w / 2 + inset,
          -h / 2 + inset,
          w - inset * 2,
          h - inset * 2,
          Math.max(1, CARD_RADIUS - inset),
        )
        ctx!.stroke()

        if (kind === 'text') {
          ctx!.fillStyle = isDarkRef.current ? STICKER_TEXT_COLOR_DARK : STICKER_TEXT_COLOR_LIGHT
          ctx!.font = `600 ${TEXT_FONT_PX}px ui-sans-serif, system-ui, -apple-system, Segoe UI, Manrope, sans-serif`
          ctx!.textAlign = 'center'
          ctx!.textBaseline = 'middle'
          const totalH = lines.length * TEXT_LINE_H
          const startY = -totalH / 2 + TEXT_LINE_H / 2
          for (let li = 0; li < lines.length; li++) {
            ctx!.fillText(lines[li], 0, startY + li * TEXT_LINE_H)
          }
        } else {
          ctx!.font = `${EMOJI_FONT_PX}px ui-sans-serif, system-ui, -apple-system, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", sans-serif`
          ctx!.textAlign = 'center'
          ctx!.textBaseline = 'middle'
          ctx!.fillText(content, 0, 2)
        }

        ctx!.restore()
      }

      rafId = requestAnimationFrame(drawFrame)
    }

    
    import('matter-js').then((Matter) => {
      if (!alive) return
      matterRef.current = Matter

      engine = Matter.Engine.create({ gravity: { x: 0, y: 1, scale: GRAVITY_SCALE } })
      engine.timing.timeScale = 0.6
      world = engine.world
      engineRef.current = engine
      worldRef.current = world

      runner = Matter.Runner.create()
      Matter.Runner.run(runner, engine)

      
      
      resize()
      mouse = Matter.Mouse.create(canvas!)
      mouse.pixelRatio = dpr
      mouseConstraint = Matter.MouseConstraint.create(engine, {
        mouse,
        constraint: {
          stiffness: 0.2,
          damping: 0.1,
          render: { visible: false },
        },
      })
      Matter.Composite.add(world, mouseConstraint)

      seed(Matter, sizeRef.current.w, sizeRef.current.h)

      ro = new ResizeObserver(resize)
      ro.observe(container!)

      rafId = requestAnimationFrame(drawFrame)
    })

    return () => {
      alive = false
      cancelAnimationFrame(rafId)
      if (ro) ro.disconnect()
      const Matter = matterRef.current
      if (Matter) {
        if (runner) Matter.Runner.stop(runner)
        if (world) Matter.Composite.clear(world, false, true)
        if (engine) Matter.Engine.clear(engine)
      }
      matterRef.current = null
      engineRef.current = null
      worldRef.current = null
      stickersRef.current = []
      measureCtxRef.current = null
    }
  }, [])

  
  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const input = inputRef.current
    if (!input) return
    const value = input.value.trim()
    if (!value) return

    const Matter = matterRef.current
    const world = worldRef.current
    const ctx = measureCtxRef.current
    if (!Matter || !world || !ctx) return

    const { w: W } = sizeRef.current
    if (W === 0) return

    const palette = paletteRef.current
    const color = palette[Math.floor(Math.random() * palette.length)]
    const x = randBetween(80, Math.max(100, W - 80))
    const y = -30

    const { lines, w, h } = measureTextCard(ctx, value)
    const body = Matter.Bodies.rectangle(x, y, w, h, {
      restitution: RESTITUTION,
      friction: FRICTION,
      frictionAir: FRICTION_AIR,
      density: DENSITY,
      angle: randBetween(-0.25, 0.25),
      render: { visible: false },
    })
    Matter.Body.setAngularVelocity(body, randBetween(-0.03, 0.03))
    Matter.Body.setVelocity(body, { x: randBetween(-0.3, 0.3), y: 0 })

    const sticker: Sticker = {
      body,
      kind: 'text',
      content: value,
      w,
      h,
      color,
      lines,
      createdAt: performance.now(),
    }
    ;(body as BodyWithPlugin).plugin = { sticker }

    Matter.Composite.add(world, body)
    stickersRef.current.push(sticker)

    
    if (stickersRef.current.length > STICKER_CAP) {
      for (const s of stickersRef.current) {
        if (s.fadeStart === undefined) {
          s.fadeStart = performance.now()
          break
        }
      }
    }

    input.value = ''
  }

  const bg = isDark ? BG_DARK : BG_LIGHT
  const inputBg = isDark ? 'rgba(0,0,0,0.9)' : 'rgba(255,255,255,0.9)'
  const accentBg = '#8A9CF4'
  const inputText = isDark ? 'rgba(255,255,255,0.95)' : 'rgba(17,24,39,0.95)'
  const accentText = isDark ? '#111827' : '#FFFFFF'
  const stickerBorder = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(17,24,39,0.12)'
  const stickerShadow = isDark
    ? '0 6px 14px rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.08)'
    : '0 6px 14px rgba(17,24,39,0.12), 0 2px 0 rgba(17,24,39,0.04)'
  const keyShadow = isDark
    ? '0 4px 0 rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.3)'
    : '0 4px 0 rgba(17,24,39,0.35), 0 8px 16px rgba(17,24,39,0.18)'
  const placeholderColor = isDark ? 'rgba(255,255,255,0.55)' : 'rgba(17,24,39,0.5)'
  const titleColor = isDark ? 'rgba(255,255,255,0.95)' : 'rgba(17,24,39,0.95)'
  const titleShadow = isDark
    ? '0 2px 20px rgba(0,0,0,0.4)'
    : '0 2px 20px rgba(17,24,39,0.08)'
  const subtitleColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(17,24,39,0.7)'
  const pillHoverBg = isDark ? 'rgba(0,0,0,0.95)' : 'rgba(255,255,255,0.95)'
  const pillFocusBg = isDark ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)'
  const pillHoverBorder = isDark ? 'rgba(255,255,255,0.85)' : 'rgba(17,24,39,0.6)'
  const pillFocusBorder = isDark ? '#FFFFFF' : '#111827'
  const pillFocusShadow = isDark
    ? '0 10px 24px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.12)'
    : '0 10px 24px rgba(17,24,39,0.15), 0 0 0 4px rgba(17,24,39,0.08)'
  const sendHoverShadow = isDark
    ? '0 5px 0 rgba(0,0,0,0.45), 0 10px 20px rgba(0,0,0,0.32)'
    : '0 5px 0 rgba(17,24,39,0.35), 0 10px 20px rgba(17,24,39,0.2)'
  const sendActiveShadow = isDark
    ? '0 1px 0 rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25)'
    : '0 1px 0 rgba(17,24,39,0.35), 0 2px 4px rgba(17,24,39,0.15)'

  return (
    <div
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: bg }}
    >
      <motion.div
        ref={containerRef}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative h-full w-full overflow-hidden"
        style={{ background: bg, touchAction: 'none' }}
      >
        <canvas
          ref={canvasRef}
          className="absolute inset-0"
          style={{ width: '100%', height: '100%', display: 'block' }}
        />

        <style>{`
          .sticker-wall-input::placeholder { color: ${placeholderColor}; }
          .sticker-wall-pill {
            transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
          }
          .sticker-wall-pill:hover {
            background: ${pillHoverBg} !important;
            border-color: ${pillHoverBorder} !important;
            transform: translateY(-1px);
          }
          .sticker-wall-pill:focus-within {
            background: ${pillFocusBg} !important;
            border-color: ${pillFocusBorder} !important;
            transform: translateY(-1px) scale(1.015);
            box-shadow: ${pillFocusShadow} !important;
          }
          .sticker-wall-pill:active {
            transform: translateY(0) scale(0.99);
          }
          .sticker-wall-send {
            transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
            cursor: pointer;
          }
          .sticker-wall-send:hover {
            transform: translateY(-1px);
            filter: brightness(1.15);
          }
          .sticker-wall-send:active {
            transform: translateY(3px);
            filter: brightness(0.95);
          }
        `}</style>

        <form
          onSubmit={onSubmit}
          className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-5"
          style={{
            paddingLeft: 16,
            paddingRight: 16,
            paddingBottom: '18vh',
          }}
        >
          <div className="pointer-events-none flex flex-col items-center gap-2 text-center">
            <h2
              className="select-none"
              style={{
                color: titleColor,
                fontSize: 'clamp(32px, 6vw, 56px)',
                fontWeight: 800,
                letterSpacing: '-0.02em',
                lineHeight: 1,
                margin: 0,
                textShadow: titleShadow,
              }}
            >
              Feedback Wall
            </h2>
            <p
              className="select-none"
              style={{
                color: subtitleColor,
                fontSize: '16px',
                fontWeight: 500,
                letterSpacing: '-0.005em',
                lineHeight: 1.45,
                margin: 0,
                maxWidth: '46ch',
              }}
            >
              Drop a note, toss an emoji, drag anything around. Real physics, no rules. Just leave your mark on the wall.
            </p>
          </div>
          <div
            className="sticker-wall-pill pointer-events-auto flex w-full max-w-md items-center gap-2 rounded-full p-1"
            style={{
              background: inputBg,
              border: `2px solid ${stickerBorder}`,
              boxShadow: stickerShadow,
            }}
          >
            <input
              ref={inputRef}
              type="text"
              placeholder="Leave feedback…"
              maxLength={80}
              className="sticker-wall-input flex-1 bg-transparent px-4 py-2 text-sm outline-none"
              style={{ color: inputText, fontWeight: 500 }}
            />
            <button
              type="submit"
              className="sticker-wall-send flex items-center rounded-2xl px-5 py-2 text-sm tracking-wide"
              style={{
                background: accentBg,
                color: accentText,
                fontWeight: 700,
                border: '1px solid rgba(255,255,255,0.12)',
              }}
            >
              Send
            </button>
          </div>
        </form>
      </motion.div>
    </div>
  )
}

```

---

## Danger Stripes

Category: Widgets
Slug: `danger-stripes`
URL: https://aicanvas.me/components/danger-stripes

Three crossing caution-tape stripes on orange. Hover to shake, click to intensify.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/danger-stripes
```

```tsx
'use client'

// npm install framer-motion

/**
 * Displays layered warning stripes with repeating text.
 * Hovering jitters the stripes, while clicking briefly increases the motion.
 */

import { useCallback, useEffect, useRef } from 'react'
import { motion } from 'framer-motion'

const STRIPE_TEXT = 'WORK IN PROGRESS \u00A0\u2715\u00A0 DO NOT CLICK OR HOVER \u00A0\u2715\u00A0 DANGER'

const STRIPES = [
  { rotate: -20, top: '40%', bg: '#0a0a0a', fg: '#ffffff' },
  { rotate: 12, top: '47%', bg: '#ffffff', fg: '#0a0a0a' },
  { rotate: -8, top: '54%', bg: '#2a2a2a', fg: '#ffffff' },
]

const ACCENT_COLOR = '#FF6B1A'

function RepeatingText({ color }: { color: string }) {
  return (
    <div className="flex items-center whitespace-nowrap text-sm font-black tracking-widest uppercase sm:text-base">
      {Array.from({ length: 10 }, (_, i) => (
        <span key={i} style={{ color }}>
          {STRIPE_TEXT.split('\u2715').map((chunk, j, arr) => (
            <span key={j}>
              {chunk}
              {j < arr.length - 1 && (
                <span style={{ color: ACCENT_COLOR, fontSize: '1.4em' }}>{'\u2715'}</span>
              )}
            </span>
          ))}
          {'\u00A0'}
          <span style={{ color: ACCENT_COLOR, fontSize: '1.4em' }}>{'\u2715'}</span>
          {'\u00A0 '}
        </span>
      ))}
    </div>
  )
}

function random(min: number, max: number) {
  return Math.random() * (max - min) + min
}

export default function DangerStripes() {
  const rafRef = useRef<number>(0)
  const hoveringRef = useRef(false)
  const clickedRef = useRef(false)
  const intensityRef = useRef(0)
  const stripesRef = useRef<(HTMLDivElement | null)[]>([])

  const animateStripes = useCallback(() => {
    if (hoveringRef.current || clickedRef.current) {
      const target = clickedRef.current ? 3 : 1
      intensityRef.current += (target - intensityRef.current) * 0.15
    } else {
      intensityRef.current *= 0.92
    }

    if (intensityRef.current < 0.005 && !hoveringRef.current && !clickedRef.current) {
      intensityRef.current = 0
      stripesRef.current.forEach((el, idx) => {
        if (el) el.style.transform = `rotate(${STRIPES[idx].rotate}deg)`
      })
      rafRef.current = 0
      return
    }

    const intensity = intensityRef.current

    stripesRef.current.forEach((el, idx) => {
      if (!el) return
      const base = STRIPES[idx].rotate
      const tx = random(-18, 18) * intensity
      const ty = random(-10, 10) * intensity
      const skewX = random(-6, 6) * intensity
      const sc = 1 + random(-0.04, 0.04) * intensity
      el.style.transform = `rotate(${base}deg) translate(${tx}px, ${ty}px) skewX(${skewX}deg) scale(${sc})`
    })

    rafRef.current = requestAnimationFrame(animateStripes)
  }, [])

  useEffect(() => {
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
    }
  }, [])

  const startLoop = useCallback(() => {
    if (rafRef.current) return
    rafRef.current = requestAnimationFrame(animateStripes)
  }, [animateStripes])

  const triggerHover = useCallback(() => {
    hoveringRef.current = true
    startLoop()
  }, [startLoop])

  const triggerClick = useCallback(() => {
    clickedRef.current = true
    startLoop()
    setTimeout(() => {
      clickedRef.current = false
    }, 500)
  }, [startLoop])

  const triggerLeave = useCallback(() => {
    hoveringRef.current = false
  }, [])

  return (
    <div className="flex min-h-screen w-full items-stretch justify-center bg-[#FF6B1A]">
      <div className="relative w-full overflow-hidden select-none">
        {STRIPES.map((stripe, i) => (
          <motion.div
            key={i}
            ref={(el) => { stripesRef.current[i] = el }}
            className="absolute left-[-40%] flex h-[60px] w-[180%] items-center overflow-hidden sm:h-[72px]"
            style={{
              top: stripe.top,
              background: stripe.bg,
              boxShadow: '0 4px 24px rgba(0,0,0,0.4), 0 1px 8px rgba(0,0,0,0.3)',
              willChange: 'transform',
              cursor: 'pointer',
            }}
            initial={{ x: i % 2 === 0 ? -300 : 300, opacity: 0, rotate: stripe.rotate }}
            animate={{ x: 0, opacity: 1, rotate: stripe.rotate }}
            transition={{
              duration: 0.6,
              delay: i * 0.12,
              ease: 'easeOut',
            }}
            onMouseEnter={triggerHover}
            onMouseLeave={triggerLeave}
            onClick={triggerClick}
            onTouchStart={triggerHover}
            onTouchEnd={() => {
              triggerClick()
              setTimeout(triggerLeave, 600)
            }}
          >
            <RepeatingText color={stripe.fg} />
          </motion.div>
        ))}
      </div>
    </div>
  )
}

```

---

## AI Job Cards

Category: Cards & Modals
Slug: `ai-job-cards`
URL: https://aicanvas.me/components/ai-job-cards

Three AI job card stacks with swipe-to-cycle. Brand logos, bookmark toggle, springs.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/ai-job-cards
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays AI job card stacks that cycle by button press or vertical drag.
 */

import { useRef, useState, useLayoutEffect, useEffect, useCallback } from 'react'
import { motion } from 'framer-motion'
import { BookmarkSimple } from '@phosphor-icons/react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

type LogoKey = 'claude' | 'openai' | 'gemini' | 'vercel' | 'mistral' | 'perplexity'

interface CardData {
  rate: string
  title: string
  role: string
}

interface StackData {
  logo: LogoKey
  company: string
  borderColor: string
  borderColorLight?: string  
  cards: [CardData, CardData, CardData]
}

const STACKS: StackData[] = [
  {
    logo: 'claude' as const,
    company: 'Anthropic',
    borderColor: '#d97757',
    cards: [
      { rate: '$120/hr',     title: 'Prompt Engineer',        role: 'AI Research'        },
      { rate: '$145/hr',     title: 'AI Safety Researcher',   role: 'Safety & Alignment' },
      { rate: '$155/hr',     title: 'Interpretability Lead',  role: 'Research'           },
    ],
  },
  {
    logo: 'perplexity' as const,
    company: 'Perplexity',
    borderColor: '#FFFFFF',
    borderColorLight: '#1C1C1C',
    cards: [
      { rate: '$160/hr',     title: 'Generative AI Lead',     role: 'AI Platform'        },
      { rate: '$135/hr',     title: 'ML Engineer',            role: 'Infrastructure'     },
      { rate: '$140/hr',     title: 'Search AI Researcher',   role: 'Research'           },
    ],
  },
  {
    logo: 'gemini' as const,
    company: 'Google',
    borderColor: '#4893FC',
    cards: [
      { rate: '$130–160/hr', title: 'LLM Platform Engineer',  role: 'Engineering'        },
      { rate: '$150/hr',     title: 'AI Research Scientist',  role: 'Research'           },
      { rate: '$165/hr',     title: 'Multimodal AI Lead',     role: 'DeepMind'           },
    ],
  },
]

const CARD_H = 234  // tune: raise to make each card taller
const PEEK   = 20   // tune: raise to reveal more of the stacked cards

const SLOTS = [
  { y: 0,        scale: 1,    z: 3 },  
  { y: PEEK,     scale: 0.96, z: 2 },  
  { y: PEEK * 2, scale: 0.92, z: 1 },  
]

function ClaudeLogo() {
  return (
    <svg width="24" height="24" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fill="#d97757"
        d="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 Z"
      />
    </svg>
  )
}

function OpenAILogo({ isDark }: { isDark: boolean }) {
  const fill = isDark ? '#FFFFFF' : '#000000'
  return (
    <svg width="24" height="24" viewBox="18 0 288 320" fill={fill} xmlns="http://www.w3.org/2000/svg">
      <path d="M123.2,118.3V85c0-2.2,0.6-3.8,2.9-5.1L187.9,44c8.3-4.8,18.9-7,29.2-7c39.1,0,63.8,30.1,63.8,62.5
        c0,2.6,0,6.1-0.6,9l-64.7-37.8c-3.2-1.9-6.7-2.2-10.6,0L123.2,118.3z M266.1,236.6v-74c0-4.2-1.6-7-5.4-9.3l-82-47.7l28.8-16.7
        c1.6-1,4.2-1,5.8,0l62.2,35.9c17.6,10.3,29.8,32.7,29.8,54.1C305.2,204.2,289.8,227.6,266.1,236.6z M106.2,172.8l-28.5-17
        c-2.2-1.3-2.9-2.9-2.9-5.1V79.3c0-34.9,26.6-61.2,62.8-61.2c14.1,0,27.6,4.8,38.4,13.5L111.7,69c-3.8,2.2-5.4,5.1-5.4,9.3V172.8z
        M162,204.9l-38.8-21.8v-46.1l38.8-21.8l38.4,21.8v46.1L162,204.9z M186,301.9c-14.1,0-27.6-4.8-38.4-13.5L212,251
        c3.8-2.2,5.4-5.1,5.4-9.3v-94.5l28.8,17c2.2,1.3,2.9,2.9,2.9,5.1v71.5C249.1,275.7,222.2,301.9,186,301.9z M110.4,231.1l-62.2-35.9
        c-17.6-10.3-29.8-32.7-29.8-54.1c0-25.6,15.7-48.7,39.4-57.7v74.3c0,4.2,1.6,7,5.4,9.3l81.7,47.4l-28.8,16.7
        C114.6,232.1,112,232.1,110.4,231.1z M106.5,283c-36.8,0-63.8-27.6-63.8-61.8c0-3.2,0.3-6.4,0.6-9.3l64.4,37.2c3.8,2.2,7,2.2,10.9,0
        l81.7-47.4V235c0,2.2-0.6,3.8-2.9,5.1L135.7,276C127.4,280.8,116.8,283,106.5,283z M186,319.2c38.4,0,70.5-27.6,77.5-64.1
        c35.9-9,59-42.3,59-76.3c0-22.4-9.6-43.9-27.2-59.6c1.6-6.7,2.9-13.8,2.9-20.5c0-45.2-36.8-79.1-79.1-79.1
        c-8.7,0-17.3,1.6-25.6,4.5C179,9.7,159.4,0.8,137.6,0.8c-38.4,0-70.5,27.6-77.5,64.1c-35.9,9-59,42.3-59,76.3
        c0,22.4,9.6,43.9,27.2,59.6c-1.6,6.7-2.9,13.8-2.9,20.5c0,45.2,36.8,79.1,79.1,79.1c8.7,0,17.3-1.6,25.6-4.5
        C144.7,310.3,164.2,319.2,186,319.2z" />
    </svg>
  )
}

function GeminiLogo() {
  return (
    <svg width="24" height="24" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="gemini-grad" x1="18.447" y1="43.42" x2="52.153" y2="15.004" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4893FC" />
          <stop offset="0.27" stopColor="#4893FC" />
          <stop offset="0.777" stopColor="#969DFF" />
          <stop offset="1" stopColor="#BD99FE" />
        </linearGradient>
      </defs>
      <path
        d="M32.447 0c.68 0 1.273.465 1.439 1.125a38.904 38.904 0 001.999 5.905c2.152 5 5.105 9.376 8.854 13.125 3.751 3.75 8.126 6.703 13.125 8.855a38.98 38.98 0 005.906 1.999c.66.166 1.124.758 1.124 1.438 0 .68-.464 1.273-1.125 1.439a38.902 38.902 0 00-5.905 1.999c-5 2.152-9.375 5.105-13.125 8.854-3.749 3.751-6.702 8.126-8.854 13.125a38.973 38.973 0 00-2 5.906 1.485 1.485 0 01-1.438 1.124c-.68 0-1.272-.464-1.438-1.125a38.913 38.913 0 00-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973 38.973 0 00-5.905-2A1.485 1.485 0 010 32.448c0-.68.465-1.272 1.125-1.438a38.903 38.903 0 005.905-2c5-2.151 9.376-5.104 13.125-8.854 3.75-3.749 6.703-8.125 8.855-13.125a38.972 38.972 0 001.999-5.905A1.485 1.485 0 0132.447 0z"
        fill="url(#gemini-grad)"
      />
    </svg>
  )
}

function VercelLogo({ isDark }: { isDark: boolean }) {
  const fill = isDark ? '#FFFFFF' : '#000000'
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <polygon points="12,3 22,21 2,21" fill={fill} />
    </svg>
  )
}

function MistralLogo() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      {}
      <rect x="3" y="3" width="8" height="8" rx="1.5" fill="#FF7000" />
      <rect x="13" y="3" width="8" height="8" rx="1.5" fill="#FF7000" opacity="0.7" />
      <rect x="3" y="13" width="8" height="8" rx="1.5" fill="#FF7000" opacity="0.7" />
      <rect x="13" y="13" width="8" height="8" rx="1.5" fill="#FF7000" />
    </svg>
  )
}

function PerplexityLogo({ isDark }: { isDark: boolean }) {
  const fill = isDark ? '#FFFFFF' : '#1C1C1C'
  return (
    <svg width="24" height="24" viewBox="0 0 16 16" fill={fill} xmlns="http://www.w3.org/2000/svg">
      <path d="M8 .188a.5.5 0 0 1 .503.5V4.03l3.022-2.92.059-.048a.51.51 0 0 1 .49-.054.5.5 0 0 1 .306.46v3.247h1.117l.1.01a.5.5 0 0 1 .403.49v5.558a.5.5 0 0 1-.503.5H12.38v3.258a.5.5 0 0 1-.312.462.51.51 0 0 1-.55-.11l-3.016-3.018v3.448c0 .275-.225.5-.503.5a.5.5 0 0 1-.503-.5v-3.448l-3.018 3.019a.51.51 0 0 1-.548.11.5.5 0 0 1-.312-.463v-3.258H2.503a.5.5 0 0 1-.503-.5V5.215l.01-.1c.047-.229.25-.4.493-.4H3.62V1.469l.006-.074a.5.5 0 0 1 .302-.387.51.51 0 0 1 .547.102l3.023 2.92V.687c0-.276.225-.5.503-.5M4.626 9.333v3.984l2.87-2.872v-4.01zm3.877 1.113 2.871 2.871V9.333l-2.87-2.897zm3.733-1.668a.5.5 0 0 1 .145.35v1.145h.612V5.715H9.201zm-9.23 1.495h.613V9.13c0-.131.052-.257.145-.35l3.033-3.064h-3.79zm1.62-5.558H6.76L4.626 2.652zm4.613 0h2.134V2.652z" />
    </svg>
  )
}

function BrandLogo({ logo, isDark }: { logo: LogoKey; isDark: boolean }) {
  switch (logo) {
    case 'claude':      return <ClaudeLogo />
    case 'openai':      return <OpenAILogo isDark={isDark} />
    case 'gemini':      return <GeminiLogo />
    case 'vercel':      return <VercelLogo isDark={isDark} />
    case 'mistral':     return <MistralLogo />
    case 'perplexity':  return <PerplexityLogo isDark={isDark} />
    default:            return null
  }
}

function useIsDark(ref: React.RefObject<HTMLElement | null>) {
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  useIsomorphicLayoutEffect(() => {
    const el = ref.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark'))
    }
    check()
    const obs = new MutationObserver(check)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) obs.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => obs.disconnect()
  }, [ref])
  return isDark
}

interface SingleCardProps {
  card: CardData
  stack: StackData
  isDark: boolean
  isFront: boolean
  frontIndex: number       
  onCycle: () => void
}

function SingleCard({ card, stack, isDark, isFront, frontIndex, onCycle }: SingleCardProps) {
  const [bookmarked, setBookmarked] = useState(false)

  const cardBg = isDark ? '#1e1e1c' : '#F7F7EF'
  const borderColor = isDark ? stack.borderColor : (stack.borderColorLight ?? stack.borderColor)
  const rateColor    = isDark ? 'rgba(255,255,255,0.55)' : 'rgba(30,30,28,0.55)'
  const titleColor   = isDark ? '#F5F5F0' : '#141412'
  const arrowColor   = isFront
    ? (isDark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.55)')
    : (isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.18)')
  const dotFill      = isDark ? '#E5E5E0' : '#2a2a28'
  const dotEmpty     = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.15)'
  const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'
  const companyColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.45)'
  const roleColor    = isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.65)'
  const btnBg        = isDark ? '#e8e8e0' : '#1a1a18'
  const btnText      = isDark ? '#1a1a18' : '#FFFFFF'
  const shadowVal    = isDark
    ? '0 2px 12px rgba(0,0,0,0.35)'
    : '0 2px 8px rgba(0,0,0,0.07)'
  const shadowHover  = isDark
    ? '0 12px 32px rgba(0,0,0,0.55)'
    : '0 12px 24px rgba(0,0,0,0.13)'

  return (
    <div
      onMouseEnter={e => { if (isFront) (e.currentTarget as HTMLDivElement).style.boxShadow = shadowHover }}
      onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = shadowVal }}
      style={{
        background: cardBg,
        borderRadius: 32,
        border: `1px solid ${borderColor}1A`,
        padding: '18px 18px 16px',
        display: 'flex',
        flexDirection: 'column',
        gap: 0,
        boxShadow: shadowVal,
        transition: 'box-shadow 0.25s ease',
        height: CARD_H,
        boxSizing: 'border-box',
        overflow: 'hidden',
      }}
    >
      {}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: rateColor, letterSpacing: '0.02em' }}>
          {card.rate}
        </span>
        <motion.button
          onClick={(e) => { e.stopPropagation(); setBookmarked(b => !b) }}
          whileTap={{ scale: 1.3 }}
          transition={{ type: 'spring', stiffness: 400, damping: 18 }}
          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex' }}
          aria-label={bookmarked ? 'Remove bookmark' : 'Add bookmark'}
        >
          <BookmarkSimple weight={bookmarked ? 'fill' : 'regular'} size={18} color={bookmarked ? '#e05c6a' : arrowColor} />
        </motion.button>
      </div>

      {}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flex: 1 }}>
        <h3
          style={{
            fontSize: 20,
            fontWeight: 800,
            color: titleColor,
            lineHeight: 1.18,
            letterSpacing: '-0.025em',
            margin: 0,
            flex: 1,
            maxWidth: '72%',
          }}
        >
          {card.title}
        </h3>
        <motion.button
          onClick={(e) => { e.stopPropagation(); if (isFront) onCycle() }}
          whileTap={isFront ? { scale: 0.9 } : {}}
          transition={{ type: 'spring', stiffness: 400, damping: 20 }}
          style={{
            background: 'none', border: 'none',
            cursor: isFront ? 'pointer' : 'default',
            padding: 0, display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 5, flexShrink: 0, marginRight: 6,
          }}
          aria-label={isFront ? 'Next card' : undefined}
        >
          {[0, 1, 2].map(i => {
            const isFrontDot = i === frontIndex
            return (
              <div key={i} style={{
                width: 5,
                height: isFrontDot ? 32 : 5,
                borderRadius: 3,
                background: isFrontDot ? dotFill : dotEmpty,
                transition: 'height 0.25s ease, background 0.25s ease',
              }} />
            )
          })}
        </motion.button>
      </div>

      {}
      <div style={{ height: 1, background: dividerColor, marginBottom: 14 }} />

      {}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 24, height: 24, flexShrink: 0 }}>
            <BrandLogo logo={stack.logo} isDark={isDark} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: roleColor, lineHeight: 1.2 }}>
              {stack.company}
            </span>
            <span style={{ fontSize: 10, fontWeight: 500, color: companyColor, lineHeight: 1.2 }}>
              {card.role}
            </span>
          </div>
        </div>
        <motion.button
          whileHover={{ scale: 1.03 }}
          whileTap={{ scale: 0.97 }}
          transition={{ type: 'spring', stiffness: 400, damping: 20 }}
          onClick={(e) => e.stopPropagation()}
          style={{
            background: btnBg, color: btnText, border: 'none',
            borderRadius: 999, padding: '7px 16px',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            letterSpacing: '0.01em', flexShrink: 0,
          }}
        >
          View
        </motion.button>
      </div>
    </div>
  )
}

interface CardStackProps {
  stack: StackData
  isDark: boolean
}

function CardStack({ stack, isDark }: CardStackProps) {
  const [order, setOrder] = useState<[number, number, number]>([0, 1, 2])
  const [exitingId, setExitingId] = useState<number | null>(null)
  const exitDir = useRef<'up' | 'down'>('up')
  const [returningIds, setReturningIds] = useState<Set<number>>(new Set())
  const dismissing = useRef(false)
  const orderRef = useRef(order)

  useEffect(() => {
    orderRef.current = order
  }, [order])

  const cycle = useCallback((dir: 'up' | 'down' = 'up') => {
    if (dismissing.current) return
    dismissing.current = true
    exitDir.current = dir

    const frontId = orderRef.current[0]
    setExitingId(frontId)

    setTimeout(() => {
      setReturningIds(new Set([frontId]))
      setOrder(prev => [prev[1], prev[2], prev[0]])
      setExitingId(null)

      requestAnimationFrame(() => requestAnimationFrame(() => {
        setReturningIds(new Set())
        dismissing.current = false
      }))
    }, 380)
  }, [])

  const containerHeight = CARD_H + PEEK * 2 + 4

  return (
    <div
      style={{
        position: 'relative',
        height: containerHeight,
        width: '100%',
      }}
    >
      {([0, 1, 2] as const).map((cardIndex) => {
        const slotIndex = order.indexOf(cardIndex)
        const slot = SLOTS[slotIndex]
        const isExiting = exitingId === cardIndex
        const isReturning = returningIds.has(cardIndex)
        const isFront = slotIndex === 0

        const animTarget = isExiting
          ? { y: exitDir.current === 'down' ? 160 : -160, scale: 0.88, opacity: 0 }
          : { y: slot.y, scale: slot.scale, opacity: 1 }

        const animTransition = isExiting
          ? { duration: 0.38, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] }
          : isReturning
            ? { duration: 0 }
            : { type: 'spring' as const, stiffness: 280, damping: 26 }

        return (
          <motion.div
            key={cardIndex}
            animate={animTarget}
            transition={animTransition}
            drag={isFront ? 'y' : false}
            dragConstraints={{ top: 0, bottom: 0 }}
            dragElastic={0.2}
            onDragEnd={(_, info) => {
              if (Math.abs(info.offset.y) > 60 || Math.abs(info.velocity.y) > 400) {
                cycle(info.offset.y > 0 ? 'down' : 'up')
              }
            }}
            whileHover={isFront ? { y: slot.y - 4, transition: { type: 'spring', stiffness: 300, damping: 24 } } : {}}
            style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0,
              zIndex: isExiting ? 10 : slot.z,
              transformOrigin: 'center top',
              cursor: isFront ? 'grab' : 'default',
            }}
          >
            <SingleCard
              card={stack.cards[cardIndex]}
              stack={stack}
              isDark={isDark}
              isFront={isFront}
              frontIndex={order[0]}
              onCycle={cycle}
            />
          </motion.div>
        )
      })}
    </div>
  )
}

export default function AiJobCards() {
  const containerRef = useRef<HTMLDivElement>(null)
  const isDark = useIsDark(containerRef)
  const [narrow, setNarrow] = useState(false)

  useEffect(() => {
    const el = containerRef.current
    if (!el) return
    const obs = new ResizeObserver(entries => {
      for (const entry of entries) {
        setNarrow(entry.contentRect.width < 480)
      }
    })
    obs.observe(el)
    return () => obs.disconnect()
  }, [])

  const outerBg = isDark ? '#0d0d0c' : '#CADBDD'

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: outerBg }}
    >
      <div
        style={{
          width: '100%',
          padding: 'clamp(16px, 5%, 40px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: narrow ? 'column' : 'row',
            gap: 16,
            width: '100%',
            maxWidth: 760,
            alignItems: narrow ? 'stretch' : 'flex-start',
          }}
        >
          {STACKS.map((stack, i) => (
            <div key={i} style={{ flex: 1, minWidth: 0 }}>
              <CardStack stack={stack} isDark={isDark} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

```

---

## Label Cards

Category: Cards & Modals
Slug: `label-cards`
URL: https://aicanvas.me/components/label-cards

Colour-blocked label cards scattered at random angles. Tap one to spring it to centre.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/label-cards
```

```tsx
'use client'

// npm install framer-motion
/**
 * Presents a responsive stack of labeled portfolio cards.
 * Hover and focus separate the overlapping cards while preserving their spread.
 */

import { useRef, useState, useLayoutEffect, useEffect } from 'react'
import { motion } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect




// tune: change both dimensions to resize the card stack
const BASE_CARD_W = 300
const BASE_CARD_H = 169 



// customize: replace the card labels, colors, and resting positions below
const CARDS = [
  {
    id: 0,
    title: 'Mobile Apps',
    sub1: 'Native iOS & Android',
    sub2: 'Interaction Design',
    since: '2023',
    bg: '#5CAD60',
    fg: '#162217',
    idle: { x: -82, y: -70, rotate: -11 },
  },
  {
    id: 1,
    title: 'Web Design',
    sub1: 'React & Next.js',
    sub2: 'Frontend Systems',
    since: '2021',
    bg: '#EDD540',
    fg: '#241F05',
    idle: { x: -48, y: 66, rotate: 9 },
  },
  {
    id: 2,
    title: 'Branding',
    sub1: 'Visual Identity',
    sub2: 'Brand Strategy',
    since: '2020',
    bg: '#1C2E8A',
    fg: '#E8EDF8',
    idle: { x: 12, y: -14, rotate: -4 },
  },
  {
    id: 3,
    title: 'Editorial',
    sub1: 'Magazine & Print',
    sub2: 'Typography Systems',
    since: '2022',
    bg: '#D43C3C',
    fg: '#FAE8E8',
    idle: { x: 68, y: 62, rotate: 14 },
  },
  {
    id: 4,
    title: 'Motion',
    sub1: 'Animation & Micro-UX',
    sub2: 'Interaction Patterns',
    since: '2023',
    bg: '#E08030',
    fg: '#2A1A06',
    idle: { x: 84, y: -86, rotate: 18 },
  },
]

const BAR_PATTERN = [1,2,1,1,3,1,2,1,1,3,1,1,2,1,2,1,3,1,1,2,1,3,1,2,1,1,2,1]

const SPRING_SCATTER = { type: 'spring' as const, stiffness: 240, damping: 24 }
const SPRING_FOCUS   = { type: 'spring' as const, stiffness: 340, damping: 28 }



function Barcode({ color, scale }: { color: string; scale: number }) {
  return (
    <div style={{ display: 'flex', alignItems: 'stretch', height: 28 * scale, gap: 1.2 * scale }}>
      {BAR_PATTERN.map((w, i) => (
        <div
          key={i}
          style={{ width: w * 1.5 * scale, background: color, opacity: 0.8, borderRadius: 0.5 }}
        />
      ))}
    </div>
  )
}

function LogoMark({ color, scale }: { color: string; scale: number }) {
  const size = 28 * scale
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 * scale }}>
      <div
        style={{
          width: size,
          height: size,
          borderRadius: '50%',
          border: `${1.5 * scale}px solid ${color}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          opacity: 0.85,
        }}
      >
        <span style={{ fontSize: 7.5 * scale, fontWeight: 800, color, letterSpacing: '0.02em', lineHeight: 1 }}>
          AI
        </span>
      </div>
      <span style={{ fontSize: 6.5 * scale, fontWeight: 700, color, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7 }}>
        CANVAS
      </span>
    </div>
  )
}



export default function LabelCards() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [selected, setSelected] = useState<number | null>(null)
  const [containerW, setContainerW] = useState(480)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return

    
    const checkTheme = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(
        card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'),
      )
    }
    checkTheme()
    const themeObs = new MutationObserver(checkTheme)
    themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) themeObs.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })

    
    const sizeObs = new ResizeObserver(entries => {
      setContainerW(entries[0].contentRect.width)
    })
    sizeObs.observe(el)

    return () => { themeObs.disconnect(); sizeObs.disconnect() }
  }, [])

  
  
  const cardW  = Math.min(BASE_CARD_W, Math.floor(containerW / 1.56))
  const cardH  = Math.round(cardW * 9 / 16)
  const scale  = cardW / BASE_CARD_W

  return (
    <div
      ref={containerRef}
      className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#E8E8DF] dark:bg-[#1A1A19]"
    >
      {}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: `radial-gradient(circle, ${
            isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)'
          } 1px, transparent 1px)`,
          backgroundSize: '28px 28px',
        }}
      />

      {CARDS.map(card => {
        const isSelected = selected === card.id

        return (
          <motion.div
            key={card.id}
            style={{
              position: 'absolute',
              width: cardW,
              height: cardH,
              borderRadius: 10 * scale,
              overflow: 'hidden',
              cursor: 'pointer',
              background: card.bg,
              boxShadow: '0 10px 36px rgba(0,0,0,0.32)',
              userSelect: 'none',
            }}
            animate={
              isSelected
                ? { x: 0, y: 0, rotate: 0, scale: 1.05, zIndex: 10, opacity: 1 }
                : {
                    x: card.idle.x * scale,
                    y: card.idle.y * scale,
                    rotate: card.idle.rotate,
                    scale: 1,
                    zIndex: 2,
                    opacity: 1,
                  }
            }
            transition={isSelected ? SPRING_FOCUS : SPRING_SCATTER}
            onClick={() => setSelected(prev => (prev === card.id ? null : card.id))}
          >
            <div
              style={{
                height: '100%',
                padding: `${12 * scale}px ${14 * scale}px ${11 * scale}px`,
                display: 'flex',
                flexDirection: 'column',
                boxSizing: 'border-box',
              }}
            >
              {}
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginBottom: 9 * scale,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 * scale }}>
                  <span style={{ fontSize: 16 * scale, fontWeight: 900, color: card.fg, lineHeight: 1, opacity: 0.9 }}>
                    ✳
                  </span>
                  <span style={{ fontSize: 18 * scale, fontWeight: 800, color: card.fg, letterSpacing: '-0.025em', lineHeight: 1 }}>
                    {card.title}
                  </span>
                </div>
                <span style={{ fontSize: 9 * scale, fontWeight: 600, color: card.fg, opacity: 0.5, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
                  Since {card.since}
                </span>
              </div>

              {}
              <div style={{ height: 1, background: card.fg, opacity: 0.22, marginBottom: 9 * scale, flexShrink: 0 }} />

              {}
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <p style={{ margin: 0, fontSize: 11.5 * scale, fontWeight: 600, color: card.fg, lineHeight: 1.35 }}>
                    {card.sub1}
                  </p>
                  <p style={{ margin: `${3 * scale}px 0 0`, fontSize: 11 * scale, fontWeight: 400, color: card.fg, opacity: 0.6, lineHeight: 1.35 }}>
                    {card.sub2}
                  </p>
                </div>

                {}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                  <Barcode color={card.fg} scale={scale} />
                  <LogoMark color={card.fg} scale={scale} />
                </div>
              </div>
            </div>
          </motion.div>
        )
      })}

      {}
      <motion.p
        style={{
          position: 'absolute',
          bottom: 20,
          fontSize: 11,
          letterSpacing: '0.05em',
          color: isDark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)',
          pointerEvents: 'none',
        }}
        animate={{ opacity: selected !== null ? 0 : 1 }}
        transition={{ duration: 0.3 }}
      >
        tap a card to focus
      </motion.p>
    </div>
  )
}

```

---

## Slide Deck

Category: Cards & Modals
Slug: `slide-deck`
URL: https://aicanvas.me/components/slide-deck

Swipeable card deck with four editorial slides. Navigate forward and back by drag or tap.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/slide-deck
```

```tsx
'use client'

// npm install framer-motion
/**
 * Presents a responsive deck of numbered presentation slides.
 * Dragging or using navigation controls moves the focused slide through the stack.
 */

import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react'
import { motion } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect




// customize: replace the slide content and colors below
const SLIDES = [
  {
    id: 0,
    num: '01',
    label: 'Opportunity',
    title: 'Define the\nProblem Space',
    accent: '#E55A2B',
    bg: '#111111',
    textPrimary: '#FFFFFF',
    textMuted: 'rgba(255,255,255,0.35)',
    shape: 'circle',
  },
  {
    id: 1,
    num: '02',
    label: 'Strategy',
    title: 'Discover\nDirection',
    accent: '#E55A2B',
    bg: '#F0EDEA',
    textPrimary: '#111111',
    textMuted: 'rgba(0,0,0,0.35)',
    shape: 'square',
  },
  {
    id: 2,
    num: '03',
    label: 'Execution',
    title: 'Design &\nDeliver',
    accent: '#111111',
    bg: '#E55A2B',
    textPrimary: '#FFFFFF',
    textMuted: 'rgba(255,255,255,0.5)',
    shape: 'line',
  },
  {
    id: 3,
    num: '04',
    label: 'Metrics',
    title: 'Measure\nImpact',
    accent: '#E55A2B',
    bg: '#2A2A2A',
    textPrimary: '#F0EDEA',
    textMuted: 'rgba(240,237,234,0.4)',
    shape: 'triangle',
  },
]

// tune: change both dimensions to resize the slide cards
const CARD_W = 260
const CARD_H = 300


// tune: adjust to change the stacked slide positions
const STACK = [
  { x: 0, y: 0,  scale: 1.000, opacity: 1 },
  { x: 0, y: 11, scale: 0.962, opacity: 1 },
  { x: 0, y: 20, scale: 0.926, opacity: 1 },
]

const OFFSCREEN = { x: 0, y: 30, scale: 0.88, opacity: 0 }



export default function SlideDeck() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const obs = new MutationObserver(check)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) obs.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => obs.disconnect()
  }, [])

  const [current, setCurrent] = useState(0)
  const [direction, setDirection] = useState<1 | -1>(1)
  
  const [exitInfo, setExitInfo] = useState<{ slideId: number; xTarget: number } | null>(null)
  
  const [enterFromRight, setEnterFromRight] = useState<number | null>(null)

  const goTo = useCallback((newIdx: number, dir: 1 | -1) => {
    if (dir > 0) {
      
      setExitInfo({ slideId: SLIDES[current].id, xTarget: -380 })
      setEnterFromRight(null)
    } else {
      
      setExitInfo(null)
      setEnterFromRight(SLIDES[newIdx].id)
    }
    setDirection(dir)
    setCurrent(newIdx)
  }, [current])

  const navigate = useCallback((dir: 1 | -1) => {
    goTo((current + dir + SLIDES.length) % SLIDES.length, dir)
  }, [current, goTo])

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full flex-col items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]"
      style={{ isolation: 'isolate' }}
    >
      {}
      <div
        style={{
          position: 'relative',
          width: CARD_W,
          height: CARD_H,
          overflow: 'visible',
        }}
      >
        {SLIDES.map(slide => {
          
          const offset = (slide.id - current + SLIDES.length) % SLIDES.length

          
          const isExiting = exitInfo?.slideId === slide.id && offset === SLIDES.length - 1

          
          const isEnteringFromRight = enterFromRight === slide.id && offset === 0

          const animTarget = isExiting
            ? { x: exitInfo!.xTarget, y: 0, scale: 0.88, opacity: 0 }
            : offset <= 2
              ? STACK[offset]
              : OFFSCREEN

          
          const zIndex = isEnteringFromRight ? 20
            : isExiting ? 15
            : offset === 0 ? 10
            : offset === 1 ? 6
            : offset === 2 ? 2
            : 0

          return (
            <motion.div
              key={isEnteringFromRight ? `${slide.id}-right` : slide.id}
              initial={isEnteringFromRight ? { x: 380, opacity: 0, scale: 0.88, y: 0 } : false}
              animate={animTarget}
              transition={{ type: 'spring', stiffness: 300, damping: 28 }}
              onAnimationComplete={() => {
                setExitInfo(prev => prev?.slideId === slide.id ? null : prev)
                setEnterFromRight(prev => prev === slide.id ? null : prev)
              }}
              style={{
                position: 'absolute',
                inset: 0,
                borderRadius: 20,
                background: slide.bg,
                overflow: 'hidden',
                zIndex,
                cursor: offset === 0 ? 'grab' : 'default',
                boxShadow: offset === 0
                  ? (isDark ? '0 20px 60px rgba(0,0,0,0.6)' : '0 12px 40px rgba(0,0,0,0.18)')
                  : 'none',
                pointerEvents: offset === 0 ? 'auto' : 'none',
              }}
              drag={offset === 0 ? 'x' : false}
              dragConstraints={offset === 0 ? { left: 0, right: 0 } : undefined}
              dragElastic={offset === 0 ? 0.5 : undefined}
              onDragEnd={offset === 0 ? (_, info) => {
                if (info.offset.x < -60 || info.velocity.x < -400) navigate(1)
                else if (info.offset.x > 60 || info.velocity.x > 400) navigate(-1)
              } : undefined}
            >
              {}
              <ShapeDecor type={slide.shape} accent={slide.accent} primary={slide.textPrimary} />

              {}
              <div
                style={{
                  position: 'absolute',
                  inset: 0,
                  padding: '24px 28px 28px',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                }}
              >
                {}
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-start',
                  }}
                >
                  <span
                    style={{
                      fontSize: 10,
                      fontWeight: 700,
                      letterSpacing: '0.12em',
                      textTransform: 'uppercase',
                      color: slide.textMuted,
                    }}
                  >
                    {slide.label}
                  </span>
                  <span
                    style={{
                      fontSize: 11,
                      fontWeight: 700,
                      color: slide.textMuted,
                      letterSpacing: '0.04em',
                    }}
                  >
                    {slide.num} / 04
                  </span>
                </div>

                {}
                <div>
                  <div
                    style={{
                      fontSize: 88,
                      fontWeight: 900,
                      lineHeight: 0.85,
                      color: slide.accent,
                      letterSpacing: '-0.05em',
                      marginBottom: 16,
                      fontVariantNumeric: 'tabular-nums',
                      userSelect: 'none',
                    }}
                  >
                    {slide.num}
                  </div>
                  <div
                    style={{
                      fontSize: 26,
                      fontWeight: 800,
                      lineHeight: 1.15,
                      color: slide.textPrimary,
                      letterSpacing: '-0.03em',
                      whiteSpace: 'pre-line',
                      userSelect: 'none',
                    }}
                  >
                    {slide.title}
                  </div>
                </div>
              </div>
            </motion.div>
          )
        })}
      </div>

      {}
      <div style={{ display: 'flex', gap: 6, marginTop: 32 }}>
        {SLIDES.map((s, i) => (
          <motion.button
            key={s.id}
            onClick={() => { if (i !== current) goTo(i, i > current ? 1 : -1) }}
            style={{
              height: 6,
              borderRadius: 3,
              background: i === current ? '#E55A2B' : (isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.15)'),
              border: 'none',
              cursor: 'pointer',
              padding: 0,
            }}
            animate={{ width: i === current ? 24 : 6 }}
            transition={{ type: 'spring', stiffness: 400, damping: 30 }}
            aria-label={`Slide ${i + 1}`}
          />
        ))}
      </div>
    </div>
  )
}



function ShapeDecor({
  type,
  accent,
  primary,
}: {
  type: string
  accent: string
  primary: string
}) {
  if (type === 'circle') {
    return (
      <div
        style={{
          position: 'absolute',
          right: -32,
          top: -32,
          width: 128,
          height: 128,
          borderRadius: '50%',
          border: `2px solid ${accent}`,
          opacity: 0.15,
        }}
      />
    )
  }
  if (type === 'square') {
    return (
      <div
        style={{
          position: 'absolute',
          right: 20,
          top: 30,
          width: 60,
          height: 60,
          border: `2px solid ${accent}`,
          transform: 'rotate(15deg)',
          opacity: 0.25,
        }}
      />
    )
  }
  if (type === 'line') {
    return (
      <>
        <div
          style={{
            position: 'absolute',
            right: 28,
            top: 0,
            bottom: 0,
            width: 2,
            background: primary,
            opacity: 0.1,
          }}
        />
        <div
          style={{
            position: 'absolute',
            right: 38,
            top: 0,
            bottom: 0,
            width: 1,
            background: primary,
            opacity: 0.06,
          }}
        />
      </>
    )
  }
  if (type === 'triangle') {
    return (
      <svg
        style={{
          position: 'absolute',
          right: -24,
          top: -18,
          width: 126,
          height: 112,
          opacity: 0.2,
        }}
        viewBox="0 0 180 160"
        fill="none"
      >
        <polygon
          points="90,12 172,148 8,148"
          stroke={primary}
          strokeWidth="2"
          strokeLinejoin="round"
        />
      </svg>
    )
  }
  return null
}

```

---

## Task Cards

Category: Cards & Modals
Slug: `task-cards`
URL: https://aicanvas.me/components/task-cards

A swipeable project task card stack where each card has a unique accent colour, status badge, and due date. Drag left or right to cycle through tasks. The dismissed card springs back to the bottom of the deck.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/task-cards
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents project tasks as a responsive overlapping card deck.
 * Dragging or using arrow controls moves the selected task through the stack.
 */

import { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react'
import { motion, useMotionValue, useTransform } from 'framer-motion'
import { PaintBrush, Megaphone, Code, ChartBar, CaretLeft, CaretRight, ArrowUpRight } from '@phosphor-icons/react'
import type { Icon as PhosphorIcon } from '@phosphor-icons/react'



// tune: change both dimensions to resize the task cards
const CARD_W = 220
const CARD_H = 280
const DECK_W = CARD_W + 210

// customize: replace the task content, colors, and icons below
const TASKS: Array<{
  id: number
  title: string
  category: string
  description: string
  progress: number
  accent: string
  accentLight: string
  bg: string
  bgLight: string
  darkOnAccent?: boolean
  darkLabel?: string
  lightLabel?: string
  icon: PhosphorIcon
}> = [
  {
    id: 0,
    title: 'Brand Overhaul',
    category: 'Design',
    description: 'Complete visual identity refresh: logo, type scale, and colour system across all brand touchpoints.',
    progress: 45,
    accent: '#429EBD',
    accentLight: '#2980A0',
    bg: '#0C1E27',
    bgLight: '#EAF4F8',
    icon: PaintBrush,
  },
  {
    id: 1,
    title: 'Product Launch',
    category: 'Marketing',
    description: 'Coordinate go-to-market strategy, press kit, social assets, and launch-day campaign timeline.',
    progress: 72,
    accent: '#053F5C',
    accentLight: '#032F45',
    bg: '#010810',
    bgLight: '#B8CEDB',
    darkLabel: '#2A9DC0',
    lightLabel: '#0A6A8E',
    icon: Megaphone,
  },
  {
    id: 2,
    title: 'API Migration',
    category: 'Engineering',
    description: 'Migrate three legacy endpoints to v3 schema with full backward-compatibility and rollback plan.',
    progress: 28,
    accent: '#F7AD19',
    accentLight: '#D4900E',
    bg: '#1E1608',
    bgLight: '#FEF8E6',
    darkOnAccent: true,
    icon: Code,
  },
  {
    id: 3,
    title: 'Q2 Metrics',
    category: 'Analytics',
    description: 'Build consolidated dashboard: retention, revenue, and activation funnels with weekly drill-down.',
    progress: 15,
    accent: '#F27F0C',
    accentLight: '#C96208',
    bg: '#1C1006',
    bgLight: '#FEF1E4',
    darkOnAccent: true,
    icon: ChartBar,
  },
]


// tune: adjust to change the deck spread
const SLOTS = [
  { x: 0,    y: 0, rotate: 0, scale: 1,    z: 4, opacity: 1   },
  { x: 108,  y: 0, rotate: 0, scale: 0.88, z: 3, opacity: 0.7 },
  { x: -108, y: 0, rotate: 0, scale: 0.88, z: 2, opacity: 0.7 },
  { x: 0,    y: 0, rotate: 0, scale: 0.78, z: 1, opacity: 0   },
]

const SPRING = { type: 'spring' as const, stiffness: 280, damping: 26 }




const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

function useIsDark(ref: React.RefObject<HTMLElement | null>) {
  
  const [isDark, setIsDark] = useState(() => {
    if (typeof window === 'undefined') return false
    return document.documentElement.classList.contains('dark')
  })

  useIsomorphicLayoutEffect(() => {
    const el = ref.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const obs = new MutationObserver(check)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) obs.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => obs.disconnect()
  }, [ref])
  return isDark
}



function AnimatedProgress({ progress, isActive, darkText }: { progress: number; isActive: boolean; darkText?: boolean }) {
  const [count, setCount] = useState(0)

  useEffect(() => {
    if (!isActive) {
      setCount(0)
      return
    }
    const duration = 1400
    const delay = 300
    let rafId: number
    let startTime: number | null = null

    const tick = (now: number) => {
      if (startTime === null) startTime = now
      const t = Math.min((now - startTime) / duration, 1)
      const eased = 1 - Math.pow(1 - t, 3)
      setCount(Math.round(eased * progress))
      if (t < 1) rafId = requestAnimationFrame(tick)
    }

    const timeout = setTimeout(() => { rafId = requestAnimationFrame(tick) }, delay)
    return () => { clearTimeout(timeout); cancelAnimationFrame(rafId) }
  }, [progress, isActive])

  const labelColor = darkText ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.6)'
  const pctColor   = darkText ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)'
  const trackBg    = darkText ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.2)'
  const fillBg     = darkText ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.85)'

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <span style={{ fontSize: 10, fontWeight: 600, color: labelColor, letterSpacing: '0.06em', textTransform: 'uppercase' as const }}>Progress</span>
        <span style={{ fontSize: 12, fontWeight: 700, color: pctColor }}>{count}%</span>
      </div>
      <div style={{ height: 5, borderRadius: 3, background: trackBg, overflow: 'hidden' }}>
        <motion.div
          style={{ height: '100%', borderRadius: 3, background: fillBg }}
          initial={{ width: '0%' }}
          animate={{ width: isActive ? progress + '%' : '0%' }}
          transition={isActive ? { duration: 1.4, ease: [0.25, 0.46, 0.45, 0.94], delay: 0.3 } : { duration: 0 }}
        />
      </div>
    </div>
  )
}



export default function TaskCards() {
  const containerRef = useRef<HTMLDivElement>(null)
  const isDark = useIsDark(containerRef)

  const dragX = useMotionValue(0)
  const cardRotateY = useTransform(dragX, [-200, 0, 200], [14, 0, -14])

  const [order, setOrder] = useState([0, 1, 2, 3])
  const orderRef = useRef(order)
  useEffect(() => { orderRef.current = order }, [order])

  const dismissing = useRef(false)
  const dragDelta = useRef(0)
  const [exiting, setExiting] = useState<{ id: number; dir: 'left' | 'right' } | null>(null)
  const [returning, setReturning] = useState<Set<number>>(new Set())

  const dismiss = useCallback((dir: 'left' | 'right') => {
    if (dismissing.current) return
    dismissing.current = true
    const frontId = orderRef.current[0]
    setExiting({ id: frontId, dir })
    setTimeout(() => {
      setReturning(prev => new Set([...prev, frontId]))
      setOrder(prev => [...prev.slice(1), prev[0]])
      setExiting(null)
      requestAnimationFrame(() => requestAnimationFrame(() => {
        setReturning(prev => { const s = new Set(prev); s.delete(frontId); return s })
        dismissing.current = false
      }))
    }, 420)
  }, [])

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full flex-col items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]"
    >
      {}
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div style={{ position: 'relative', width: DECK_W, height: CARD_H }}>
          {TASKS.map(task => {
            const slotIndex = order.indexOf(task.id)
            const slot = SLOTS[slotIndex]
            const isFront = slotIndex === 0
            const isExiting = exiting?.id === task.id
            const isReturning = returning.has(task.id)

            
            const cardBg = isDark ? task.accent : task.accentLight
            
            const topBg = isDark ? task.bg : task.bgLight
            const catColor = isDark ? (task.darkLabel ?? task.accent) : (task.lightLabel ?? task.accentLight)
            const titleColor = isDark ? 'rgba(255,255,255,0.92)' : '#21211F'
            const descColor = isDark ? 'rgba(255,255,255,0.48)' : '#52524E'
            const Icon = task.icon

            return (
              <motion.div
                key={task.id}
                style={{
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  width: CARD_W,
                  height: CARD_H,
                  marginLeft: -CARD_W / 2,
                  marginTop: -CARD_H / 2,
                  zIndex: isExiting ? 10 : slot.z,
                  borderRadius: 24,
                  overflow: 'hidden',
                  cursor: isFront ? 'grab' : 'default',
                  display: 'flex',
                  flexDirection: 'column',
                  background: cardBg,
                  ...(isFront ? { rotateY: cardRotateY, transformPerspective: 900 } : {}),
                }}
                animate={
                  isExiting
                    ? {
                        x: exiting!.dir === 'left' ? -480 : 480,
                        y: 100,
                        rotate: exiting!.dir === 'left' ? -22 : 22,
                        scale: 0.85,
                        opacity: 0,
                      }
                    : {
                        x: slot.x,
                        y: slot.y,
                        rotate: slot.rotate,
                        scale: slot.scale,
                        opacity: slot.opacity,
                      }
                }
                transition={
                  isExiting
                    ? { duration: 0.42, ease: [0.4, 0, 0.2, 1] }
                    : isReturning
                    ? { duration: 0 }
                    : SPRING
                }
                whileHover={
                  isExiting ? undefined :
                  isFront
                    ? { scale: 1.03, boxShadow: `0 10px 36px ${cardBg}30` }
                    : slotIndex === 1 || slotIndex === 2
                    ? { opacity: 0.88, scale: slot.scale + 0.015 }
                    : undefined
                }
                whileTap={isFront ? { scale: 0.98 } : undefined}
                drag={isFront && !dismissing.current ? 'x' : false}
                dragConstraints={{ left: 0, right: 0 }}
                dragElastic={0.6}
                onDragStart={() => { dragDelta.current = 0; dragX.set(0) }}
                onDrag={(_, info) => { dragDelta.current = info.offset.x; dragX.set(info.offset.x) }}
                onDragEnd={(_, info) => {
                  dragX.set(0)
                  if (Math.abs(info.offset.x) > 80 || Math.abs(info.velocity.x) > 400) {
                    dismiss(info.offset.x < 0 ? 'left' : 'right')
                  }
                }}
              >
                {}
                <div
                  style={{
                    flex: 1,
                    minHeight: 0,
                    overflow: 'hidden',
                    background: topBg,
                    border: `2px solid ${cardBg}`,
                    borderRadius: 24,
                    padding: '28px 20px 16px',
                    display: 'flex',
                    flexDirection: 'column',
                    boxSizing: 'border-box',
                    position: 'relative',
                  }}
                >
                  {}
                  <motion.span
                    aria-hidden="true"
                    style={{
                      position: 'absolute',
                      top: 14,
                      right: 14,
                      width: 28,
                      height: 28,
                      borderRadius: '50%',
                      border: `1.5px solid ${catColor}`,
                      background: 'transparent',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: catColor,
                      flexShrink: 0,
                    }}
                    whileHover={{ scale: 1.1, opacity: 0.7 }}
                    whileTap={{ scale: 0.92 }}
                    transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                  >
                    <ArrowUpRight weight="regular" size={13} />
                  </motion.span>
                  {}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, flexShrink: 0 }}>
                    <Icon weight="regular" size={11} style={{ color: catColor }} />
                    <span style={{
                      fontSize: 10,
                      fontWeight: 700,
                      color: catColor,
                      letterSpacing: '0.1em',
                      textTransform: 'uppercase',
                    }}>
                      {task.category}
                    </span>
                  </div>

                  {}
                  <div style={{ height: 28, flexShrink: 0 }} />

                  {}
                  <h2 style={{
                    fontSize: 20,
                    fontWeight: 800,
                    color: titleColor,
                    lineHeight: 1.15,
                    letterSpacing: '-0.02em',
                    margin: 0,
                    flexShrink: 0,
                  }}>
                    {task.title}
                  </h2>

                  {}
                  <div style={{ height: 10, flexShrink: 0 }} />

                  {}
                  <p style={{
                    fontSize: 12,
                    color: descColor,
                    lineHeight: 1.6,
                    margin: 0,
                    flex: 1,
                    minHeight: 0,
                    overflow: 'hidden',
                  }}>
                    {task.description}
                  </p>
                </div>

                {}
                <div style={{ padding: '12px 20px 14px', flexShrink: 0 }}>
                  <AnimatedProgress progress={task.progress} isActive={isFront} darkText={task.darkOnAccent} />
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>

      {}
      <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
        {([
          { dir: 'left' as const, icon: <CaretLeft weight="regular" size={16} />, label: 'Previous' },
          { dir: 'right' as const, icon: <CaretRight weight="regular" size={16} />, label: 'Next' },
        ] as const).map(({ dir, icon, label }) => (
          <motion.button
            key={dir}
            onClick={() => dismiss(dir)}
            aria-label={label}
            style={{
              width: 36, height: 36, borderRadius: '50%',
              border: `1.5px solid ${isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.08)'}`,
              background: 'rgba(0,0,0,0)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', color: isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.28)',
            }}
            whileHover={{
              scale: 1.1,
              background: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
              borderColor: isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.18)',
              color: isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.55)',
            }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: 'spring', stiffness: 400, damping: 25 }}
          >
            {icon}
          </motion.button>
        ))}
      </div>
    </div>
  )
}

```

---

## Meet the Crew

Category: Cards & Modals
Slug: `meet-the-crew`
URL: https://aicanvas.me/components/meet-the-crew

A swipeable portrait card stack perfect for introducing a team, showcasing crew members, or picking an avatar. Four stacked cards fan out with soft rotations: drag to browse, tap to choose. Drop in your own photos and names for an About Us section, a character selector, or an onboarding profile picker.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/meet-the-crew
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents an avatar stack that advances on horizontal swipes and confirms a tapped selection.
 */

import { useState, useLayoutEffect, useEffect, useRef, useCallback } from 'react'
import { motion } from 'framer-motion'
import { Check } from '@phosphor-icons/react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

const CARD_W = 174
const CARD_H = 218
const RADIUS = 20

interface Photo {
  id: number
  name: string
  role: string
  url: string
}

const PHOTOS: Photo[] = [
  {
    id: 0,
    name: 'Capt. Vroom',
    role: 'Asteroid Hugger',
    url: 'https://images.unsplash.com/photo-1698327615546-7f30183aa4e3?w=400&h=500&fit=crop&auto=format&q=80',
  },
  {
    id: 1,
    name: 'Zork',
    role: 'Zero-G Chef',
    url: 'https://images.unsplash.com/photo-1541873676-a18131494184?w=400&h=500&fit=crop&auto=format&q=80',
  },
  {
    id: 2,
    name: 'Dronk',
    role: 'Space Surfer',
    url: 'https://images.unsplash.com/photo-1691379635079-9f438036ea58?w=400&h=500&fit=crop&auto=format&q=80',
  },
  {
    id: 3,
    name: 'Gloop',
    role: 'Nebula Napper',
    url: 'https://images.unsplash.com/photo-1536697246787-1f7ae568d89a?w=400&h=500&fit=crop&auto=format&q=80',
  },
]

const SLOTS = [
  { x: 0,   y: 0,   rotate: 1.5,  scale: 1,    z: 4 },
  { x: 52,  y: -8,  rotate: 8,    scale: 0.92, z: 3 },
  { x: -46, y: -4,  rotate: -9,   scale: 0.90, z: 2 },
  { x: 4,   y: 26,  rotate: 3.5,  scale: 0.86, z: 1 },
]

const SPRING = { type: 'spring' as const, stiffness: 280, damping: 26 }

export default function AvatarPicker() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  const [order, setOrder] = useState<number[]>([0, 1, 2, 3])
  const [selectedId, setSelectedId] = useState<number | null>(null)
  const [exiting, setExiting] = useState<{ id: number; dir: 'left' | 'right' } | null>(null)
  const [returning, setReturning] = useState<Set<number>>(new Set())

  const orderRef = useRef(order)
  const dismissing = useRef(false)
  const dragDelta = useRef(0)
  useIsomorphicLayoutEffect(() => { orderRef.current = order }, [order])

  useIsomorphicLayoutEffect(() => {
    const check = () => setIsDark(document.documentElement.classList.contains('dark'))
    check()
    const obs = new MutationObserver(check)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    return () => obs.disconnect()
  }, [])

  const dismiss = useCallback((dir: 'left' | 'right') => {
    if (dismissing.current) return
    dismissing.current = true
    const frontId = orderRef.current[0]
    setExiting({ id: frontId, dir })

    setTimeout(() => {
      setReturning(prev => new Set([...prev, frontId]))
      setOrder(prev => [...prev.slice(1), prev[0]])
      setExiting(null)
      requestAnimationFrame(() => requestAnimationFrame(() => {
        setReturning(prev => {
          const s = new Set(prev)
          s.delete(frontId)
          return s
        })
        dismissing.current = false
      }))
    }, 420)
  }, [])

  const handleSelect = useCallback(() => {
    const frontId = orderRef.current[0]
    setSelectedId(prev => prev === frontId ? null : frontId)
  }, [])

  const labelColor = isDark ? 'rgba(255,255,255,0.35)' : '#1a1a18'

  return (
    <div
      ref={containerRef}
      className="relative flex min-h-screen w-full select-none flex-col items-center justify-center gap-8 bg-[#E8E8DF] dark:bg-[#1A1A19]"
    >
      <p
        className="text-[#21211F] dark:text-white/35"
        style={{
          margin: 0,
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.13em',
          textTransform: 'uppercase',
          fontFamily: 'var(--font-sans, sans-serif)',
        }}
      >
        Meet the Crew
      </p>

      <div style={{ position: 'relative', width: CARD_W, height: CARD_H }}>
        {PHOTOS.map(photo => {
          const slotIndex = order.indexOf(photo.id)
          const slot = SLOTS[slotIndex]
          const isExiting = exiting?.id === photo.id
          const isReturning = returning.has(photo.id)
          const isFront = slotIndex === 0 && !isExiting
          const isSelected = selectedId === photo.id

          return (
            <motion.div
              key={photo.id}
              style={{
                position: 'absolute',
                left: '50%',
                top: '50%',
                width: CARD_W,
                height: CARD_H,
                marginLeft: -CARD_W / 2,
                marginTop: -CARD_H / 2,
                zIndex: isExiting ? 10 : slot.z,
                borderRadius: RADIUS,
                overflow: 'hidden',
                cursor: isFront ? 'grab' : 'default',
                boxShadow: slotIndex === 0
                  ? '0 24px 64px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25)'
                  : '0 6px 20px rgba(0,0,0,0.25)',
              }}
              animate={
                isExiting
                  ? {
                      x: exiting!.dir === 'left' ? -460 : 460,
                      y: 150,
                      rotate: exiting!.dir === 'left' ? -22 : 22,
                      scale: 0.85,
                      opacity: 0,
                    }
                  : {
                      x: slot.x,
                      y: slot.y,
                      rotate: slot.rotate,
                      scale: slot.scale,
                      opacity: 1,
                    }
              }
              transition={
                isExiting
                  ? { duration: 0.4, ease: [0.4, 0, 0.2, 1] }
                  : isReturning
                    ? { duration: 0 }
                    : SPRING
              }
              drag={isFront ? 'x' : false}
              dragConstraints={{ left: 0, right: 0 }}
              dragElastic={0.6}
              whileDrag={{ cursor: 'grabbing' }}
              onDragStart={() => { dragDelta.current = 0 }}
              onDrag={(_, info) => { dragDelta.current = info.offset.x }}
              onDragEnd={(_, info) => {
                if (Math.abs(info.offset.x) > 80 || Math.abs(info.velocity.x) > 400) {
                  dismiss(info.offset.x < 0 ? 'left' : 'right')
                }
              }}
              onClick={() => {
                if (isFront && Math.abs(dragDelta.current) < 8) handleSelect()
              }}
            >
              <img
                src={photo.url}
                alt={photo.name}
                draggable={false}
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />

              <div style={{
                position: 'absolute',
                bottom: 0, left: 0, right: 0,
                padding: '36px 14px 14px',
                background: 'linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%)',
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'space-between',
                gap: 8,
              }}>
                <div style={{ minWidth: 0 }}>
                  <p style={{
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 700,
                    letterSpacing: 0.2,
                    margin: 0,
                    lineHeight: 1.2,
                    fontFamily: 'var(--font-sans, sans-serif)',
                  }}>
                    {photo.name}
                  </p>
                  <p style={{
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 11,
                    fontWeight: 400,
                    margin: '2px 0 0',
                    letterSpacing: 0.3,
                    fontFamily: 'var(--font-sans, sans-serif)',
                  }}>
                    {photo.role}
                  </p>
                </div>

                {isSelected && (
                  <motion.div
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    style={{
                      width: 24,
                      height: 24,
                      borderRadius: '50%',
                      background: '#2DD4BF',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexShrink: 0,
                    }}
                  >
                    <Check size={13} weight="bold" color="#0f2e2b" />
                  </motion.div>
                )}
              </div>

              {isSelected && (
                <div style={{
                  position: 'absolute',
                  inset: 0,
                  borderRadius: RADIUS,
                  border: '2.5px solid #2DD4BF',
                  pointerEvents: 'none',
                }} />
              )}
            </motion.div>
          )
        })}
      </div>

      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        {PHOTOS.map(photo => {
          const isCurrent = order[0] === photo.id
          return (
            <motion.div
              key={photo.id}
              className="bg-[#21211F] dark:bg-white"
              animate={{
                width: isCurrent ? 20 : 5,
                opacity: isCurrent ? 1 : 0.28,
              }}
              style={{ height: 5, borderRadius: 3 }}
              transition={{ type: 'spring', stiffness: 400, damping: 30 }}
            />
          )
        })}
      </div>

      <div style={{ height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {selectedId !== null ? (
          <motion.button
            key="confirmed"
            initial={{ opacity: 0, scale: 0.88, y: 6 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            onClick={() => setSelectedId(null)}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              background: '#2DD4BF',
              borderRadius: 20,
              padding: '7px 18px',
              border: 'none',
              cursor: 'pointer',
            }}
          >
            <Check size={13} weight="bold" color="#0f2e2b" />
            <span style={{
              fontSize: 11,
              fontWeight: 700,
              color: '#0f2e2b',
              letterSpacing: '0.07em',
              textTransform: 'uppercase',
              fontFamily: 'var(--font-sans, sans-serif)',
            }}>
              {PHOTOS.find(p => p.id === selectedId)?.name} Selected
            </span>
          </motion.button>
        ) : (
          <motion.p
            key="hint"
            initial={{ opacity: 0, y: 4 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-[#21211F] dark:text-white/35"
            style={{
              margin: 0,
              fontSize: 11,
              fontFamily: 'var(--font-sans, sans-serif)',
              letterSpacing: '0.05em',
            }}
          >
            swipe to browse
          </motion.p>
        )}
      </div>
    </div>
  )
}

```

---

## Andromeda Button

Category: Buttons & Toggles
Slug: `andromeda-button`
URL: https://aicanvas.me/components/andromeda-button

A sci-fi / blueprint-aesthetic button with five variants (default, outline, ghost, destructive, link), three sizes (small, medium, large), optional leading icon, and full hover / focus / active / disabled state coverage. Transparent hairline surfaces sit on a near-black canvas, with an electric-blue accent that brightens and glows on interaction.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/andromeda-button
```

```tsx
'use client'

// npm install @carbon/icons-react class-variance-authority clsx next tailwind-merge
// font: JetBrains Mono
/**
 * Demonstrates a tokenized button family with hover, focus, pressed, and disabled states.
 */

import { forwardRef } from 'react'
import type { ComponentType, ReactNode, ButtonHTMLAttributes } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { JetBrains_Mono } from 'next/font/google'
import { Notification, Settings } from '@carbon/icons-react'

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

function andromedaVars(): React.CSSProperties {
  return {
    '--andromeda-text-primary':    'rgba(255, 255, 255, 0.96)',
    '--andromeda-text-secondary':  'rgba(255, 255, 255, 0.62)',
    '--andromeda-surface-raised':  'rgba(255, 255, 255, 0.025)',
    '--andromeda-surface-hover':   'rgba(255, 255, 255, 0.06)',
    '--andromeda-surface-active':  'rgba(255, 255, 255, 0.09)',
    '--andromeda-border-base':     'rgba(255, 255, 255, 0.08)',
    '--andromeda-border-bright':   'rgba(255, 255, 255, 0.32)',
    '--andromeda-accent-base':     '#2DD4BF',
    '--andromeda-accent-bright':   '#5EEAD4',
    '--andromeda-accent-dim':      'rgba(45, 212, 191, 0.55)',
    '--andromeda-accent-glow':     'rgba(45, 212, 191, 0.18)',
    '--andromeda-accent-glow-soft':'rgba(45, 212, 191, 0.08)',
    '--andromeda-fault':           '#EF4444',
    '--andromeda-fault-dim':       'rgba(239, 68, 68, 0.50)',
    '--andromeda-fault-glow':      'rgba(239, 68, 68, 0.10)',
    '--andromeda-fault-ring':      'rgba(239, 68, 68, 0.25)',
    '--andromeda-font-mono':       "'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace",
    '--andromeda-text-xs':         '10px',
    '--andromeda-text-sm':         '12px',
    '--andromeda-text-md':         '14px',
    '--andromeda-weight-medium':   '500',
    '--andromeda-leading-tight':   '1.1',
    '--andromeda-tracking-wider':  '0.14em',
    '--andromeda-2':               '8px',
    '--andromeda-3':               '12px',
    '--andromeda-4':               '16px',
    '--andromeda-5':               '20px',
    '--andromeda-radius-none':     '0',
  } as React.CSSProperties
}

const buttonVariants = cva(
  [
    'relative inline-flex items-center justify-center select-none whitespace-nowrap',
    'gap-[var(--andromeda-2)] border border-solid rounded-[var(--andromeda-radius-none)]',
    '[font-family:var(--andromeda-font-mono)] font-[number:var(--andromeda-weight-medium)]',
    'uppercase [letter-spacing:var(--andromeda-tracking-wider)] [line-height:var(--andromeda-leading-tight)]',
    'cursor-pointer transition-all duration-150 ease-out active:scale-[0.97]',
    '[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
    'focus-visible:outline-none',
    'focus-visible:shadow-[0_0_0_1px_var(--andromeda-accent-dim),0_0_12px_var(--andromeda-accent-glow)]',
    'disabled:cursor-not-allowed disabled:opacity-[0.35] disabled:pointer-events-none',
  ],
  {
    variants: {
      variant: {
        default: [
          'text-[color:var(--andromeda-accent-base)] bg-[color:var(--andromeda-accent-glow-soft)] border-[color:var(--andromeda-accent-dim)]',
          'hover:text-[color:var(--andromeda-accent-bright)] hover:bg-[color:var(--andromeda-accent-glow)] hover:border-[color:var(--andromeda-accent-bright)]',
          'hover:shadow-[0_0_16px_var(--andromeda-accent-glow)]',
        ],
        outline: [
          'text-[color:var(--andromeda-text-primary)] bg-[color:var(--andromeda-surface-raised)] border-[color:var(--andromeda-border-base)]',
          'hover:bg-[color:var(--andromeda-surface-hover)] hover:border-[color:var(--andromeda-border-bright)]',
          'active:bg-[color:var(--andromeda-surface-active)]',
        ],
        ghost: [
          'text-[color:var(--andromeda-text-secondary)] bg-transparent border-transparent',
          'hover:text-[color:var(--andromeda-text-primary)] hover:bg-[color:var(--andromeda-surface-raised)]',
          'active:bg-[color:var(--andromeda-surface-hover)]',
        ],
        destructive: [
          'text-[color:var(--andromeda-fault)] bg-[color:var(--andromeda-fault-glow)] border-[color:var(--andromeda-fault-dim)]',
          'hover:bg-[color:var(--andromeda-fault-dim)] hover:text-[color:var(--andromeda-text-primary)] hover:border-[color:var(--andromeda-fault)]',
          'hover:shadow-[0_0_16px_var(--andromeda-fault-ring)]',
          'focus-visible:shadow-[0_0_0_1px_var(--andromeda-fault-dim),0_0_12px_var(--andromeda-fault-ring)]',
        ],
        link: [
          'text-[color:var(--andromeda-accent-base)] bg-transparent border-transparent',
          'underline-offset-4 hover:underline hover:text-[color:var(--andromeda-accent-bright)]',
          'focus-visible:shadow-none focus-visible:underline',
        ],
      },
      size: {
        sm: 'px-[var(--andromeda-3)] py-[5px] text-[length:var(--andromeda-text-xs)]',
        md: 'px-[var(--andromeda-4)] py-[var(--andromeda-2)] text-[length:var(--andromeda-text-sm)]',
        lg: 'px-[var(--andromeda-5)] py-[11px] text-[length:var(--andromeda-text-md)]',
      },
    },
    defaultVariants: { variant: 'default', size: 'md' },
  },
)

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants> & {
    icon?: ComponentType<{ size?: number | string }>
  }

const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { className, variant, size, icon: Icon, children, style, type = 'button', ...props },
  ref,
) {
  const iconSize = size === 'sm' ? 16 : size === 'lg' ? 20 : 18
  return (
    <button
      ref={ref}
      type={type}
      className={cn(buttonVariants({ variant, size }), className)}
      style={{ ...andromedaVars(), ...style }}
      {...props}
    >
      {Icon && <Icon size={iconSize} />}
      {children}
    </button>
  )
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-jetbrains-mono',
  display: 'swap',
})

function Row({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div
        style={{
          marginBottom: 12,
          fontFamily: "var(--andromeda-font-mono, 'JetBrains Mono', monospace)",
          fontSize: 10,
          color: 'rgba(255,255,255,0.22)',
          textTransform: 'uppercase',
          letterSpacing: '0.22em',
        }}
      >
        {label}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
        {children}
      </div>
    </div>
  )
}

export default function AndromedaButton() {
  return (
    <div
      className={'relative flex min-h-screen w-full items-center justify-center ' + jetbrainsMono.variable}
      style={{ background: '#0E0E0F' }}
    >
      <div style={{ width: '100%', maxWidth: 640, padding: 24 }}>
        <Row label="Variants">
          <Button variant="default">Default</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="destructive">Destructive</Button>
          <Button variant="link">Link</Button>
        </Row>
        <Row label="Sizes">
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
        </Row>
        <Row label="With icon">
          <Button icon={Notification}>Notifications</Button>
          <Button variant="outline" icon={Settings}>Settings</Button>
          <Button variant="destructive" icon={Notification}>Abort</Button>
        </Row>
        <Row label="Disabled">
          <Button disabled>Default</Button>
          <Button variant="outline" disabled>Outline</Button>
          <Button variant="destructive" disabled>Destructive</Button>
        </Row>
      </div>
    </div>
  )
}

```

---

## Glass AI Composer

Category: Inputs & Controls
Slug: `glass-ai-compose`
URL: https://aicanvas.me/components/glass-ai-compose

Glassmorphism AI chat input with image upload, web search toggle, and model switcher.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-ai-compose
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents a glass-styled AI composer with model and web-search controls.
 * Text input expands with content and supports removable image attachments.
 */

import { useState, useRef, useEffect, useCallback } from 'react'
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
import {
  PaperPlaneRight,
  ImageSquare,
  GlobeSimple,
  X,
} from '@phosphor-icons/react'


const BACKGROUND =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'

const MODELS = [
  { label: 'Claude',     color: '#FF7B54' },
  { label: 'ChatGPT',    color: '#10A37F' },
  { label: 'Perplexity', color: '#3A86FF' },
  { label: 'Gemini',     color: '#FFBE0B' },
] as const

type Model = (typeof MODELS)[number]

const MAX_TEXTAREA_HEIGHT = 160


const glassBlur = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const glassPanel = {
  background: 'rgba(255, 255, 255, 0.08)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const ACTIVE_GLOW =
  '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1.5px rgba(255, 255, 255, 0.25), 0 0 20px rgba(255, 255, 255, 0.06)'


function ModelSwitcher({
  activeModel,
  onSelect,
}: {
  activeModel: Model
  onSelect: (model: Model) => void
}) {
  return (
    <div className="relative flex items-center gap-0.5">
      {MODELS.map((model) => {
        const isActive = model.label === activeModel.label
        return (
          <button
            key={model.label}
            onClick={() => onSelect(model)}
            className="relative z-10 flex cursor-pointer flex-col items-center rounded-lg px-3 py-1.5"
            style={{ background: 'transparent', flex: 1 }}
          >
            {isActive && (
              <motion.div
                layoutId="model-pill"
                className="absolute inset-0 rounded-lg"
                style={{
                  background: `${model.color}18`,
                  border: `1px solid ${model.color}22`,
                }}
                transition={{ type: 'spring', stiffness: 400, damping: 28 }}
              />
            )}
            <span
              className="relative z-10 text-[11px] font-semibold"
              style={{
                color: isActive ? model.color : 'rgba(255,255,255,0.50)',
                transition: 'color 0.15s',
              }}
            >
              {model.label}
            </span>
          </button>
        )
      })}
    </div>
  )
}


function ImageThumbnail({
  src,
  onRemove,
}: {
  src: string
  onRemove: () => void
}) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.8 }}
      transition={{ type: 'spring', stiffness: 350, damping: 25 }}
      className="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl"
      style={{
        border: '1px solid rgba(255, 255, 255, 0.12)',
      }}
    >
      <img
        src={src}
        alt="Upload preview"
        className="h-full w-full object-cover"
      />
      <motion.button
        onClick={onRemove}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.85 }}
        className="absolute right-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full"
        style={{
          background: 'rgba(0, 0, 0, 0.6)',
          border: '1px solid rgba(255, 255, 255, 0.15)',
        }}
      >
        <X size={10} weight="regular" className="text-white/80" />
      </motion.button>
    </motion.div>
  )
}


export default function GlassAiCompose() {
  const [isActive, setIsActive] = useState(false)
  const [message, setMessage] = useState('')
  const [activeModel, setActiveModel] = useState<Model>(MODELS[0])
  const [images, setImages] = useState<string[]>([])
  const [webSearch, setWebSearch] = useState(false)
  const [showWebLabel, setShowWebLabel] = useState(false)

  const containerRef = useRef<HTMLDivElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const prefersReduced = useReducedMotion()
  const reducedMotion = prefersReduced ?? false

  const canSend = message.trim().length > 0 || images.length > 0

  useEffect(() => {
    if (!webSearch) { setShowWebLabel(false); return }
    setShowWebLabel(true)
    const timer = setTimeout(() => setShowWebLabel(false), 1000)
    return () => clearTimeout(timer)
  }, [webSearch])

  const resizeTextarea = useCallback(() => {
    const el = textareaRef.current
    if (!el) return
    el.style.height = 'auto'
    el.style.height = `${Math.min(el.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`
  }, [])

  useEffect(() => {
    if (!isActive) return
    const handler = (e: MouseEvent | TouchEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsActive(false)
      }
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [isActive])

  function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const files = e.target.files
    if (!files) return
    for (let i = 0; i < files.length; i++) {
      const reader = new FileReader()
      reader.onload = (ev) => {
        if (ev.target?.result) {
          setImages((prev) => [...prev, ev.target!.result as string])
        }
      }
      reader.readAsDataURL(files[i])
    }
    e.target.value = ''
  }

  function handleSend() {
    if (!canSend) return
    setMessage('')
    setImages([])
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
    }
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

  const springOrFade = reducedMotion
    ? { duration: 0.15 }
    : { type: 'spring' as const, stiffness: 350, damping: 28 }

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div
        ref={containerRef}
        className="relative z-10 w-[calc(100%-2rem)] max-w-[420px]"
      >
        <motion.div
          animate={{
            boxShadow: isActive ? ACTIVE_GLOW : glassPanel.boxShadow,
          }}
          transition={springOrFade}
          className="relative isolate overflow-hidden rounded-2xl"
          style={{
            background: glassPanel.background,
            border: glassPanel.border,
          }}
        >
          {}
          <div
            className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl"
            style={glassBlur}
          />

          {}
          <div
            className="absolute left-6 right-6 top-0 z-10 h-[1px]"
            style={{
              background:
                'linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)',
            }}
          />

          {}
          <div className="relative z-10 flex flex-col gap-6 p-4 pb-2">
            {}
            <textarea
              ref={textareaRef}
              value={message}
              onChange={(e) => {
                setMessage(e.target.value)
                resizeTextarea()
              }}
              onFocus={() => setIsActive(true)}
              onKeyDown={handleKeyDown}
              placeholder="Ask anything..."
              rows={1}
              className="w-full resize-none bg-transparent font-sans text-sm font-medium text-white/90 placeholder-white/40 outline-none"
              style={{
                caretColor: activeModel.color,
                maxHeight: MAX_TEXTAREA_HEIGHT,
              }}
            />

            {}
            <AnimatePresence>
              {images.length > 0 && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: 'auto' }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={springOrFade}
                  className="flex gap-2 overflow-hidden"
                >
                  <AnimatePresence>
                    {images.map((src, i) => (
                      <ImageThumbnail
                        key={`${i}-${src.slice(-20)}`}
                        src={src}
                        onRemove={() =>
                          setImages((prev) => prev.filter((_, idx) => idx !== i))
                        }
                      />
                    ))}
                  </AnimatePresence>
                </motion.div>
              )}
            </AnimatePresence>

            {}
            <div className="flex items-center justify-between">
              {}
              <div className="flex items-center gap-2">
                <motion.button
                  onClick={() => fileInputRef.current?.click()}
                  whileHover={reducedMotion ? undefined : { scale: 1.08, background: 'rgba(255, 255, 255, 0.14)' }}
                  whileTap={reducedMotion ? undefined : { scale: 0.88 }}
                  transition={{ type: 'spring', stiffness: 320, damping: 20 }}
                  className="flex cursor-pointer items-center justify-center rounded-xl"
                  style={{
                    width: 32,
                    height: 32,
                    background: 'rgba(255, 255, 255, 0.08)',
                    border: '1px solid rgba(255, 255, 255, 0.12)',
                  }}
                >
                  <ImageSquare
                    size={16}
                    weight="regular"
                    style={{
                      color: 'rgba(255, 255, 255, 0.5)',
                      transition: 'color 0.15s',
                    }}
                  />
                </motion.button>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  multiple
                  onChange={handleImageUpload}
                  className="hidden"
                />

                {}
                <motion.button
                  onClick={() => setWebSearch((v) => !v)}
                  whileHover={reducedMotion ? undefined : { scale: 1.08, background: webSearch ? `${activeModel.color}28` : 'rgba(255, 255, 255, 0.14)' }}
                  whileTap={reducedMotion ? undefined : { scale: 0.88 }}
                  transition={{ type: 'spring', stiffness: 320, damping: 20 }}
                  className="flex cursor-pointer items-center justify-center rounded-xl"
                  style={{
                    width: 32,
                    height: 32,
                    background: webSearch ? `${activeModel.color}18` : 'rgba(255, 255, 255, 0.08)',
                    border: webSearch ? `1px solid ${activeModel.color}22` : '1px solid rgba(255, 255, 255, 0.12)',
                    transition: 'background 0.15s, border 0.15s',
                  }}
                >
                  <GlobeSimple
                    size={16}
                    weight="regular"
                    style={{
                      color: webSearch ? activeModel.color : 'rgba(255, 255, 255, 0.5)',
                      transition: 'color 0.15s',
                    }}
                  />
                </motion.button>

                {}
                <AnimatePresence>
                  {showWebLabel && (
                    <motion.span
                      initial={{ opacity: 0, x: -4 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -4 }}
                      transition={{ duration: 0.15 }}
                      className="text-[10px] font-semibold"
                      style={{ color: `${activeModel.color}88` }}
                    >
                      Web search on
                    </motion.span>
                  )}
                </AnimatePresence>
              </div>

              {}
              <motion.button
                onClick={handleSend}
                disabled={!canSend}
                animate={{
                  background: canSend
                    ? `${activeModel.color}40`
                    : 'rgba(255, 255, 255, 0.06)',
                  border: canSend
                    ? `1px solid ${activeModel.color}66`
                    : '1px solid rgba(255, 255, 255, 0.08)',
                }}
                whileHover={
                  canSend && !reducedMotion ? { scale: 1.08 } : undefined
                }
                whileTap={
                  canSend && !reducedMotion ? { scale: 0.88 } : undefined
                }
                transition={{ type: 'spring', stiffness: 320, damping: 20 }}
                className="flex cursor-pointer items-center justify-center rounded-xl"
                style={{
                  width: 36,
                  height: 36,
                  opacity: canSend ? 1 : 0.4,
                  pointerEvents: canSend ? 'auto' : 'none',
                }}
              >
                <PaperPlaneRight
                  size={16}
                  weight="regular"
                  style={{
                    color: canSend
                      ? activeModel.color
                      : 'rgba(255, 255, 255, 0.3)',
                    transition: 'color 0.15s',
                  }}
                />
              </motion.button>
            </div>
          </div>

          {}
          <div
            className="mx-4 h-[1px]"
            style={{ background: 'rgba(255, 255, 255, 0.07)' }}
          />

          {}
          <div className="relative z-10 px-3 py-2.5">
            <ModelSwitcher activeModel={activeModel} onSelect={setActiveModel} />
          </div>
        </motion.div>
      </div>
    </div>
  )
}

```

---

## Glass Progress

Category: Widgets
Slug: `glass-progress`
URL: https://aicanvas.me/components/glass-progress

Glassmorphism progress bar panel with glowing gradient fills, spring-animated counters, staggered reveal, and replay button.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-progress
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays staggered glass progress bars with animated counters and fills.
 * The replay control resets every bar and runs the sequence again.
 */

import { useState, useEffect, useCallback } from 'react'
import { motion, useSpring, useMotionValueEvent, useReducedMotion } from 'framer-motion'
import { ArrowClockwise } from '@phosphor-icons/react'


const GLASS_BLUR = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const GLASS_PANEL = {
  background: 'rgba(255, 255, 255, 0.06)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const BACKGROUND_IMAGE =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'


interface GlassProgressBarProps {
  value: number
  color: string
  gradient: string
  label?: string
  animated?: boolean
}

interface BarConfig {
  label: string
  value: number
  color: string
  gradient: string
  delay: number
}


const BARS: BarConfig[] = [
  { label: 'Storage', value: 72, color: '#3A86FF', gradient: '#3A86FF, #2962FF', delay: 200 },
  { label: 'Upload',  value: 45, color: '#FF5C8A', gradient: '#FF5C8A, #FF1744', delay: 400 },
  { label: 'Battery', value: 88, color: '#06D6A0', gradient: '#06D6A0, #00BFA5', delay: 600 },
  { label: 'Memory',  value: 30, color: '#FFBE0B', gradient: '#FFBE0B, #FF9800', delay: 800 },
]


function GlassProgressBar({
  value,
  color,
  gradient,
  label,
  animated = false,
}: GlassProgressBarProps) {
  const prefersReduced = useReducedMotion()

  const springValue = useSpring(0, { stiffness: 80, damping: 20 })
  const [displayPercent, setDisplayPercent] = useState(0)

  useEffect(() => {
    springValue.set(value)
  }, [value, springValue])

  useMotionValueEvent(springValue, 'change', (latest) => {
    setDisplayPercent(Math.round(latest))
  })

  const glowAlpha = Math.round(40 + value * 0.4)
    .toString(16)
    .padStart(2, '0')
  const glowSize = 4 + value * 0.08

  const fillTransition = prefersReduced
    ? { duration: 0.3 }
    : { type: 'spring' as const, stiffness: 200, damping: 24 }

  const pulseAnimate =
    animated && !prefersReduced
      ? {
          width: `${value}%`,
          opacity: [0.85, 1, 0.85],
        }
      : { width: `${value}%` }

  const pulseTransition =
    animated && !prefersReduced
      ? {
          width: fillTransition,
          opacity: { duration: 2, repeat: Infinity, ease: 'easeInOut' as const },
        }
      : fillTransition

  return (
    <div className="w-full">
      {}
      <div className="mb-2 flex items-center justify-between px-1">
        {label && (
          <span className="text-[10px] font-semibold uppercase tracking-widest text-white/40 font-sans">
            {label}
          </span>
        )}
        <span
          className="text-[10px] font-semibold tabular-nums font-sans"
          style={{ color: `${color}88` }}
        >
          {displayPercent}%
        </span>
      </div>

      {}
      <div
        className="relative h-2 w-full overflow-hidden rounded-full"
        style={{ ...GLASS_PANEL }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 rounded-full"
          style={GLASS_BLUR}
        />

        {}
        <motion.div
          className="absolute bottom-0 left-0 top-0 rounded-full"
          style={{
            background: `linear-gradient(90deg, ${gradient})`,
            filter: `drop-shadow(0 0 ${glowSize}px ${color}${glowAlpha})`,
          }}
          initial={{ width: '0%' }}
          animate={pulseAnimate}
          transition={pulseTransition}
        />
      </div>
    </div>
  )
}


export default function GlassProgress() {
  const [values, setValues] = useState<number[]>([0, 0, 0, 0])
  const [resetKey, setResetKey] = useState(0)

  const replay = useCallback(() => {
    setValues([0, 0, 0, 0])
    setResetKey((k) => k + 1)
  }, [])

  useEffect(() => {
    const timeouts: ReturnType<typeof setTimeout>[] = []

    BARS.forEach((bar, i) => {
      const id = setTimeout(() => {
        setValues((prev) => {
          const next = [...prev]
          next[i] = bar.value
          return next
        })
      }, bar.delay)
      timeouts.push(id)
    })

    return () => {
      timeouts.forEach(clearTimeout)
    }
  }, [resetKey])

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src={BACKGROUND_IMAGE}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      <div className="relative flex w-full max-w-[340px] flex-col items-center gap-4 px-4">
        {}
        <motion.div
          initial={{ scale: 0.92, y: 16 }}
          animate={{ scale: 1, y: 0 }}
          transition={{ type: 'spring', stiffness: 300, damping: 26 }}
          className="relative isolate w-full overflow-hidden rounded-3xl"
          style={{ ...GLASS_PANEL }}
        >
          {}
          <div
            className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
            style={GLASS_BLUR}
          />

          {}
          <div
            className="absolute left-8 right-8 top-0 h-[1px]"
            style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)' }}
          />

          {}
          <div className="flex flex-col gap-5 px-6 py-6">
            {BARS.map((bar, i) => (
              <GlassProgressBar
                key={bar.label}
                label={bar.label}
                value={values[i]}
                color={bar.color}
                gradient={bar.gradient}
                animated
              />
            ))}
          </div>
        </motion.div>

        {}
        <motion.button
          onClick={replay}
          whileHover={{ scale: 1.12, background: 'rgba(255,255,255,0.12)' }}
          whileTap={{ scale: 0.9, rotate: -90 }}
          transition={{ type: 'spring', stiffness: 400, damping: 20 }}
          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full"
          style={{
            background: 'rgba(255, 255, 255, 0.06)',
            border: '1px solid rgba(255, 255, 255, 0.1)',
          }}
          aria-label="Replay animation"
        >
          <ArrowClockwise size={18} weight="regular" className="text-white/50" />
        </motion.button>
      </div>
    </div>
  )
}

```

---

## Glass Stepper

Category: Inputs & Controls
Slug: `glass-stepper`
URL: https://aicanvas.me/components/glass-stepper

Glassmorphism numeric stepper with spring number flip, notification-style tinted buttons, and configurable min/max/step.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-stepper
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays glass stepper fields with bounded increment and decrement controls.
 * Value changes animate the readout and its supporting progress fill.
 */

import { useState, useRef } from 'react'
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
import { Minus, Plus } from '@phosphor-icons/react'


const glassBlur = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const glassPanel = {
  background: 'rgba(255, 255, 255, 0.08)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const BACKGROUND_IMAGE =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'


const BUTTON_SPRING = { type: 'spring' as const, stiffness: 300, damping: 20 }


interface GlassStepperFieldProps {
  min?: number
  max?: number
  step?: number
  initialValue?: number
  label?: string
  color: string
  gradient: string
}


function GlassStepperField({
  min = 0,
  max = 10,
  step = 1,
  initialValue,
  label,
  color,
  gradient,
}: GlassStepperFieldProps) {
  const prefersReduced = useReducedMotion()
  const [value, setValue] = useState(initialValue ?? min)
  const directionRef = useRef<1 | -1>(1)

  const atMin = value <= min
  const atMax = value >= max

  function increment() {
    if (atMax) return
    directionRef.current = 1
    setValue((prev) => Math.min(prev + step, max))
  }

  function decrement() {
    if (atMin) return
    directionRef.current = -1
    setValue((prev) => Math.max(prev - step, min))
  }

  const slideOffset = prefersReduced ? 0 : 24
  const direction = directionRef.current

  return (
    <div className="flex w-[132px] flex-col">
      {}
      {label && (
        <div className="mb-2 flex items-baseline justify-between px-1">
          <span className="font-sans text-[10px] font-semibold uppercase tracking-widest text-white/40">
            {label}
          </span>
          <span
            className="font-sans text-[10px] font-semibold tabular-nums"
            style={{ color: `${color}88` }}
          >
            {value} / {max}
          </span>
        </div>
      )}

      {}
      <div
        className="relative isolate overflow-hidden rounded-2xl"
        style={glassPanel}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl"
          style={glassBlur}
        />

        {}
        <div
          className="absolute left-4 right-4 top-0 z-10 h-[1px]"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)' }}
        />

        {}
        <div className="relative z-10 flex items-stretch justify-between p-2">
          {}
          <motion.button
            onClick={decrement}
            whileHover={atMin || prefersReduced ? undefined : { scale: 1.08 }}
            whileTap={atMin || prefersReduced ? undefined : { scale: 0.88 }}
            transition={BUTTON_SPRING}
            disabled={atMin}
            aria-label="Decrease"
            className="flex cursor-pointer items-center justify-center rounded-xl"
            style={{
              width: 36,
              outline: 'none',
              background: `${color}${atMin ? '0a' : '18'}`,
              border: `1px solid ${color}${atMin ? '0a' : '22'}`,
              opacity: atMin ? 0.4 : 1,
              pointerEvents: atMin ? 'none' : 'auto',
            }}
          >
            <Minus size={16} weight="regular" style={{ color: atMin ? 'rgba(255,255,255,0.3)' : color }} />
          </motion.button>

          {}
          <div
            className="flex items-center justify-center overflow-hidden"
            style={{ width: 36 }}
          >
            <AnimatePresence mode="popLayout" initial={false}>
              <motion.span
                key={value}
                initial={{
                  opacity: 0,
                  y: direction * slideOffset,
                  scale: 0.5,
                }}
                animate={{
                  opacity: 1,
                  y: 0,
                  scale: 1,
                }}
                exit={{
                  opacity: 0,
                  y: direction * -slideOffset,
                  scale: 1.4,
                }}
                transition={
                  prefersReduced
                    ? { duration: 0.15 }
                    : { type: 'spring', stiffness: 260, damping: 18 }
                }
                className="font-sans text-base font-bold tabular-nums"
                style={{
                  background: `linear-gradient(135deg, ${gradient})`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }}
              >
                {value}
              </motion.span>
            </AnimatePresence>
          </div>

          {}
          <motion.button
            onClick={increment}
            whileHover={atMax || prefersReduced ? undefined : { scale: 1.08 }}
            whileTap={atMax || prefersReduced ? undefined : { scale: 0.88 }}
            transition={BUTTON_SPRING}
            disabled={atMax}
            aria-label="Increase"
            className="flex cursor-pointer items-center justify-center rounded-xl"
            style={{
              width: 36,
              outline: 'none',
              background: `${color}${atMax ? '0a' : '18'}`,
              border: `1px solid ${color}${atMax ? '0a' : '22'}`,
              opacity: atMax ? 0.4 : 1,
              pointerEvents: atMax ? 'none' : 'auto',
            }}
          >
            <Plus size={16} weight="regular" style={{ color: atMax ? 'rgba(255,255,255,0.3)' : color }} />
          </motion.button>
        </div>
      </div>
    </div>
  )
}


export default function GlassStepper() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src={BACKGROUND_IMAGE}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div className="relative z-10 flex flex-wrap items-start justify-center gap-5 px-4">
        <GlassStepperField
          label="Quantity"
          min={0}
          max={10}
          step={1}
          initialValue={0}
          color="#3A86FF"
          gradient="#3A86FF, #2962FF"
        />
        <GlassStepperField
          label="Guests"
          min={1}
          max={8}
          step={1}
          initialValue={1}
          color="#FF5C8A"
          gradient="#FF5C8A, #FF1744"
        />
        <GlassStepperField
          label="Volume"
          min={0}
          max={100}
          step={5}
          initialValue={50}
          color="#06D6A0"
          gradient="#06D6A0, #00BFA5"
        />
      </div>
    </div>
  )
}

```

---

## Glass Search Bar

Category: Inputs & Controls
Slug: `glass-search-bar`
URL: https://aicanvas.me/components/glass-search-bar

Glassmorphism search bar with animated suggestion dropdown, active state glow, and reduced-motion support.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-search-bar
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents a glass search field with a filtered suggestion list.
 * Typing, clearing, pressing Escape, or clicking outside updates the open state.
 */

import { useState, useRef, useEffect, useCallback } from 'react'
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
import {
  MagnifyingGlass,
  X,
  MusicNote,
  File,
  Lightning,
} from '@phosphor-icons/react'


interface Suggestion {
  icon: typeof MusicNote
  label: string
  color: string
}


const BACKGROUND =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20pink%20Flower%20%20(1).png'

const SUGGESTIONS: Suggestion[] = [
  { icon: MusicNote, label: 'Audio visualizers',   color: '#FF5C8A' },
  { icon: File,      label: 'Documentation files', color: '#3A86FF' },
  { icon: Lightning, label: 'Quick actions',       color: '#06D6A0' },
]

const BAR_HEIGHT = 48
const MIN_TOUCH_TARGET = 44


const glassBlur = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const glassPanel = {
  background: 'rgba(255, 255, 255, 0.08)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const ACTIVE_GLOW =
  '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.08)'


function SuggestionRow({
  suggestion,
  index,
  reducedMotion,
  onSelect,
  onClear,
}: {
  suggestion: Suggestion
  index: number
  reducedMotion: boolean
  onSelect: (label: string) => void
  onClear: (label: string) => void
}) {
  const [hovered, setHovered] = useState(false)
  const Icon = suggestion.icon

  return (
    <motion.div
      initial={reducedMotion ? { opacity: 0 } : { opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={
        reducedMotion
          ? { duration: 0.15 }
          : { duration: 0.15, delay: 0.06 + index * 0.04 }
      }
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 font-sans"
      style={{
        minHeight: MIN_TOUCH_TARGET,
        background: 'transparent',
      }}
    >
      {}
      <motion.button
        onClick={() => onSelect(suggestion.label)}
        animate={
          reducedMotion
            ? {}
            : {
                x: hovered ? 3 : 0,
                scale: hovered ? 1.08 : 1,
              }
        }
        whileTap={{ scale: 0.90 }}
        transition={{ type: 'spring', stiffness: 320, damping: 20 }}
        className="flex min-w-0 flex-1 cursor-pointer items-center gap-3"
        style={{ background: 'transparent', transformOrigin: 'left center' }}
      >
        {}
        <div
          className="flex shrink-0 items-center justify-center rounded-xl"
          style={{
            width: 32,
            height: 32,
            background: `${suggestion.color}18`,
            border: `1px solid ${suggestion.color}22`,
          }}
        >
          <Icon size={16} weight="regular" style={{ color: suggestion.color }} />
        </div>

        <span
          className="text-sm font-semibold font-sans"
          style={{
            color: hovered ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.75)',
            transition: 'color 0.15s',
          }}
        >
          {suggestion.label}
        </span>
      </motion.button>

      {}
      <button
        onClick={(e) => { e.stopPropagation(); onClear(suggestion.label) }}
        className="shrink-0 cursor-pointer rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-white/40 font-sans"
        style={{ background: 'rgba(255, 255, 255, 0.06)' }}
        aria-label={`Clear ${suggestion.label}`}
      >
        Clear
      </button>
    </motion.div>
  )
}


export default function GlassSearchBar() {
  const [isActive, setIsActive] = useState(false)
  const [query, setQuery] = useState('')
  const [hiddenSuggestions, setHiddenSuggestions] = useState<Set<string>>(new Set())

  const containerRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  const prefersReduced = useReducedMotion()
  const reducedMotion = prefersReduced ?? false

  const filteredSuggestions = SUGGESTIONS
    .filter((s) => !hiddenSuggestions.has(s.label))
    .filter((s) =>
      query.trim() ? s.label.toLowerCase().includes(query.toLowerCase()) : true
    )


  const activate = useCallback(() => {
    setIsActive(true)
    requestAnimationFrame(() => {
      inputRef.current?.focus()
    })
  }, [])


  const deactivate = useCallback(() => {
    setIsActive(false)
    setQuery('')
    inputRef.current?.blur()
  }, [])


  useEffect(() => {
    if (!isActive) return

    function handleClickOutside(e: MouseEvent | TouchEvent) {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node)
      ) {
        deactivate()
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    document.addEventListener('touchstart', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
      document.removeEventListener('touchstart', handleClickOutside)
    }
  }, [isActive, deactivate])


  useEffect(() => {
    if (!isActive) return

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape') deactivate()
    }

    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [isActive, deactivate])


  function handleClear() {
    setQuery('')
    inputRef.current?.focus()
  }

  function handleSuggestionSelect(label: string) {
    setQuery(label)
    inputRef.current?.focus()
  }

  function handleSuggestionClear(label: string) {
    setHiddenSuggestions((prev) => new Set(prev).add(label))
  }

  const springOrFade = reducedMotion
    ? { duration: 0.15 }
    : ({ type: 'spring', stiffness: 400, damping: 30 } as const)

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div
        ref={containerRef}
        className="absolute w-[calc(100%-2rem)] max-w-[380px]"
        style={{ top: '30%', left: '50%', transform: 'translateX(-50%)' }}
      >
        {}
        <motion.div
          animate={{
            boxShadow: isActive ? ACTIVE_GLOW : glassPanel.boxShadow,
          }}
          transition={springOrFade}
          onClick={!isActive ? activate : undefined}
          className="relative isolate flex w-full cursor-text items-center rounded-3xl"
          style={{
            height: BAR_HEIGHT,
            ...glassPanel,
            borderRadius: 24,
          }}
        >
          {}
          <div
            className="pointer-events-none absolute inset-0 z-[-1]"
            style={{ ...glassBlur, borderRadius: 24 }}
          />

          {}
          <div
            className="flex shrink-0 items-center justify-center"
            style={{
              width: BAR_HEIGHT,
              height: BAR_HEIGHT,
              minWidth: MIN_TOUCH_TARGET,
              minHeight: MIN_TOUCH_TARGET,
            }}
          >
            <MagnifyingGlass
              size={20}
              weight="regular"
              className="text-white/50"
            />
          </div>

          {}
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onFocus={activate}
            placeholder="Search components..."
            className="min-w-0 flex-1 bg-transparent font-sans text-sm font-medium text-white/90 placeholder-white/30 outline-none"
            style={{ caretColor: '#7D8D41' }}
            aria-label="Search components"
          />

          {}
          <AnimatePresence>
            {query.length > 0 && (
              <motion.button
                key="clear"
                initial={
                  reducedMotion
                    ? { opacity: 0 }
                    : { opacity: 0, scale: 0.5 }
                }
                animate={
                  reducedMotion
                    ? { opacity: 1 }
                    : { opacity: 1, scale: 1 }
                }
                exit={
                  reducedMotion
                    ? { opacity: 0 }
                    : { opacity: 0, scale: 0.5 }
                }
                transition={springOrFade}
                onClick={handleClear}
                className="flex shrink-0 cursor-pointer items-center justify-center rounded-full"
                style={{
                  width: 20,
                  height: 20,
                  marginRight: 14,
                  background: 'rgba(255, 255, 255, 0.08)',
                  border: '1px solid rgba(255, 255, 255, 0.12)',
                }}
                whileHover={{ backgroundColor: 'rgba(255, 255, 255, 0.14)' }}
                whileTap={{ scale: 0.88 }}
                aria-label="Clear search"
              >
                <X size={10} weight="regular" className="text-white/60" />
              </motion.button>
            )}
          </AnimatePresence>
        </motion.div>

        {}
        <AnimatePresence>
          {isActive && filteredSuggestions.length > 0 && (
            <motion.div
              key="dropdown"
              initial={
                reducedMotion
                  ? { opacity: 0 }
                  : { opacity: 0, scale: 0.95, y: -8, filter: 'blur(4px)' }
              }
              animate={
                reducedMotion
                  ? { opacity: 1 }
                  : { opacity: 1, scale: 1, y: 0, filter: 'blur(0px)' }
              }
              exit={
                reducedMotion
                  ? { opacity: 0 }
                  : { opacity: 0, scale: 0.95, y: -8, filter: 'blur(4px)' }
              }
              transition={
                reducedMotion
                  ? { duration: 0.15 }
                  : { type: 'spring', stiffness: 350, damping: 28 }
              }
              className="absolute left-0 right-0 rounded-2xl p-2"
              style={{ ...glassPanel, ...glassBlur, transformOrigin: 'top center', top: BAR_HEIGHT + 8 }}
            >

              {}
              <div
                className="absolute left-6 right-6 top-0 h-[1px]"
                style={{
                  background:
                    'linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)',
                }}
              />

              {}
              <p className="mb-0.5 px-3 pt-1 text-[10px] font-semibold uppercase tracking-widest text-white/25 font-sans">
                {query.trim() ? 'Results' : 'Suggestions'}
              </p>

              {}
              {filteredSuggestions.map((suggestion, i) => (
                <SuggestionRow
                  key={suggestion.label}
                  suggestion={suggestion}
                  index={i}
                  reducedMotion={reducedMotion}
                  onSelect={handleSuggestionSelect}
                  onClear={handleSuggestionClear}
                />
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}

```

---

## Glass Toast

Category: Notifications
Slug: `glass-toast`
URL: https://aicanvas.me/components/glass-toast

Frosted glassmorphism toast notification stack with 4 variants, auto-dismiss progress bar, and spring-animated stacking.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-toast
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents trigger buttons that add timed glass toasts to a stacked region.
 * Toast progress pauses on hover and resumes until dismissal.
 */

import { useState, useRef, useEffect, useCallback } from 'react'
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
import {
  CheckCircle,
  XCircle,
  Warning,
  Info,
  X,
} from '@phosphor-icons/react'


const GLASS_BLUR = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const GLASS_PANEL = {
  background: 'rgba(255, 255, 255, 0.06)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow:
    '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const

const BACKGROUND_IMAGE =
  'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20pink%20Flower%20%20(1).png'

const TOAST_DURATION = 4000
const MAX_TOASTS = 3


type ToastVariant = 'success' | 'error' | 'warning' | 'info'

interface Toast {
  id: string
  variant: ToastVariant
  title: string
  description?: string
}

interface VariantConfig {
  color: string
  gradient: string
  icon: typeof CheckCircle
  label: string
}

const VARIANTS: Record<ToastVariant, VariantConfig> = {
  success: { color: '#06D6A0', gradient: '#06D6A0, #00BFA5', icon: CheckCircle, label: 'Success' },
  error:   { color: '#FF5C8A', gradient: '#FF5C8A, #FF1744', icon: XCircle,     label: 'Error' },
  warning: { color: '#FFBE0B', gradient: '#FFBE0B, #FF9800', icon: Warning,     label: 'Warning' },
  info:    { color: '#3A86FF', gradient: '#3A86FF, #2962FF', icon: Info,        label: 'Info' },
}

const DEMO_TOASTS: Record<ToastVariant, { title: string; description: string }> = {
  success: { title: 'Changes saved', description: 'Your settings have been updated successfully' },
  error:   { title: 'Upload failed', description: 'The file exceeds the maximum size limit' },
  warning: { title: 'Low storage', description: 'You have less than 100MB remaining' },
  info:    { title: 'New update', description: 'Version 2.4 is now available' },
}


const ENTER_SPRING = { type: 'spring' as const, stiffness: 300, damping: 26 }
const BUTTON_SPRING = { type: 'spring' as const, stiffness: 300, damping: 20 }


function useToastProgress(
  id: string,
  isPaused: boolean,
  onComplete: (id: string) => void,
) {
  const progressRef = useRef<HTMLDivElement>(null)
  const elapsedRef = useRef(0)
  const lastTimeRef = useRef(0)
  const rafRef = useRef(0)

  useEffect(() => {
    let alive = true
    lastTimeRef.current = performance.now()

    function tick(now: number) {
      if (!alive) return

      if (!isPaused) {
        const delta = now - lastTimeRef.current
        elapsedRef.current += delta
      }

      lastTimeRef.current = now

      const fraction = Math.max(0, 1 - elapsedRef.current / TOAST_DURATION)

      if (progressRef.current) {
        progressRef.current.style.transform = `scaleX(${fraction})`
      }

      if (fraction <= 0) {
        onComplete(id)
        return
      }

      rafRef.current = requestAnimationFrame(tick)
    }

    rafRef.current = requestAnimationFrame(tick)

    return () => {
      alive = false
      cancelAnimationFrame(rafRef.current)
    }
  }, [id, isPaused, onComplete])

  return progressRef
}


function ToastCard({
  toast,
  onDismiss,
  prefersReduced,
}: {
  toast: Toast
  onDismiss: (id: string) => void
  prefersReduced: boolean | null
}) {
  const [hovered, setHovered] = useState(false)
  const variant = VARIANTS[toast.variant]
  const Icon = variant.icon

  const handleComplete = useCallback(
    (id: string) => onDismiss(id),
    [onDismiss],
  )

  const progressRef = useToastProgress(toast.id, hovered, handleComplete)

  const enterAnim = prefersReduced
    ? { opacity: 0 }
    : { opacity: 0, x: 80, scale: 0.95 }

  const showAnim = prefersReduced
    ? { opacity: 1 }
    : { opacity: 1, x: 0, scale: 1 }

  const exitAnim = prefersReduced
    ? { opacity: 0 }
    : { opacity: 0, x: 80, scale: 0.95 }

  return (
    <motion.div
      layout
      initial={enterAnim}
      animate={{
        ...showAnim,
        scale: hovered && !prefersReduced ? 1.01 : 1,
      }}
      exit={exitAnim}
      transition={ENTER_SPRING}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="relative w-full overflow-hidden rounded-2xl"
      style={{ ...GLASS_PANEL }}
    >
      {}
      <div
        className="pointer-events-none absolute inset-0 z-0 rounded-2xl"
        style={GLASS_BLUR}
      />

      {}
      <div className="relative z-10 flex items-center gap-3 py-3.5 pl-4 pr-10">
        {}
        <div
          className="flex shrink-0 items-center justify-center rounded-xl"
          style={{
            width: 36,
            height: 36,
            background: `${variant.color}18`,
            border: `1px solid ${variant.color}22`,
          }}
        >
          <Icon size={18} weight="regular" style={{ color: variant.color }} />
        </div>

        {}
        <div className="flex min-w-0 flex-1 flex-col">
          <span className="truncate text-sm font-semibold text-white/90 font-sans">
            {toast.title}
          </span>
          {toast.description && (
            <span className="mt-0.5 truncate text-xs text-white/50 font-sans">
              {toast.description}
            </span>
          )}
        </div>
      </div>

      {}
      {}
      <motion.button
        type="button"
        onClick={() => onDismiss(toast.id)}
        aria-label="Dismiss"
        className="absolute right-0 top-1/2 z-20 flex -translate-y-1/2 cursor-pointer items-center justify-center bg-transparent"
        style={{ width: 44, height: 44, outline: 'none' }}
      >
        <motion.span
          whileHover={{ backgroundColor: 'rgba(255, 255, 255, 0.14)' }}
          whileTap={{ scale: 0.88 }}
          className="flex items-center justify-center rounded-full"
          style={{
            width: 20,
            height: 20,
            background: 'rgba(255, 255, 255, 0.08)',
            border: '1px solid rgba(255, 255, 255, 0.12)',
          }}
        >
          <X size={10} weight="regular" className="text-white/60" />
        </motion.span>
      </motion.button>

      {}
      <div className="absolute bottom-0 left-0 right-0 h-[2px]">
        <div
          ref={progressRef}
          className="h-full w-full origin-left"
          style={{ background: `${variant.color}99` }}
        />
      </div>
    </motion.div>
  )
}


function TriggerButton({
  variant,
  onTrigger,
}: {
  variant: ToastVariant
  onTrigger: () => void
}) {
  const config = VARIANTS[variant]
  const Icon = config.icon

  return (
    <motion.button
      onClick={onTrigger}
      whileHover={{ scale: 1.08 }}
      whileTap={{ scale: 0.90 }}
      transition={BUTTON_SPRING}
      className="relative isolate flex cursor-pointer items-center gap-2.5 overflow-hidden rounded-2xl px-3 py-2 font-sans"
      style={{
        ...GLASS_PANEL,
        outline: 'none',
        minHeight: 44,
      }}
    >
      {}
      <div
        className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl"
        style={GLASS_BLUR}
      />

      {}
      <div
        className="flex shrink-0 items-center justify-center rounded-xl"
        style={{
          width: 32,
          height: 32,
          background: `${config.color}18`,
          border: `1px solid ${config.color}22`,
        }}
      >
        <Icon size={16} weight="regular" style={{ color: config.color }} />
      </div>

      <span className="text-sm font-semibold text-white/70">{config.label}</span>
    </motion.button>
  )
}


export default function GlassToast() {
  const [toasts, setToasts] = useState<Toast[]>([])
  const prefersReduced = useReducedMotion()
  const idCounter = useRef(0)

  const dismissToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])

  const addToast = useCallback((variant: ToastVariant) => {
    const demo = DEMO_TOASTS[variant]
    const id = `toast-${++idCounter.current}`
    setToasts((prev) => {
      const next = [...prev, { id, variant, ...demo }]
      if (next.length > MAX_TOASTS) {
        return next.slice(next.length - MAX_TOASTS)
      }
      return next
    })
  }, [])

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#1A1A19]">
      {}
      <img
        src={BACKGROUND_IMAGE}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div className="relative z-10 flex flex-wrap items-center justify-center gap-3 px-4">
        {(Object.keys(VARIANTS) as ToastVariant[]).map((variant) => (
          <TriggerButton
            key={variant}
            variant={variant}
            onTrigger={() => addToast(variant)}
          />
        ))}
      </div>

      {}
      <div className="fixed bottom-4 left-4 right-4 z-50 flex flex-col-reverse gap-3 sm:bottom-6 sm:left-auto sm:right-6 sm:w-[380px]">
        <AnimatePresence mode="popLayout" initial={false}>
          {toasts.map((toast) => (
            <ToastCard
              key={toast.id}
              toast={toast}
              onDismiss={dismissToast}
              prefersReduced={prefersReduced}
            />
          ))}
        </AnimatePresence>
      </div>
    </div>
  )
}

```

---

## Glass User Menu

Category: Navigation
Slug: `glass-user-menu`
URL: https://aicanvas.me/components/glass-user-menu

Frosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-user-menu
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents an avatar-triggered glass user menu with grouped actions.
 * The dropdown animates open and closes after outside pointer interaction.
 */

import { useState, useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
  User,
  Gear,
  SignOut,
  Users,
  CreditCard,
  CaretUpDown,
} from '@phosphor-icons/react'


const BACKGROUND = 'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png?updatedAt=1775223702866'

const USER = {
  name: 'Jennifer Rivera',
  email: 'jennifer@studio.io',
  avatar: 'https://ik.imagekit.io/aitoolkit/Miscellaneous/Avatars/Silhouette%20Profile%20Against%20Gradient%20Background%201.webp',
}

const MENU_GROUPS = [
  {
    label: 'Account',
    items: [
      { icon: User, label: 'Profile',  color: '#3A86FF' },
      { icon: Gear, label: 'Settings', color: '#B388FF' },
    ],
  },
  {
    label: 'Workspace',
    items: [
      { icon: Users,      label: 'Team',    color: '#06D6A0' },
      { icon: CreditCard, label: 'Billing', color: '#FFBE0B' },
    ],
  },
]


const glassPanel = {
  background: 'rgba(255, 255, 255, 0.08)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow: '0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1)',
}

const glassPanelBlur = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
}

const ACTIVE_GLOW =
  '0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.08)'


function MenuItem({
  icon: Icon,
  label,
  color,
  index,
}: {
  icon: typeof User
  label: string
  color: string
  index: number
}) {
  const [hovered, setHovered] = useState(false)

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.15, delay: 0.06 + index * 0.04 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5"
      style={{ minHeight: 44, background: 'transparent' }}
    >
      {}
      <motion.button
        onClick={() => {}}
        animate={{
          x: hovered ? 3 : 0,
          scale: hovered ? 1.08 : 1,
        }}
        whileTap={{ scale: 0.90 }}
        transition={{ type: 'spring', stiffness: 320, damping: 20 }}
        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5"
        style={{ background: 'transparent', transformOrigin: 'left center' }}
      >
        {}
        <div
          className="flex shrink-0 items-center justify-center rounded-xl"
          style={{
            width: 32,
            height: 32,
            background: `${color}18`,
            border: `1px solid ${color}22`,
          }}
        >
          <Icon size={16} weight="regular" style={{ color }} />
        </div>
        <span
          className="text-sm font-medium"
          style={{
            color: hovered ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.70)',
            transition: 'color 0.15s',
          }}
        >
          {label}
        </span>
      </motion.button>
    </motion.div>
  )
}


export default function GlassUserMenu() {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!open) return
    const handler = (e: MouseEvent | TouchEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [open])

  let itemIndex = 0

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      <div ref={ref} className="relative flex flex-col items-center" style={{ marginTop: -150 }}>

        {}
        <motion.button
          onClick={() => setOpen(v => !v)}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.97 }}
          animate={{ boxShadow: open ? ACTIVE_GLOW : glassPanel.boxShadow }}
          transition={{ type: 'spring', stiffness: 300, damping: 26 }}
          className="relative isolate flex cursor-pointer items-center gap-2 rounded-2xl px-4 py-2.5"
          style={{
            background: glassPanel.background,
            border: glassPanel.border,
          }}
        >
          <div className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl" style={glassPanelBlur} />
          <img
            src={USER.avatar}
            alt={USER.name}
            className="h-8 w-8 shrink-0 rounded-full object-cover"
          />
          <span className="text-sm font-semibold text-white/80">{USER.name}</span>
          <CaretUpDown size={16} weight="regular" className="text-white/40" />
        </motion.button>

        {}
        <AnimatePresence>
          {open && (
            <motion.div
              initial={{ opacity: 0, scale: 0.95, x: '-50%', y: -8, filter: 'blur(4px)' }}
              animate={{ opacity: 1, scale: 1, x: '-50%', y: 0, filter: 'blur(0px)' }}
              exit={{ opacity: 0, scale: 0.95, x: '-50%', y: -8, filter: 'blur(4px)' }}
              transition={{ type: 'spring', stiffness: 350, damping: 28 }}
              className="absolute left-1/2 top-full mt-2 w-[min(256px,calc(100vw-32px))] rounded-2xl p-2"
              style={{ ...glassPanel, ...glassPanelBlur, transformOrigin: 'top center' }}
            >
              {}
              <div
                className="absolute bottom-6 left-0 top-6 w-[1px]"
                style={{ background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent)' }}
              />

              {}
              {MENU_GROUPS.map((group) => (
                <div key={group.label} className="mb-1">
                  <p className="mb-0.5 px-3 pt-1 text-[10px] font-semibold uppercase tracking-widest text-white/25">
                    {group.label}
                  </p>
                  {group.items.map((item) => (
                    <MenuItem key={item.label} icon={item.icon} label={item.label} color={item.color} index={itemIndex++} />
                  ))}
                </div>
              ))}

              {}
              <div className="mx-2 my-1.5 h-[1px]" style={{ background: 'rgba(255,255,255,0.07)' }} />

              {}
              <LogOutItem index={itemIndex} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}


function LogOutItem({ index }: { index: number }) {
  const [hovered, setHovered] = useState(false)

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.15, delay: 0.06 + index * 0.04 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5"
      style={{ minHeight: 44, background: 'transparent' }}
    >
      <motion.button
        onClick={() => {}}
        animate={{
          x: hovered ? 3 : 0,
          scale: hovered ? 1.08 : 1,
        }}
        whileTap={{ scale: 0.90 }}
        transition={{ type: 'spring', stiffness: 320, damping: 20 }}
        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5"
        style={{ background: 'transparent', transformOrigin: 'left center' }}
      >
        <div
          className="flex shrink-0 items-center justify-center rounded-xl"
          style={{
            width: 32,
            height: 32,
            background: '#FF5A5A18',
            border: '1px solid #FF5A5A22',
          }}
        >
          <SignOut size={16} weight="regular" style={{ color: '#FF5A5A' }} />
        </div>
        <span
          className="text-sm font-medium"
          style={{
            color: hovered ? 'rgba(255,90,90,0.95)' : 'rgba(255,90,90,0.70)',
            transition: 'color 0.15s',
          }}
        >
          Log Out
        </span>
      </motion.button>
    </motion.div>
  )
}

```

---

## Glass Sidebar

Category: Navigation
Slug: `glass-sidebar`
URL: https://aicanvas.me/components/glass-sidebar

Collapsible glassmorphism sidebar with icon-only and full label states, spring-animated expand and collapse.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-sidebar
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a collapsible glass navigation sidebar with icon tiles.
 * Expanding reveals labels, while the collapsed state exposes hover tooltips.
 */

import { useState, useEffect } from 'react'
import { motion, useSpring, AnimatePresence } from 'framer-motion'
import {
  House,
  MagnifyingGlass,
  Folders,
  Bell,
  ChartLine,
  Gear,
  User,
  ArrowRight,
  ArrowLeft,
} from '@phosphor-icons/react'


const COLLAPSED_WIDTH = 64
const EXPANDED_WIDTH = 220

// tune: change to resize the icon tiles
const ICON_TILE_SIZE = 44
const TOGGLE_BUTTON_HEIGHT = 36

const NAV_ITEMS = [
  { icon: House,           label: 'Home',          color: '#3A86FF' },
  { icon: MagnifyingGlass, label: 'Search',        color: '#B388FF' },
  { icon: Folders,         label: 'Projects',      color: '#FFBE0B' },
  { icon: Bell,            label: 'Notifications', color: '#FF5C8A' },
  { icon: ChartLine,       label: 'Analytics',     color: '#06D6A0' },
  { icon: Gear,            label: 'Settings',      color: '#C9A96E' },
  { icon: User,            label: 'Profile',       color: '#FF7B54' },
] as const

type NavItem = (typeof NAV_ITEMS)[number]

const GLASS_BLUR_STYLE = {
  backdropFilter: 'blur(24px) saturate(1.8)',
  WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
} as const

const GLASS_STYLE = {
  background: 'rgba(255, 255, 255, 0.06)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow: '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
} as const


function NavItemRow({
  item,
  index,
  isActive,
  isOpen,
  onActivate,
}: {
  item: NavItem
  index: number
  isActive: boolean
  isOpen: boolean
  onActivate: () => void
}) {
  const [hovered, setHovered] = useState(false)
  const Icon = item.icon

  useEffect(() => { setHovered(false) }, [isOpen])

  return (
    <div className="relative flex w-full items-center">
      {}
      <AnimatePresence>
        {!isOpen && hovered && (
          <motion.div
            key="tooltip"
            initial={{ opacity: 0, x: -6 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -6 }}
            transition={{ duration: 0.15 }}
            className="pointer-events-none absolute left-[calc(100%+10px)] z-50 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold text-white/90 font-sans"
            style={{ ...GLASS_STYLE, ...GLASS_BLUR_STYLE }}
          >
            {item.label}
          </motion.div>
        )}
      </AnimatePresence>

      {}
      <motion.button
        onClick={onActivate}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        animate={{
          scale: hovered ? (isOpen ? 1.08 : 1.15) : 1,
          x: hovered ? (isOpen ? 0 : 3) : 0,
        }}
        whileTap={{ scale: 0.90 }}
        // tune: raise stiffness to sharpen item motion
        transition={{ type: 'spring', stiffness: 320, damping: 20 }}
        className="flex w-full items-center gap-3 rounded-xl cursor-pointer justify-start"
        style={{ background: 'transparent', border: 'none', outline: 'none' }}
        aria-label={item.label}
      >
        {}
        <motion.div
          className="flex shrink-0 items-center justify-center rounded-xl"
          style={{
            width: ICON_TILE_SIZE,
            height: ICON_TILE_SIZE,
            background: isActive ? `${item.color}28` : `${item.color}18`,
            border: `1px solid ${isActive ? `${item.color}44` : `${item.color}22`}`,
            transition: 'background 0.2s, border-color 0.2s',
          }}
        >
          <Icon size={20} weight="regular" style={{ color: item.color }} />
        </motion.div>

        {}
        <AnimatePresence>
          {isOpen && (
            <motion.span
              key="label"
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0, transition: { duration: 0.18, ease: 'easeOut', delay: 0.18 + index * 0.03 } }}
              exit={{ opacity: 0, x: -6, transition: { duration: 0.08, ease: 'easeIn', delay: 0 } }}
              className="whitespace-nowrap text-sm font-semibold font-sans"
              style={{
                color: isActive ? item.color : 'rgba(255,255,255,0.75)',
              }}
            >
              {item.label}
            </motion.span>
          )}
        </AnimatePresence>
      </motion.button>
    </div>
  )
}


export default function GlassSidebar() {
  const [isOpen, setIsOpen] = useState(false)
  const [activeIndex, setActiveIndex] = useState(0)
  const [toggleHovered, setToggleHovered] = useState(false)

  const widthSpring = useSpring(COLLAPSED_WIDTH, { stiffness: 280, damping: 26 })

  function toggle() {
    const next = !isOpen
    setIsOpen(next)
    widthSpring.set(next ? EXPANDED_WIDTH : COLLAPSED_WIDTH)
  }

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20pink%20Flower%20%20(1).png"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div style={{ width: EXPANDED_WIDTH }} className="flex items-center justify-start">
        {}
        <motion.div
          style={{
            width: widthSpring,
            ...GLASS_STYLE,
          }}
          initial={{ x: -20 }}
          animate={{ x: 0 }}
          // tune: raise the delay to postpone the sidebar entrance
          transition={{ type: 'spring', stiffness: 200, damping: 22, delay: 0.1 }}
          className="relative isolate flex h-auto flex-col items-center gap-2 overflow-visible rounded-3xl px-2.5 py-3"
        >
          {}
          <div
            className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
            style={GLASS_BLUR_STYLE}
          />

          {}
          <div className="flex w-full flex-col gap-1.5">
            {NAV_ITEMS.map((item, i) => (
              <NavItemRow
                key={item.label}
                item={item}
                index={i}
                isActive={activeIndex === i}
                isOpen={isOpen}
                onActivate={() => setActiveIndex(i)}
              />
            ))}
          </div>

          {}
          <div
            className="my-1 w-full"
            style={{ height: 1, background: 'rgba(255,255,255,0.1)' }}
          />

          {}
          <div className={`flex w-full items-center ${isOpen ? 'justify-start px-1' : 'justify-center'}`}>
            <motion.button
              onClick={toggle}
              onMouseEnter={() => setToggleHovered(true)}
              onMouseLeave={() => setToggleHovered(false)}
              animate={{ scale: toggleHovered ? 1.08 : 1 }}
              whileTap={{ scale: 0.90 }}
              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
              className="flex items-center justify-center rounded-2xl cursor-pointer"
              style={{
                width: ICON_TILE_SIZE,
                height: TOGGLE_BUTTON_HEIGHT,
                background: 'rgba(255,255,255,0.08)',
                border: '1px solid rgba(255,255,255,0.12)',
                outline: 'none',
              }}
              aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
            >
              {}
              <AnimatePresence mode="wait" initial={false}>
                {isOpen ? (
                  <motion.span
                    key="left"
                    initial={{ opacity: 0, rotate: 90 }}
                    animate={{ opacity: 1, rotate: 0 }}
                    exit={{ opacity: 0, rotate: -90 }}
                    transition={{ duration: 0.18 }}
                  >
                    <ArrowLeft size={18} weight="regular" className="text-white/70" />
                  </motion.span>
                ) : (
                  <motion.span
                    key="right"
                    initial={{ opacity: 0, rotate: -90 }}
                    animate={{ opacity: 1, rotate: 0 }}
                    exit={{ opacity: 0, rotate: 90 }}
                    transition={{ duration: 0.18 }}
                  >
                    <ArrowRight size={18} weight="regular" className="text-white/70" />
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.button>
          </div>
        </motion.div>
      </div>
    </div>
  )
}

```

---

## Glass Notifications

Category: Notifications
Slug: `glass-notification`
URL: https://aicanvas.me/components/glass-notification

Swipe-to-dismiss notification stack with glass cards and spring-animated layout transitions.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-notification
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a glass notification stack with individual dismiss controls.
 * Cards can also be dragged sideways, and dismissed items can be restored.
 */

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Bell, ChatCircle, Heart, ShieldCheck, X, ArrowUp } from '@phosphor-icons/react'

interface Notification {
  id: number
  icon: typeof Bell
  color: string
  title: string
  message: string
  time: string
}

const INITIAL_NOTIFICATIONS: Notification[] = [
  {
    id: 1,
    icon: ChatCircle,
    color: '#3A86FF',
    title: 'New Message',
    message: 'Alex sent you a photo',
    time: '2m ago',
  },
  {
    id: 2,
    icon: Heart,
    color: '#FF7B54',
    title: 'New Like',
    message: 'Sarah liked your post',
    time: '5m ago',
  },
  {
    id: 3,
    icon: ShieldCheck,
    color: '#06D6A0',
    title: 'Security',
    message: 'New login from MacBook Pro',
    time: '12m ago',
  },
  {
    id: 4,
    icon: ArrowUp,
    color: '#B388FF',
    title: 'Update Available',
    message: 'Version 4.2 is ready to install',
    time: '1h ago',
  },
  {
    id: 5,
    icon: Bell,
    color: '#FFBE0B',
    title: 'Reminder',
    message: 'Team standup in 15 minutes',
    time: '1h ago',
  },
]

function NotificationCard({
  notification,
  onDismiss,
  index,
}: {
  notification: Notification
  onDismiss: (id: number) => void
  index: number
}) {
  const Icon = notification.icon

  return (
    <motion.div
      layout
      initial={{ x: 60, scale: 0.9 }}
      animate={{ x: 0, scale: 1, transition: { type: 'spring', stiffness: 280, damping: 24, delay: index * 0.05 } }}
      exit={{ opacity: 0, x: -60, scale: 0.9, filter: 'blur(4px)', transition: { duration: 0.2, ease: 'easeIn' } }}
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.3}
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 80) {
          onDismiss(notification.id)
        }
      }}
      className="group relative isolate w-full cursor-grab overflow-hidden rounded-2xl active:cursor-grabbing transition-colors duration-200"
      style={{
        background: 'rgba(255, 255, 255, 0.06)',
        border: '1px solid rgba(255, 255, 255, 0.08)',
        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06)',
      }}
      whileHover={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}
    >
      {}
      <div
        className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl"
        style={{ backdropFilter: 'blur(20px) saturate(1.6)', WebkitBackdropFilter: 'blur(20px) saturate(1.6)' }}
      />
      <div className="flex items-start gap-3.5 px-4 py-3.5 pr-12">
        {}
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ type: 'spring', stiffness: 400, damping: 18, delay: 0.1 + index * 0.05 }}
          className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl"
          style={{
            background: `${notification.color}18`,
            border: `1px solid ${notification.color}22`,
          }}
        >
          <Icon size={18} weight="regular" style={{ color: notification.color }} />
        </motion.div>

        {}
        <div className="min-w-0 flex-1">
          <h4 className="text-sm font-semibold text-white/85">{notification.title}</h4>
          <p className="mt-0.5 text-[13px] text-white/40">{notification.message}</p>
        </div>
      </div>

      {}
      <div className="absolute right-3 top-3 flex flex-col items-end gap-1.5">
        <motion.button
          whileHover={{ scale: 1.2, backgroundColor: 'rgba(255,255,255,0.15)' }}
          whileTap={{ scale: 0.85 }}
          onClick={() => onDismiss(notification.id)}
          aria-label={`Dismiss ${notification.title}`}
          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-full"
          style={{
            background: 'rgba(255,255,255,0.06)',
          }}
        >
          <X size={11} weight="regular" className="text-white/30" />
        </motion.button>
        <span className="text-[10px] text-white/25">{notification.time}</span>
      </div>

      {}
      <div
        className="absolute bottom-0 left-4 right-4 h-[1px]"
        style={{
          background: `linear-gradient(90deg, transparent, ${notification.color}22, transparent)`,
        }}
      />
    </motion.div>
  )
}

export default function GlassNotification() {
  const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS)

  const dismiss = (id: number) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id))
  }

  const reset = () => setNotifications(INITIAL_NOTIFICATIONS)

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />
      {}
      <div
        className="relative flex w-[360px] flex-col gap-2.5"
      >
        {}
        <div className="mb-1 flex items-center justify-between px-1">
          <div className="flex items-center gap-2">
            <Bell size={20} weight="regular" className="text-white/40" />
            <span className="text-sm font-semibold text-white/60">
              Notifications
            </span>
            {notifications.length > 0 && (
              <motion.span
                layout
                className="flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[9px] font-semibold text-white"
                style={{
                  background: 'rgba(255, 107, 245, 0.4)',
                  border: '1px solid rgba(255, 107, 245, 0.3)',
                }}
              >
                {notifications.length}
              </motion.span>
            )}
          </div>
          {notifications.length < INITIAL_NOTIFICATIONS.length && (
            <motion.button
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={reset}
              className="cursor-pointer text-xs font-medium text-white/30 transition-colors hover:text-white/50"
            >
              Reset
            </motion.button>
          )}
        </div>

        {}
        <AnimatePresence mode="popLayout">
          {notifications.map((n, i) => (
            <NotificationCard key={n.id} notification={n} onDismiss={dismiss} index={i} />
          ))}
        </AnimatePresence>

        {}
        <AnimatePresence>
          {notifications.length === 0 && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              className="flex flex-col items-center gap-3 py-12"
            >
              <span className="text-sm text-white/60">All caught up</span>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}

```

---

## Glass Music Player

Category: Widgets
Slug: `glass-music-player`
URL: https://aicanvas.me/components/glass-music-player

Mini music player with glass surface, spinning vinyl art, animated progress bar, and ambient glow.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-music-player
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Simulates a glass music player with track switching and playback progress.
 * Play and skip drive the simulated timeline, while like and shuffle toggle local state.
 */

import { useState, useEffect, useRef } from 'react'
import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'
import { Play, Pause, SkipBack, SkipForward, Heart, Shuffle, Queue, ArrowLeft } from '@phosphor-icons/react'

const TRACKS = [
  { title: 'Midnight Drive',  artist: 'Neon Collective', color: '#FF6BF5', duration: 234 },
  { title: 'Glass Horizons',  artist: 'Aurora Synth',    color: '#06D6A0', duration: 198 },
  { title: 'Warm Signal',     artist: 'Dusk Protocol',   color: '#FF7B54', duration: 267 },
]

function formatTime(s: number) {
  const m   = Math.floor(s / 60)
  const sec = Math.floor(s % 60)
  return `${m}:${sec.toString().padStart(2, '0')}`
}

export default function GlassMusicPlayer() {
  const [trackIdx,  setTrackIdx]  = useState(0)
  const [playing,   setPlaying]   = useState(false)
  const [liked,     setLiked]     = useState(false)
  const [shuffled,  setShuffled]  = useState(false)
  const [elapsed,   setElapsed]   = useState(0)
  const rafRef      = useRef<number>(0)
  const startRef    = useRef(0)
  const progressRef = useRef(0)

  const progressMV  = useMotionValue(0)
  const barWidth    = useTransform(progressMV, v => `${v * 100}%`)

  const track = TRACKS[trackIdx]

  useEffect(() => {
    if (!playing) { cancelAnimationFrame(rafRef.current); return }
    const SPEED = 15
    startRef.current = performance.now() - progressRef.current * track.duration * (1000 / SPEED)
    let lastLabelUpdate = 0
    const tick = (now: number) => {
      const ms  = now - startRef.current
      const pct = Math.min(ms / (track.duration * (1000 / SPEED)), 1)
      progressRef.current = pct

      progressMV.set(pct)

      // tune: raise the interval to reduce timestamp updates
      if (now - lastLabelUpdate > 250) {
        setElapsed(pct * track.duration)
        lastLabelUpdate = now
      }

      if (pct < 1) {
        rafRef.current = requestAnimationFrame(tick)
      } else {
        setPlaying(false)
        progressRef.current = 0
        progressMV.set(0)
        setElapsed(0)
      }
    }
    rafRef.current = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(rafRef.current)
  }, [playing, track.duration, progressMV])

  const skipTo = (dir: -1 | 1) => {
    setPlaying(false)
    progressRef.current = 0
    progressMV.set(0)
    setElapsed(0)
    setTrackIdx(i => (i + dir + TRACKS.length) % TRACKS.length)
  }

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <motion.div
        initial={{ y: 24, scale: 0.95 }}
        animate={{ y: 0, scale: 1 }}
        transition={{ type: 'spring', stiffness: 200, damping: 22 }}
        className="relative isolate w-[320px] overflow-hidden rounded-[32px]"
        style={{
          background: 'rgba(12,10,14,0.55)',
          border: '1px solid rgba(255,255,255,0.09)',
          boxShadow: '0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07)',
        }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-[32px]"
          style={{ backdropFilter: 'blur(48px) saturate(1.6)', WebkitBackdropFilter: 'blur(48px) saturate(1.6)' }}
        />
        {}
        <div
          className="absolute left-12 right-12 top-0 h-[1px]"
          style={{ background: 'linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent)' }}
        />

        <div className="flex flex-col items-center px-7 pb-7 pt-6">

          {}
          <div className="mb-6 flex w-full items-center justify-between">
            {}
            <motion.div
              aria-hidden
              whileHover={{ scale: 1.15, color: 'rgba(255,255,255,0.8)' }}
              whileTap={{ scale: 0.85 }}
              style={{ color: 'rgba(255,255,255,0.35)' }}
            >
              <ArrowLeft size={20} weight="regular" />
            </motion.div>

            <span
              className="text-[10px] font-semibold uppercase tracking-[0.18em]"
              style={{ color: 'rgba(255,255,255,0.4)' }}
            >
              Now Playing
            </span>

            <motion.button
              whileHover={{ scale: 1.15 }}
              whileTap={{ scale: 0.85 }}
              onClick={() => setLiked(l => !l)}
              className="cursor-pointer"
              animate={{ color: liked ? track.color : 'rgba(255,255,255,0.35)' }}
              transition={{ duration: 0.2 }}
            >
              <Heart size={20} weight={liked ? 'fill' : 'regular'} />
            </motion.button>
          </div>

          {}
          <AnimatePresence mode="wait">
            <motion.div
              key={trackIdx}
              initial={{ opacity: 0, scale: 0.85 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.85 }}
              transition={{ type: 'spring', stiffness: 260, damping: 26 }}
              className="relative mb-7"
            >
              {}
              <div
                className="absolute inset-0 rounded-full"
                style={{
                  background: track.color,
                  opacity: 0.18,
                  filter: 'blur(28px)',
                  transform: 'scale(1.15)',
                }}
              />
              {}
              <div
                className="relative flex h-44 w-44 items-center justify-center rounded-full"
                style={{
                  background: `radial-gradient(circle at 38% 35%, ${track.color}28, ${track.color}08 60%, transparent)`,
                  border: `1.5px solid ${track.color}25`,
                  boxShadow: `0 0 0 8px rgba(255,255,255,0.03), 0 12px 40px rgba(0,0,0,0.5)`,
                }}
              >
                <motion.div
                  animate={{ rotate: playing ? 360 : 0 }}
                  transition={{ duration: 4, repeat: Infinity, ease: 'linear' }}
                  className="relative h-28 w-28"
                >
                  {[1, 0.78, 0.58, 0.38].map((s, i) => (
                    <div
                      key={i}
                      className="absolute inset-0 rounded-full"
                      style={{
                        transform: `scale(${s})`,
                        border: `1px solid ${track.color}${i === 0 ? '30' : i === 1 ? '1e' : '14'}`,
                      }}
                    />
                  ))}
                  {}
                  <div
                    className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full"
                    style={{
                      background: `radial-gradient(circle at 40% 40%, ${track.color}cc, ${track.color}66)`,
                      boxShadow: `0 0 10px ${track.color}55`,
                    }}
                  />
                </motion.div>
              </div>
            </motion.div>
          </AnimatePresence>

          {}
          <AnimatePresence mode="wait">
            <motion.div
              key={trackIdx}
              initial={{ opacity: 0, y: 10, filter: 'blur(4px)' }}
              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
              exit={{ opacity: 0, y: -10, filter: 'blur(4px)' }}
              transition={{ type: 'spring', duration: 0.4, bounce: 0 }}
              className="mb-4 flex flex-col items-center gap-1"
            >
              <h3 className="text-lg font-bold tracking-tight text-white/95">{track.title}</h3>
              <p className="text-[13px] font-medium" style={{ color: 'rgba(255,255,255,0.38)' }}>{track.artist}</p>
            </motion.div>
          </AnimatePresence>

          {}
          <div className="mb-5 flex items-center gap-[7px]">
            {TRACKS.map((_, i) => (
              <motion.button
                key={i}
                onClick={() => {
                  setPlaying(false)
                  progressRef.current = 0
                  progressMV.set(0)
                  setElapsed(0)
                  setTrackIdx(i)
                }}
                animate={{
                  width:           i === trackIdx ? 20 : 5,
                  opacity:         i === trackIdx ? 0.5 : 0.22,
                  backgroundColor: i === trackIdx ? track.color : '#ffffff',
                }}
                transition={{ type: 'spring', stiffness: 400, damping: 28 }}
                className="h-[5px] cursor-pointer rounded-full"
                style={{ minWidth: 5 }}
              />
            ))}
          </div>

          {}
          <div className="mb-5 w-full">
            {}
            <div
              className="relative h-[3px] w-full overflow-hidden rounded-full"
              style={{ background: 'rgba(255,255,255,0.07)' }}
            >
              <motion.div
                className="absolute left-0 top-0 h-full rounded-full"
                style={{
                  width: barWidth,
                  background: `linear-gradient(90deg,${track.color}70,${track.color}dd)`,
                }}
              />
            </div>
            <div className="mt-2 flex justify-between">
              <span className="text-[10px] font-medium tabular-nums" style={{ color: 'rgba(255,255,255,0.28)' }}>
                {formatTime(elapsed)}
              </span>
              <span className="text-[10px] font-medium tabular-nums" style={{ color: 'rgba(255,255,255,0.28)' }}>
                {formatTime(track.duration)}
              </span>
            </div>
          </div>

          {}
          <div className="flex w-full items-center justify-between">

            <motion.button
              whileHover={{ scale: 1.15, color: shuffled ? track.color : 'rgba(255,255,255,0.75)' }}
              whileTap={{ scale: 0.85 }}
              onClick={() => setShuffled(s => !s)}
              className="cursor-pointer"
              animate={{ color: shuffled ? track.color : 'rgba(255,255,255,0.35)' }}
              transition={{ duration: 0.2 }}
            >
              <Shuffle size={19} weight="regular" />
            </motion.button>

            <motion.button
              whileHover={{ scale: 1.12, color: 'rgba(255,255,255,0.95)' }}
              whileTap={{ scale: 0.9 }}
              onClick={() => skipTo(-1)}
              className="cursor-pointer"
              style={{ color: 'rgba(255,255,255,0.65)' }}
            >
              <SkipBack size={26} weight="fill" />
            </motion.button>

            {}
            <motion.button
              whileHover={{ scale: 1.07 }}
              whileTap={{ scale: 0.92 }}
              onClick={() => setPlaying(p => !p)}
              className="flex h-[52px] w-[52px] cursor-pointer items-center justify-center rounded-full"
              animate={{
                background: `radial-gradient(circle at 38% 35%, ${track.color}ee, ${track.color}99)`,
                boxShadow: `0 4px 20px ${track.color}55, 0 0 0 1px ${track.color}33`,
              }}
              transition={{ duration: 0.3 }}
            >
              <AnimatePresence mode="wait">
                {playing ? (
                  <motion.div
                    key="pause"
                    initial={{ scale: 0.6, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0.6, opacity: 0 }}
                    transition={{ duration: 0.15 }}
                  >
                    <Pause size={22} weight="fill" className="text-white" />
                  </motion.div>
                ) : (
                  <motion.div
                    key="play"
                    initial={{ scale: 0.6, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0.6, opacity: 0 }}
                    transition={{ duration: 0.15 }}
                  >
                    <Play size={22} weight="fill" className="ml-0.5 text-white" />
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.button>

            <motion.button
              whileHover={{ scale: 1.12, color: 'rgba(255,255,255,0.95)' }}
              whileTap={{ scale: 0.9 }}
              onClick={() => skipTo(1)}
              className="cursor-pointer"
              style={{ color: 'rgba(255,255,255,0.65)' }}
            >
              <SkipForward size={26} weight="fill" />
            </motion.button>

            {}
            <motion.div
              aria-hidden
              whileHover={{ scale: 1.15, color: 'rgba(255,255,255,0.75)' }}
              whileTap={{ scale: 0.85 }}
              style={{ color: 'rgba(255,255,255,0.35)' }}
            >
              <Queue size={19} weight="regular" />
            </motion.div>

          </div>

        </div>
      </motion.div>
    </div>
  )
}

```

---

## Glass Toggle

Category: Buttons & Toggles
Slug: `glass-toggle`
URL: https://aicanvas.me/components/glass-toggle

On/off toggles with glass housing and liquid-feel spring animation. Track color transitions smoothly.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-toggle
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a glass settings panel with a spring-animated toggle.
 * Switching changes the thumb position, status label, and track glow.
 */

import { useState, useEffect, useId } from 'react'
import { motion, useSpring, useTransform } from 'framer-motion'

function Toggle({
  label,
  defaultOn = false,
  color,
  delay,
}: {
  label: string
  defaultOn?: boolean
  color: string
  delay: number
}) {
  const [on, setOn] = useState(defaultOn)
  const labelId = useId()
  const progress = useSpring(defaultOn ? 1 : 0, { stiffness: 300, damping: 22 })

  useEffect(() => {
    progress.set(on ? 1 : 0)
  }, [on, progress])

  const trackBg = useTransform(
    progress,
    [0, 1],
    ['rgba(255,255,255,0.08)', `${color}44`]
  )
  const trackBorder = useTransform(
    progress,
    [0, 1],
    ['rgba(255,255,255,0.1)', `${color}55`]
  )
  const thumbX = useTransform(progress, [0, 1], [2, 26])
  const thumbShadow = useTransform(
    progress,
    [0, 1],
    ['0 2px 8px rgba(0,0,0,0.3)', `0 2px 16px ${color}44`]
  )

  return (
    <motion.div
      initial={{ opacity: 0, x: -16 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ type: 'spring', stiffness: 200, damping: 22, delay }}
      className="flex items-center justify-between"
    >
      <div className="flex flex-col">
        <span id={labelId} className="text-sm font-medium text-white/60">{label}</span>
        <motion.span
          animate={{ opacity: on ? 1 : 0.5 }}
          className="text-[11px]"
          style={{ color: on ? color : 'rgba(255,255,255,0.25)' }}
        >
          {on ? 'On' : 'Off'}
        </motion.span>
      </div>

      <motion.button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        onClick={() => setOn(!on)}
        className="relative h-8 w-14 cursor-pointer rounded-full p-0"
        style={{
          background: trackBg,
          border: '1px solid',
          borderColor: trackBorder,
          boxShadow: on ? `0 0 20px ${color}15, inset 0 1px 2px rgba(0,0,0,0.1)` : 'inset 0 1px 2px rgba(0,0,0,0.2)',
        }}
        whileTap={{ scale: 0.95 }}
      >
        {}
        <motion.div
          className="absolute inset-0 rounded-full"
          animate={{ opacity: on ? 0.3 : 0 }}
          style={{ background: `radial-gradient(circle at 75% 50%, ${color}, transparent 70%)` }}
        />

        {}
        <motion.div
          className="absolute top-1/2 h-6 w-6 rounded-full"
          style={{
            x: thumbX,
            y: '-50%',
            background: on
              ? `linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85))`
              : 'linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5))',
            boxShadow: thumbShadow,
          }}
        >
          {}
          <div
            className="absolute inset-[2px] rounded-full"
            style={{
              background: 'linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 60%)',
            }}
          />
        </motion.div>
      </motion.button>
    </motion.div>
  )
}

export default function GlassToggle() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />
      {}
      <motion.div
        initial={{ y: 20, scale: 0.96 }}
        animate={{ y: 0, scale: 1 }}
        transition={{ type: 'spring', stiffness: 200, damping: 22 }}
        className="relative isolate flex w-[320px] flex-col gap-5 rounded-3xl px-7 py-7"
        style={{
          background: 'rgba(255, 255, 255, 0.06)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
        }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
          style={{ backdropFilter: 'blur(24px) saturate(1.6)', WebkitBackdropFilter: 'blur(24px) saturate(1.6)' }}
        />
        {}
        <div
          className="absolute left-7 right-7 top-0 h-[1px]"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)' }}
        />

        {}
        <h3 className="text-base font-semibold text-white/80">Preferences</h3>

        <Toggle label="Dark Mode" defaultOn={true} color="#FF6BF5" delay={0.1} />

        <div className="h-[1px] w-full" style={{ background: 'rgba(255,255,255,0.06)' }} />

        <Toggle label="Notifications" defaultOn={true} color="#06D6A0" delay={0.15} />

        <div className="h-[1px] w-full" style={{ background: 'rgba(255,255,255,0.06)' }} />

        <Toggle label="Auto-Update" defaultOn={false} color="#FFBE0B" delay={0.2} />

        <div className="h-[1px] w-full" style={{ background: 'rgba(255,255,255,0.06)' }} />

        <Toggle label="Analytics" defaultOn={false} color="#FF7B54" delay={0.25} />

        <div className="h-[1px] w-full" style={{ background: 'rgba(255,255,255,0.06)' }} />

        <Toggle label="Haptic Feedback" defaultOn={true} color="#3A86FF" delay={0.3} />
      </motion.div>
    </div>
  )
}

```

---

## Glass Slider

Category: Inputs & Controls
Slug: `glass-slider`
URL: https://aicanvas.me/components/glass-slider

Range sliders with glass tracks, glowing colored fills, and spring-animated thumbs that scale on drag.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-slider
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a glass slider whose fill and value color follow its gradient.
 * Pointer dragging and track clicks update the animated thumb position.
 */

import { useState, useRef, useEffect } from 'react'
import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion'


const BACKGROUND = 'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'

const SLIDERS = [
  { label: 'Brightness', defaultValue: 72, colorA: '#5B8FF9', colorB: '#A78BFA' },
  { label: 'Contrast',   defaultValue: 45, colorA: '#FF6BF5', colorB: '#FF6680' },
  { label: 'Warmth',     defaultValue: 60, colorA: '#FF7B54', colorB: '#FFBE0B' },
  { label: 'Saturation', defaultValue: 55, colorA: '#06D6A0', colorB: '#5B8FF9' },
]


function lerpHex(a: string, b: string, t: number): string {
  const ah = a.replace('#', '')
  const bh = b.replace('#', '')
  const ar = parseInt(ah.slice(0, 2), 16)
  const ag = parseInt(ah.slice(2, 4), 16)
  const ab = parseInt(ah.slice(4, 6), 16)
  const br = parseInt(bh.slice(0, 2), 16)
  const bg = parseInt(bh.slice(2, 4), 16)
  const bb = parseInt(bh.slice(4, 6), 16)
  return `#${Math.round(ar + (br - ar) * t).toString(16).padStart(2, '0')}${Math.round(ag + (bg - ag) * t).toString(16).padStart(2, '0')}${Math.round(ab + (bb - ab) * t).toString(16).padStart(2, '0')}`
}


function Slider({
  label,
  defaultValue,
  colorA,
  colorB,
  delay,
}: {
  label: string
  defaultValue: number
  colorA: string
  colorB: string
  delay: number
}) {
  const [value, setValue] = useState(defaultValue)
  const [hovered, setHovered] = useState(false)
  const trackRef = useRef<HTMLDivElement>(null)
  const isDragging = useMotionValue(0)
  const thumbScale = useSpring(useTransform(isDragging, [0, 1], [1, 1.3]), { stiffness: 400, damping: 20 })

  const onMoveRef = useRef<((ev: PointerEvent) => void) | null>(null)
  const onUpRef = useRef<(() => void) | null>(null)

  const thumbColor = lerpHex(colorA, colorB, value / 100)

  const handlePointerDown = (e: React.PointerEvent) => {
    e.preventDefault()
    isDragging.set(1)

    const track = trackRef.current
    if (!track) return

    const updateValue = (clientX: number) => {
      const rect = track.getBoundingClientRect()
      setValue(Math.round(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * 100))
    }

    updateValue(e.clientX)

    const onMove = (ev: PointerEvent) => updateValue(ev.clientX)
    const onUp = () => {
      isDragging.set(0)
      window.removeEventListener('pointermove', onMove)
      window.removeEventListener('pointerup', onUp)
      onMoveRef.current = null
      onUpRef.current = null
    }
    onMoveRef.current = onMove
    onUpRef.current = onUp
    window.addEventListener('pointermove', onMove)
    window.addEventListener('pointerup', onUp)
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    let next: number | null = null
    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = value - 1
    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = value + 1
    else if (e.key === 'Home') next = 0
    else if (e.key === 'End') next = 100
    if (next === null) return
    e.preventDefault()
    setValue(Math.max(0, Math.min(100, next)))
  }

  useEffect(() => {
    return () => {
      if (onMoveRef.current) window.removeEventListener('pointermove', onMoveRef.current)
      if (onUpRef.current) window.removeEventListener('pointerup', onUpRef.current)
    }
  }, [])

  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: 'spring', stiffness: 200, damping: 22, delay }}
      className="flex flex-col gap-[14px]"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {}
      <div className="flex items-center justify-between">
        <motion.span
          animate={{ color: hovered ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.5)' }}
          transition={{ duration: 0.2 }}
          className="text-sm font-medium"
        >
          {label}
        </motion.span>
        <span className="font-mono text-sm font-semibold" style={{ color: thumbColor }}>{value}</span>
      </div>

      {}
      <div
        ref={trackRef}
        role="slider"
        tabIndex={0}
        aria-label={label}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={value}
        onPointerDown={handlePointerDown}
        onKeyDown={handleKeyDown}
        className="relative h-[5px] w-full cursor-pointer rounded-full touch-none outline-none focus-visible:ring-2 focus-visible:ring-white/40"
        style={{
          background: hovered ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.08)',
          transition: 'background 0.2s ease',
        }}
      >
        {}
        <div
          className="absolute left-0 top-0 h-full rounded-full"
          style={{
            width: `${value}%`,
            background: `linear-gradient(90deg, ${colorA}, ${colorB})`,
            filter: hovered ? `drop-shadow(0 0 4px ${thumbColor}88)` : 'none',
            transition: 'filter 0.2s ease',
          }}
        />

        {}
        <motion.div
          className="absolute top-1/2 flex h-[44px] w-[44px] -translate-x-1/2 -translate-y-1/2 items-center justify-center"
          style={{ left: `${value}%`, scale: thumbScale }}
        >
          <div
            className="h-[18px] w-[18px] rounded-full bg-white"
            style={{
              boxShadow: `0 0 0 2.5px ${thumbColor}, 0 2px 10px ${thumbColor}66`,
            }}
          />
        </motion.div>
      </div>
    </motion.div>
  )
}


export default function GlassSlider() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      <motion.div
        initial={{ y: 20, scale: 0.96 }}
        animate={{ y: 0, scale: 1 }}
        transition={{ type: 'spring', stiffness: 200, damping: 22 }}
        className="relative isolate flex w-[calc(100%-32px)] max-w-[360px] flex-col gap-7 rounded-3xl px-7 py-8"
        style={{
          background: 'rgba(255, 255, 255, 0.08)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12)',
        }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
          style={{ backdropFilter: 'blur(24px) saturate(1.8)', WebkitBackdropFilter: 'blur(24px) saturate(1.8)' }}
        />
        {}
        <div
          className="absolute left-7 right-7 top-0 h-[1px]"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)' }}
        />

        <h3 className="text-base font-semibold text-white/80">Display</h3>

        {SLIDERS.map((s, i) => (
          <Slider key={s.label} {...s} delay={0.08 + i * 0.06} />
        ))}
      </motion.div>
    </div>
  )
}

```

---

## Glass Dock

Category: Navigation
Slug: `glass-dock`
URL: https://aicanvas.me/components/glass-dock

Glassmorphism macOS-style dock with cursor-proximity magnification. Icons scale with spring physics as the mouse approaches.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-dock
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Renders a horizontally scrollable glass dock of labeled icons.
 * Nearby icons magnify and lift as the pointer moves across the dock.
 */

import { useRef } from 'react'
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
import {
  Sun,
  Heart,
  MusicNote,
  Coffee,
  Leaf,
  Star,
  Moon,
  Flame,
  Cloud,
} from '@phosphor-icons/react'

const DOCK_ITEMS = [
  { icon: Sun,       color: '#FFBE0B', label: 'Energy' },
  { icon: Heart,     color: '#FF5C8A', label: 'Love' },
  { icon: MusicNote, color: '#FF7B54', label: 'Joy' },
  { icon: Coffee,    color: '#C9A96E', label: 'Comfort' },
  { icon: Leaf,      color: '#06D6A0', label: 'Nature' },
  { icon: Star,      color: '#FFBE0B', label: 'Dreams' },
  { icon: Moon,      color: '#B388FF', label: 'Rest' },
  { icon: Flame,     color: '#FF5C8A', label: 'Passion' },
  { icon: Cloud,     color: '#3A86FF', label: 'Peace' },
]

const ICON_SIZE = 44
const MAG_RANGE = 120
const MAG_SCALE = 1.55

function DockItem({
  icon: Icon,
  color,
  label,
  mouseX,
  index,
}: {
  icon: typeof Sun
  color: string
  label: string
  mouseX: ReturnType<typeof useMotionValue<number>>
  index: number
}) {
  const ref = useRef<HTMLDivElement>(null)

  const distance = useTransform(mouseX, (mx: number) => {
    const el = ref.current
    if (!el || mx < 0) return 200
    const rect = el.getBoundingClientRect()
    const center = rect.left + rect.width / 2
    return Math.abs(mx - center)
  })

  const rawSize = useTransform(distance, [0, MAG_RANGE], [ICON_SIZE * MAG_SCALE, ICON_SIZE])
  const size = useSpring(rawSize, { stiffness: 300, damping: 22, mass: 0.5 })
  const y = useTransform(size, [ICON_SIZE, ICON_SIZE * MAG_SCALE], [0, -12])

  return (
    <motion.div
      ref={ref}
      className="group relative flex cursor-pointer flex-col items-center"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: 'spring', stiffness: 200, damping: 18, delay: index * 0.04 }}
    >
      {}
      <motion.div
        className="pointer-events-none absolute -top-10 rounded-lg px-3 py-1.5 text-xs font-medium text-white/90 opacity-0 group-hover:opacity-100"
        style={{
          background: 'rgba(255, 255, 255, 0.1)',
          backdropFilter: 'blur(16px)',
          WebkitBackdropFilter: 'blur(16px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          transition: 'opacity 0.15s',
        }}
      >
        {label}
      </motion.div>

      {}
      <motion.div
        style={{
          width: size,
          height: size,
          y,
          background: `${color}18`,
          border: `1px solid ${color}22`,
          borderRadius: 12,
        }}
        whileTap={{ scale: 0.82 }}
        className="flex items-center justify-center"
      >
        <Icon size={22} weight="regular" style={{ color }} />
      </motion.div>
    </motion.div>
  )
}

export default function GlassDock() {
  const mouseX = useMotionValue(-200)

  return (
    <div className="relative flex min-h-screen w-full items-center justify-end overflow-hidden bg-[#1A1A19] pb-8">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png?updatedAt=1775223702866"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div className="flex w-full overflow-x-auto py-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {}
        <motion.div
          initial={{ y: 50 }}
          animate={{ y: 0 }}
          transition={{ type: 'spring', stiffness: 180, damping: 20 }}
          onMouseMove={(e) => mouseX.set(e.clientX)}
          onMouseLeave={() => mouseX.set(-200)}
          className="relative isolate mx-auto flex shrink-0 items-end gap-2 rounded-3xl px-4 pb-3 pt-3"
          style={{
            background: 'rgba(255, 255, 255, 0.06)',
            border: '1px solid rgba(255, 255, 255, 0.1)',
            boxShadow: '0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
          }}
        >
          {}
          <div
            className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
            style={{
              backdropFilter: 'blur(24px) saturate(1.8)',
              WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
            }}
          />
          {DOCK_ITEMS.map((item, i) => (
            <DockItem key={item.label} {...item} mouseX={mouseX} index={i} />
          ))}
        </motion.div>
      </div>
    </div>
  )
}

```

---

## Glass Modal

Category: Cards & Modals
Slug: `glass-modal`
URL: https://aicanvas.me/components/glass-modal

Centered dialog with deep glass blur, scale-spring entrance, and staggered content reveal.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-modal
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents a glass upgrade modal with an animated entrance and feature list.
 * The close control removes the card with an exit transition.
 */

import { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { X, Check, ShieldCheck } from '@phosphor-icons/react'

export default function GlassModal() {
  const [open, setOpen] = useState(true)

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png?updatedAt=1775223702866"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <AnimatePresence>
        {open && (
      <motion.div
        initial={{ scale: 0.9, y: 16 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 16, opacity: 0 }}
        transition={{ type: 'spring', stiffness: 350, damping: 28 }}
        className="relative isolate w-[min(340px,calc(100vw-2rem))] overflow-hidden rounded-3xl"
        style={{
          background: 'rgba(255, 255, 255, 0.08)',
          border: '1px solid rgba(255, 255, 255, 0.12)',
          boxShadow: '0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.1)',
        }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-3xl"
          style={{ backdropFilter: 'blur(40px) saturate(1.8)', WebkitBackdropFilter: 'blur(40px) saturate(1.8)' }}
        />
        {}
        <div
          className="absolute left-8 right-8 top-0 h-[1px]"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent)' }}
        />

        {}
        <motion.button
          type="button"
          aria-label="Close"
          onClick={() => setOpen(false)}
          whileHover={{ scale: 1.15, rotate: 90 }}
          whileTap={{ scale: 0.9 }}
          transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
          className="absolute right-4 top-4 z-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
          style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.08)' }}
        >
          <X size={14} weight="regular" className="text-white/60" />
        </motion.button>

        {}
        <div className="flex flex-col items-center px-8 pb-8 pt-10">
          {}
          <motion.div
            initial={{ scale: 0, rotate: -20 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ type: 'spring', stiffness: 300, damping: 18, delay: 0.15 }}
            className="mb-5 flex h-16 w-16 items-center justify-center rounded-xl"
            style={{
              background: '#FFA03218',
              border: '1px solid #FFA03222',
            }}
          >
            <ShieldCheck size={28} weight="regular" style={{ color: '#FFA032' }} />
          </motion.div>

          <motion.h2
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="mb-2 text-lg font-semibold text-white/90"
          >
            Upgrade to Pro
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.25 }}
            className="mb-6 text-center text-sm leading-relaxed text-white/40"
          >
            Unlock premium components, priority support, and early access to new features.
          </motion.p>

          {}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3 }}
            className="mb-6 flex w-full flex-col gap-3"
          >
            {['Unlimited components', 'Source code access', 'Priority support'].map((feature, i) => (
              <motion.div
                key={feature}
                initial={{ opacity: 0, x: -12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.35 + i * 0.08 }}
                className="flex items-center gap-3"
              >
                <div
                  className="flex h-5 w-5 items-center justify-center rounded-full"
                  style={{ background: 'rgba(255, 155, 50, 0.18)' }}
                >
                  <Check size={10} weight="regular" style={{ color: 'rgba(255, 155, 50, 1)' }} />
                </div>
                <span className="text-sm text-white/60">{feature}</span>
              </motion.div>
            ))}
          </motion.div>

          {}
          <div className="flex w-full flex-col gap-2">
            <motion.button
              whileHover={{
                scale: 1.04,
                background: 'linear-gradient(135deg, rgba(255, 180, 80, 0.9), rgba(235, 75, 45, 0.8))',
                boxShadow: '0 4px 24px rgba(220, 80, 30, 0.6)',
              }}
              whileTap={{ scale: 0.96 }}
              transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
              className="w-full cursor-pointer rounded-full py-3 text-sm font-semibold text-white"
              style={{
                background: 'linear-gradient(135deg, rgba(255, 160, 50, 0.75), rgba(220, 60, 40, 0.6))',
                border: '1px solid rgba(255, 180, 80, 0.25)',
                boxShadow: '0 2px 16px rgba(220, 80, 30, 0.4)',
              }}
            >
              Upgrade Now
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.04, background: 'rgba(255,255,255,0.1)' }}
              whileTap={{ scale: 0.96 }}
              transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
              className="w-full cursor-pointer rounded-full py-3 text-sm font-medium text-white/50"
              style={{
                background: 'rgba(255, 255, 255, 0.06)',
                border: '1px solid rgba(255, 255, 255, 0.1)',
              }}
            >
              Maybe Later
            </motion.button>
          </div>
        </div>
      </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

```

---

## Glass Card

Category: Cards & Modals
Slug: `glass-card`
URL: https://aicanvas.me/components/glass-card

Glassmorphism content cards with 3D tilt-on-hover, spring physics, and a cursor-following glare highlight.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-card
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a set of glass feature cards over a shared image backdrop.
 * Pointer movement tilts each card while its border gradient rotates.
 */

import { useRef } from 'react'
import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion'
import { ChartLineUp, Lightning, ShieldCheck, ArrowRight } from '@phosphor-icons/react'
import type { Icon } from '@phosphor-icons/react'

// customize: replace the background and card data below

const BACKGROUND = 'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%204%20(1).png?updatedAt=1775226802133'

const CARDS: { title: string; subtitle: string; color: string; gradient: string; cta: string; Icon: Icon }[] = [
  { title: 'Analytics',  subtitle: 'Real-time metrics and insights for your application.',    color: '#5B8FF9', gradient: '#5B8FF9, #A78BFA', cta: 'View Dashboard',    Icon: ChartLineUp },
  { title: 'Automation', subtitle: 'Streamline your workflows with intelligent triggers.',     color: '#FF6BF5', gradient: '#FF6BF5, #FF6680', cta: 'Create Workflow',    Icon: Lightning    },
  { title: 'Security',   subtitle: 'Enterprise-grade protection for your data.',              color: '#FF7B54', gradient: '#FF7B54, #FFBE0B', cta: 'View Report',        Icon: ShieldCheck  },
]


function GlassCardItem({
  title,
  subtitle,
  color,
  gradient,
  cta,
  Icon,
}: {
  title: string
  subtitle: string
  color: string
  gradient: string
  cta: string
  Icon: Icon
}) {
  const cardRef = useRef<HTMLDivElement>(null)
  const mouseX = useMotionValue(0.5)
  const mouseY = useMotionValue(0.5)

  const rotateX = useSpring(useTransform(mouseY, [0, 1], [8, -8]), { stiffness: 200, damping: 20 })
  const rotateY = useSpring(useTransform(mouseX, [0, 1], [-8, 8]), { stiffness: 200, damping: 20 })

  const handleMouse = (e: React.MouseEvent) => {
    const el = cardRef.current
    if (!el) return
    const rect = el.getBoundingClientRect()
    mouseX.set((e.clientX - rect.left) / rect.width)
    mouseY.set((e.clientY - rect.top) / rect.height)
  }

  const handleLeave = () => {
    mouseX.set(0.5)
    mouseY.set(0.5)
  }

  return (
    <motion.div
      ref={cardRef}
      onMouseMove={handleMouse}
      onMouseLeave={handleLeave}
      style={{ rotateX, rotateY, transformPerspective: 800 }}
      className="relative w-64 cursor-pointer overflow-hidden rounded-3xl p-[1px]"
    >
      {}
      <motion.div
        className="absolute inset-0 rounded-3xl opacity-30"
        style={{ background: `linear-gradient(135deg, ${gradient}, transparent 60%)` }}
        animate={{ rotate: [0, 360] }}
        transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
      />

      {}
      <div
        className="relative rounded-3xl p-6"
        style={{
          background: 'rgba(255, 255, 255, 0.08)',
          backdropFilter: 'blur(24px) saturate(1.8)',
          WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12)',
        }}
      >
        {}
        <motion.div
          className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl"
          style={{
            background: `${color}18`,
            border: `1px solid ${color}22`,
          }}
          whileHover={{ scale: 1.1, rotate: 5 }}
          transition={{ type: 'spring', stiffness: 400, damping: 15 }}
        >
          <Icon size={22} weight="regular" style={{ color }} />
        </motion.div>

        <h3 className="mb-2 text-base font-semibold text-white/90">{title}</h3>
        <p className="mb-5 text-sm leading-relaxed text-white/40">{subtitle}</p>

        {}
        <motion.button
          whileHover={{ scale: 1.03 }}
          whileTap={{ scale: 0.97 }}
          className="flex w-full items-center justify-between rounded-2xl px-4 py-3"
          style={{
            background: `linear-gradient(135deg, ${gradient.split(',')[0]}40, ${gradient.split(',')[1]?.trim() ?? gradient.split(',')[0]}28)`,
            border: `1px solid ${gradient.split(',')[0]}55`,
            boxShadow: `0 2px 12px ${gradient.split(',')[0]}25`,
            transition: 'box-shadow 0.2s ease',
          }}
          onMouseEnter={e => (e.currentTarget.style.boxShadow = `0 4px 20px ${gradient.split(',')[0]}45`)}
          onMouseLeave={e => (e.currentTarget.style.boxShadow = `0 2px 12px ${gradient.split(',')[0]}25`)}
        >
          <span
            className="text-sm font-semibold"
            style={{ color: 'rgba(255,255,255,0.75)' }}
          >
            {cta}
          </span>
          <ArrowRight
            size={16}
            weight="regular"
            style={{ color: 'rgba(255,255,255,0.55)' }}
          />
        </motion.button>

        {}
        <div
          className="absolute left-6 right-6 top-0 h-[1px]"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)' }}
        />
      </div>
    </motion.div>
  )
}

export default function GlassCard() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />
      <div className="relative flex flex-wrap items-center justify-center gap-6 px-6">
        {CARDS.map((card) => (
          <GlassCardItem key={card.title} {...card} />
        ))}
      </div>
    </div>
  )
}

```

---

## Glass Tags

Category: Notifications
Slug: `glass-tags`
URL: https://aicanvas.me/components/glass-tags

Selectable pill-shaped tags with glass surfaces, unique color accents, and spring-animated check marks.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-tags
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a configurable row of selectable glass tags.
 * Clicking a tag toggles its checkmark and selection glow without shifting layout.
 */

import { useState } from 'react'
import { motion } from 'framer-motion'

// customize: replace the background and tag labels below

const BACKGROUND = 'https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%203%20(1).png?updatedAt=1775226815629'

const TAGS = [
  { label: 'Design',       color: '#FF9A3C' },
  { label: 'Development',  color: '#FFBE0B' },
  { label: 'Motion',       color: '#FF6BF5' },
  { label: 'AI',           color: '#FF7B54' },
  { label: '3D',           color: '#DC5A28' },
  { label: 'Typography',   color: '#FFD166' },
  { label: 'Branding',     color: '#FF6680' },
  { label: 'iOS',          color: '#FF9A3C' },
  { label: 'WebGL',        color: '#FFBE0B' },
  { label: 'React',        color: '#FF7B54' },
  { label: 'Figma',        color: '#FF6BF5' },
  { label: 'Prototyping',  color: '#FFD166' },
]

const GLASS_FILTER = 'blur(24px) saturate(1.8)'


function GlassTag({ label, color, index }: { label: string; color: string; index: number }) {
  const [selected, setSelected] = useState(false)
  const [hovered,  setHovered]  = useState(false)

  return (
    <motion.button
      initial={{ scale: 0.8, y: 12 }}
      animate={{ scale: 1, y: 0 }}
      transition={{ type: 'spring', stiffness: 260, damping: 20, delay: index * 0.04 }}
      onClick={() => setSelected(s => !s)}
      onHoverStart={() => setHovered(true)}
      onHoverEnd={() => setHovered(false)}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.94 }}
      className="relative isolate cursor-pointer rounded-full px-4 py-2 sm:px-5 sm:py-2.5"
      style={{
        background: selected
          ? `linear-gradient(135deg, ${color}33, ${color}18)`
          : hovered ? 'rgba(255,255,255,0.13)' : 'rgba(255,255,255,0.08)',
        border: selected
          ? `1px solid ${color}55`
          : hovered ? '1px solid rgba(255,255,255,0.24)' : '1px solid rgba(255,255,255,0.12)',
        boxShadow: selected
          ? `0 4px 24px ${color}30, inset 0 1px 0 rgba(255,255,255,0.12)`
          : hovered
            ? '0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18)'
            : '0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1)',
        transition: 'background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease',
      }}
    >
      {}
      <div
        className="pointer-events-none absolute inset-0 z-[-1] rounded-full"
        style={{ backdropFilter: GLASS_FILTER, WebkitBackdropFilter: GLASS_FILTER }}
      />
      {}
      <motion.div
        className="absolute inset-0 rounded-full"
        animate={{ opacity: selected ? 0.15 : 0 }}
        transition={{ duration: 0.3 }}
        style={{ background: `radial-gradient(circle at center, ${color}, transparent 70%)` }}
      />

      <div className="relative z-10 flex items-center gap-2">
        {}
        <div className="relative h-3.5 w-3.5 shrink-0">
          <motion.div
            animate={{ scale: selected ? 0 : 1, opacity: selected ? 0 : hovered ? 0.8 : 0.5 }}
            transition={{ type: 'spring', stiffness: 400, damping: 15 }}
            className="absolute inset-0 m-auto h-2 w-2 rounded-full"
            style={{ background: color }}
          />
          {selected && (
            <motion.svg
              width="14" height="14" viewBox="0 0 14 14"
              className="absolute inset-0"
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ type: 'spring', stiffness: 500, damping: 25 }}
            >
              <motion.path
                d="M3 7.5L5.5 10L11 4"
                fill="none" stroke={color} strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round"
                initial={{ pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 0.25, delay: 0.1 }}
              />
            </motion.svg>
          )}
        </div>

        <span
          className="text-xs font-semibold sm:text-sm"
          style={{
            color: selected ? 'rgba(255,255,255,0.95)' : hovered ? 'rgba(255,255,255,0.78)' : 'rgba(255,255,255,0.5)',
            transition: 'color 0.2s ease',
          }}
        >
          {label}
        </span>
      </div>
    </motion.button>
  )
}

export default function GlassTags() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      <img
        src={BACKGROUND}
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />
      <div
        className="relative flex w-full max-w-sm flex-wrap justify-center gap-2 px-4 sm:max-w-md sm:gap-3 sm:px-6"
      >
        {TAGS.map((tag, i) => (
          <GlassTag key={tag.label} label={tag.label} color={tag.color} index={i} />
        ))}
      </div>
    </div>
  )
}

```

---

## Glass Tab Bar

Category: Navigation
Slug: `glass-tab-bar`
URL: https://aicanvas.me/components/glass-tab-bar

Frosted glass pill tab bar with a sliding active indicator. Edge tabs snap flush to the container wall.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-tab-bar
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a glass tab bar with icon and label navigation items.
 * Selecting a tab moves the active pill and updates the highlighted item.
 */

import { useState } from 'react'
import { motion } from 'framer-motion'
import { House, Compass, PlusCircle, ChatCircle, User } from '@phosphor-icons/react'

const TABS = [
  { icon: House,       label: 'Home',     color: '#3A86FF' },
  { icon: Compass,     label: 'Explore',  color: '#FF7B54' },
  { icon: PlusCircle,  label: 'Create',   color: '#06D6A0' },
  { icon: ChatCircle,  label: 'Messages', color: '#FF5C8A' },
  { icon: User,        label: 'Profile',  color: '#B388FF' },
]

export default function GlassTabBar() {
  const [active, setActive]   = useState(0)
  const [hovered, setHovered] = useState<number | null>(null)

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png?updatedAt=1775223702866"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <motion.div
        initial={{ y: 20 }}
        animate={{ y: 0 }}
        transition={{ type: 'spring', stiffness: 200, damping: 24 }}
        className="relative isolate flex w-[min(380px,calc(100vw-2rem))] items-center justify-around rounded-full px-5 py-2.5"
        style={{
          background: 'rgba(255, 255, 255, 0.07)',
          border: '1px solid rgba(255, 255, 255, 0.11)',
          boxShadow: '0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.07)',
        }}
      >
        {}
        <div
          className="pointer-events-none absolute inset-0 z-[-1] rounded-full"
          style={{ backdropFilter: 'blur(24px) saturate(1.8)', WebkitBackdropFilter: 'blur(24px) saturate(1.8)' }}
        />
        {TABS.map((tab, i) => {
          const Icon     = tab.icon
          const isActive = active === i
          const isHover  = hovered === i && !isActive

          return (
            <motion.button
              key={tab.label}
              onClick={() => setActive(i)}
              onHoverStart={() => setHovered(i)}
              onHoverEnd={() => setHovered(null)}
              className="relative flex cursor-pointer flex-col items-center gap-[3px] px-3 py-1"
              whileTap={{ scale: 0.85 }}
            >
              {isActive && (
                <motion.div
                  layoutId="tab-glow"
                  className={`absolute -inset-y-1 rounded-full ${
                    i === 0                  ? '-left-5 -right-3'  :
                    i === TABS.length - 1   ? '-left-3 -right-5'  :
                                              '-inset-x-3'
                  }`}
                  style={{ background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.08)' }}
                  transition={{ type: 'spring', stiffness: 350, damping: 30 }}
                />
              )}

              {}
              <div
                className="relative z-10 flex flex-col items-center gap-px"
                style={{
                  transform: i === 0 ? 'translateX(-4px)' : i === TABS.length - 1 ? 'translateX(4px)' : undefined,
                }}
              >
                <motion.div
                  animate={{ scale: isActive ? 1.15 : 1, y: isActive ? -1 : 0 }}
                  transition={{ type: 'spring', stiffness: 400, damping: 20 }}
                >
                  <Icon
                    size={20}
                    weight="regular"
                    style={{
                      color: isActive ? tab.color : isHover ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.32)',
                      transition: 'color 0.2s ease',
                    }}
                  />
                </motion.div>

                <span
                  className="text-[10px] font-medium"
                  style={{
                    color: isActive ? tab.color : isHover ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.32)',
                    transition: 'color 0.2s ease',
                  }}
                >
                  {tab.label}
                </span>
              </div>
            </motion.button>
          )
        })}
      </motion.div>
    </div>
  )
}

```

---

## Glass Navbar

Category: Navigation
Slug: `glass-navbar`
URL: https://aicanvas.me/components/glass-navbar

Frosted glass navigation bar with animated active tab indicator, ambient color blobs, and spring-physics entrance.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glass-navbar
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a responsive glass navigation bar with selectable links.
 * On narrow screens, the menu button reveals an animated dropdown.
 */

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { List, X } from '@phosphor-icons/react'

const NAV_ITEMS = ['Products', 'About', 'Blog']

export default function GlassNavbar() {
  const [active, setActive]     = useState<number | null>(null)
  const [hovered, setHovered]   = useState<number | null>(null)
  const [menuOpen, setMenuOpen] = useState(false)

  const glassStyle = {
    background: 'rgba(255, 255, 255, 0.08)',
    border: '1px solid rgba(255, 255, 255, 0.12)',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
  }

  const glassBlur = {
    backdropFilter: 'blur(24px) saturate(1.8)',
    WebkitBackdropFilter: 'blur(24px) saturate(1.8)',
  }

  const ctaStyle = {
    background: 'linear-gradient(135deg, rgba(255, 160, 50, 0.75), rgba(220, 60, 40, 0.6))',
    border: '1px solid rgba(255, 180, 80, 0.25)',
    boxShadow: '0 2px 16px rgba(220, 80, 30, 0.4)',
  }

  const ctaHoverStyle = {
    background: 'linear-gradient(135deg, rgba(255, 180, 80, 0.9), rgba(235, 75, 45, 0.8))',
    boxShadow: '0 4px 24px rgba(220, 80, 30, 0.6)',
  }

  return (
    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#1A1A19]">
      {}
      <img
        src="https://ik.imagekit.io/aitoolkit/bg%20images/Ethereal%20Orange%20Flower%201%20(1).png?updatedAt=1775223702866"
        alt=""
        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60"
      />

      {}
      <div className="relative flex w-[calc(100%-2rem)] max-w-[720px] flex-col">

        {}
        <motion.nav
          initial={{ y: -40 }}
          animate={{ y: 0 }}
          transition={{ type: 'spring', stiffness: 200, damping: 24 }}
          className="relative isolate flex w-full items-center gap-1 rounded-full px-2 py-2"
          style={glassStyle}
        >
          {}
          <div className="pointer-events-none absolute inset-0 z-[-1] rounded-full" style={glassBlur} />
          {}
          <div className="flex cursor-pointer items-center gap-2 px-3" onClick={() => setActive(null)}>
            <motion.div
              animate={{ rotate: [0, 360] }}
              transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
              className="h-6 w-6 rounded-lg"
              style={{ background: 'linear-gradient(135deg, #FF6BF5, #FFBE0B)' }}
            />
            <span className="text-sm font-semibold text-white/90">Studio</span>
          </div>

          {}
          <div className="flex-1" />

          {}
          <div className="hidden items-center gap-1 sm:flex">
            {NAV_ITEMS.map((item, i) => (
              <motion.button
                key={item}
                onClick={() => setActive(i)}
                onHoverStart={() => setHovered(i)}
                onHoverEnd={() => setHovered(null)}
                className="relative cursor-pointer rounded-full px-5 py-2 text-sm font-medium"
                style={{ color: active === i || hovered === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.5)' }}
                whileTap={{ scale: 0.97 }}
              >
                {}
                {active === i && (
                  <motion.div
                    layoutId="glass-nav-active"
                    className="absolute inset-0 rounded-full"
                    style={{ background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.1)' }}
                    transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                  />
                )}
                <span className="relative z-10">{item}</span>
              </motion.button>
            ))}

            {}
            <motion.button
              whileHover={{ scale: 1.04, ...ctaHoverStyle }}
              whileTap={{ scale: 0.96 }}
              className="ml-2 cursor-pointer rounded-full px-5 py-2 text-sm font-semibold text-white"
              style={ctaStyle}
              transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
            >
              Get Started
            </motion.button>
          </div>

          {}
          <motion.button
            className="mr-2 flex cursor-pointer items-center justify-center rounded-full p-2 text-white/70 sm:hidden"
            onClick={() => setMenuOpen(v => !v)}
            whileTap={{ scale: 0.9 }}
            style={{ background: 'rgba(255,255,255,0.08)' }}
          >
            <AnimatePresence mode="wait" initial={false}>
              {menuOpen
                ? <motion.span key="x"    initial={{ rotate: -90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: 90, opacity: 0 }} transition={{ duration: 0.15 }}><X size={18} weight="bold" /></motion.span>
                : <motion.span key="menu" initial={{ rotate:  90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: -90, opacity: 0 }} transition={{ duration: 0.15 }}><List size={18} weight="bold" /></motion.span>
              }
            </AnimatePresence>
          </motion.button>
        </motion.nav>

        {}
        <AnimatePresence>
          {menuOpen && (
            <motion.div
              initial={{ opacity: 0, y: -8, scale: 0.97 }}
              animate={{ opacity: 1, y: 0,  scale: 1    }}
              exit={{    opacity: 0, y: -8, scale: 0.97 }}
              transition={{ duration: 0.22, ease: [0.25, 0.1, 0.25, 1] }}
              className="relative isolate mt-2 flex flex-col gap-1 rounded-2xl p-2 sm:hidden"
              style={glassStyle}
            >
              <div className="pointer-events-none absolute inset-0 z-[-1] rounded-2xl" style={glassBlur} />
              {NAV_ITEMS.map((item, i) => (
                <button
                  key={item}
                  onClick={() => { setActive(i); setMenuOpen(false) }}
                  className="cursor-pointer rounded-full px-5 py-2.5 text-left text-sm font-medium transition-colors"
                  style={{
                    color: active === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.55)',
                    background: active === i ? 'rgba(255,255,255,0.1)' : 'transparent',
                  }}
                >
                  {item}
                </button>
              ))}
              <button
                onClick={() => setMenuOpen(false)}
                className="mt-1 cursor-pointer rounded-full px-5 py-2.5 text-sm font-semibold text-white"
                style={ctaStyle}
              >
                Get Started
              </button>
            </motion.div>
          )}
        </AnimatePresence>

      </div>
    </div>
  )
}

```

---

## Emoji Burst

Category: Buttons & Toggles
Slug: `emoji-burst`
URL: https://aicanvas.me/components/emoji-burst

A button that explodes emojis outward in all directions. Five emoji sets cycle on each click.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/emoji-burst
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a button that emits a rotating set of emoji particles.
 * Each press advances the theme and animates a radial burst around the label.
 */

import { useState, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'


const SETS = [
  {
    label: 'Party!',
    emojis: ['🎉', '🎊', '🥳', '🎈', '🎁', '✨', '🌟', '🪅'],
    bg: 'linear-gradient(135deg, #8B5CF6, #6D28D9)',
    shadow: 'rgba(139,92,246,0.5)',
  },
  {
    label: 'Boom!',
    emojis: ['🔥', '💥', '⚡', '🌪️', '💫', '⭐', '🌈', '☄️'],
    bg: 'linear-gradient(135deg, #F97316, #DC2626)',
    shadow: 'rgba(249,115,22,0.5)',
  },
  {
    label: 'Yum!',
    emojis: ['🍕', '🍔', '🌮', '🍣', '🍩', '🧁', '🍦', '🍇'],
    bg: 'linear-gradient(135deg, #22C55E, #16A34A)',
    shadow: 'rgba(34,197,94,0.5)',
  },
  {
    label: 'Cute!',
    emojis: ['🐱', '🐶', '🐼', '🦊', '🦄', '🐸', '🐧', '🐨'],
    bg: 'linear-gradient(135deg, #06B6D4, #0284C7)',
    shadow: 'rgba(6,182,212,0.5)',
  },
  {
    label: 'Love!',
    emojis: ['❤️', '💜', '💙', '💚', '💛', '🧡', '💖', '💝'],
    bg: 'linear-gradient(135deg, #EC4899, #BE185D)',
    shadow: 'rgba(236,72,153,0.5)',
  },
] as const

const PARTICLE_COUNT = 18


interface Particle {
  id: number
  emoji: string
  angle: number
  distance: number
  rotation: number
  size: number
  duration: number
}

let uid = 0


function EmojiParticle({ p }: { p: Particle }) {
  const tx = Math.cos(p.angle) * p.distance
  const ty = Math.sin(p.angle) * p.distance
  // tune: raise either value to increase the particle arc
  const lift = 18 + Math.abs(Math.cos(p.angle)) * 22

  return (
    <motion.span
      className="pointer-events-none absolute select-none"
      style={{
        left: '50%',
        top: '50%',
        fontSize: `${p.size}rem`,
        lineHeight: 1,
        transformOrigin: 'center center',
        translateX: '-50%',
        translateY: '-50%',
      }}
      initial={{ x: 0, y: 0, scale: 0, opacity: 1, rotate: 0 }}
      animate={{
        x: [0, tx * 0.5, tx],
        y: [0, ty * 0.5 - lift, ty],
        scale: [0, 1.25, 0.55],
        opacity: [1, 1, 0],
        rotate: [0, p.rotation * 0.5, p.rotation],
      }}
      transition={{
        duration: p.duration,
        ease: [[0.08, 0.82, 0.17, 1], 'linear'] as never,
        times: [0, 0.2, 1],
      }}
    >
      {p.emoji}
    </motion.span>
  )
}


export default function EmojiBurst() {
  const [particles, setParticles] = useState<Particle[]>([])
  const [setIdx, setSetIdx]       = useState(0)
  const [isPopping, setIsPopping] = useState(false)

  const currentSet = SETS[setIdx % SETS.length]

  const explode = useCallback(() => {
    if (isPopping) return
    setIsPopping(true)

    const { emojis } = SETS[setIdx % SETS.length]

    const burst: Particle[] = Array.from({ length: PARTICLE_COUNT }, (_, i) => {
      // tune: raise the jitter multiplier to vary particle angles
      const baseAngle = (i / PARTICLE_COUNT) * Math.PI * 2
      const jitter    = (Math.random() - 0.5) * ((Math.PI * 2) / PARTICLE_COUNT) * 0.8
      return {
        id:       uid++,
        emoji:    emojis[Math.floor(Math.random() * emojis.length)],
        angle:    baseAngle + jitter,
        distance: 85 + Math.random() * 95,
        rotation: (Math.random() - 0.5) * 640,
        size:     1.4 + Math.random() * 0.9,
        duration: 0.55 + Math.random() * 0.25,  // tune: raise either value to lengthen particle motion
      }
    })

    setParticles(burst)
    setSetIdx(prev => prev + 1)

    setTimeout(() => {
      setParticles([])
      setIsPopping(false)
    }, 850)
  }, [setIdx, isPopping])

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#E8E8DF] dark:bg-[#1A1A19]">
      <div className="relative flex items-center justify-center">

        {}
        <AnimatePresence>
          {particles.map(p => (
            <EmojiParticle key={p.id} p={p} />
          ))}
        </AnimatePresence>

        {}
        <motion.button
          onClick={explode}
          whileHover={{ scale: 1.06 }}
          whileTap={{ scale: 0.88 }}
          transition={{ type: 'spring', stiffness: 420, damping: 18 }}
          className="relative z-10 cursor-pointer rounded-full px-14 py-4 text-xl font-bold text-white select-none"
          style={{
            background:  currentSet.bg,
            boxShadow:   `0 8px 32px ${currentSet.shadow}, 0 2px 8px rgba(0,0,0,0.3)`,
            letterSpacing: '-0.01em',
          }}
        >
          {}
          <AnimatePresence mode="wait">
            <motion.span
              key={setIdx}
              className="block"
              initial={{ opacity: 0, y: -8, filter: 'blur(4px)' }}
              animate={{ opacity: 1, y: 0,  filter: 'blur(0px)' }}
              exit={{    opacity: 0, y:  8,  filter: 'blur(4px)' }}
              transition={{ type: 'spring', duration: 0.35, bounce: 0 }}
            >
              {currentSet.label}
            </motion.span>
          </AnimatePresence>
        </motion.button>
      </div>
    </div>
  )
}

```

---

## Noise Field

Category: Backgrounds
Slug: `noise-field`
URL: https://aicanvas.me/components/noise-field

An animated flow field background. A grid of arrows driven by layered sine-wave noise drifts like wind. Hover and they turn to point at your cursor.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/noise-field
```

```tsx
'use client'

/**
 * Renders a canvas field of arrows following an organic flow pattern.
 * Nearby arrows turn toward the pointer with distance-based easing.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



// tune: raise to spread the arrows farther apart
const GRID_SPACING = 24    
// tune: raise to lengthen each arrow shaft
const SHAFT_LEN    = 8     
// tune: raise to enlarge each arrowhead
const HEAD_SIZE    = 4     


// tune: raise to widen pointer influence
const DECAY_DIST = 320     
// tune: raise to quicken arrows nearest the pointer
const LERP_FAST  = 0.12    
// tune: raise to quicken distant arrows
const LERP_MIN   = 0.006   
// tune: raise to quicken the return to idle flow
const IDLE_LERP  = 0.010   


// tune: raise to increase angular drift
const WOBBLE_AMP  = 0.18   
// tune: raise to speed the wobble
const WOBBLE_FREQ = 0.7    


interface Arrow {
  gx: number
  gy: number
  angle: number   
  phase: number   
}




function flowAngle(gx: number, gy: number, t: number): number {
  return (
    Math.sin(gx * 0.007 + t) * Math.PI +
    Math.cos(gy * 0.007 + t * 0.6) * Math.PI
  )
}


function lerpAngle(current: number, target: number, speed: number): number {
  let diff = target - current
  while (diff >  Math.PI) diff -= Math.PI * 2
  while (diff < -Math.PI) diff += Math.PI * 2
  return current + diff * speed
}


export default function NoiseField() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const isDarkRef   = useRef(isDark)
  const mouseRef    = useRef<{ x: number; y: number } | null>(null)
  const arrowsRef   = useRef<Arrow[]>([])

  useIsomorphicLayoutEffect(() => { isDarkRef.current = isDark }, [isDark])

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cw = el.closest('[data-card-theme]')
    if (cw) observer.observe(cw, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const onMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect()
      mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }
    }
    const onLeave = () => { mouseRef.current = null }
    const onTouch = (e: TouchEvent) => {
      const touch = e.touches[0]
      if (!touch) return
      const rect = canvas.getBoundingClientRect()
      mouseRef.current = { x: touch.clientX - rect.left, y: touch.clientY - rect.top }
    }
    const onTouchEnd = () => { mouseRef.current = null }
    canvas.addEventListener('mousemove', onMove)
    canvas.addEventListener('mouseleave', onLeave)
    canvas.addEventListener('touchstart', onTouch, { passive: true })
    canvas.addEventListener('touchmove', onTouch, { passive: true })
    canvas.addEventListener('touchend', onTouchEnd)
    return () => {
      canvas.removeEventListener('mousemove', onMove)
      canvas.removeEventListener('mouseleave', onLeave)
      canvas.removeEventListener('touchstart', onTouch)
      canvas.removeEventListener('touchmove', onTouch)
      canvas.removeEventListener('touchend', onTouchEnd)
    }
  }, [])

  
  useEffect(() => {
    const canvas = canvasRef.current
    const container = containerRef.current
    if (!canvas || !container) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    let rafId: number
    let t = 0

    function buildGrid(W: number, H: number) {
      
      const prev = new Map<string, Arrow>()
      for (const a of arrowsRef.current) prev.set(`${a.gx},${a.gy}`, a)
      const next: Arrow[] = []
      for (let gx = GRID_SPACING / 2; gx < W; gx += GRID_SPACING) {
        for (let gy = GRID_SPACING / 2; gy < H; gy += GRID_SPACING) {
          const existing = prev.get(`${gx},${gy}`)
          next.push({
            gx,
            gy,
            angle: existing?.angle ?? flowAngle(gx, gy, t),
            phase: existing?.phase ?? Math.random() * Math.PI * 2,
          })
        }
      }
      arrowsRef.current = next
    }

    const resize = () => {
      const w   = container.clientWidth  || 480
      const h   = container.clientHeight || 480
      const dpr = window.devicePixelRatio || 1
      canvas.width  = w * dpr
      canvas.height = h * dpr
      canvas.style.width  = `${w}px`
      canvas.style.height = `${h}px`
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      buildGrid(w, h)
    }
    resize()

    const ro = new ResizeObserver(resize)
    ro.observe(container)

    function draw() {
      const W     = container!.clientWidth  || 480
      const H     = container!.clientHeight || 480
      const dark  = isDarkRef.current
      const mouse = mouseRef.current

      
      ctx!.fillStyle = dark ? '#110F0C' : '#F5F1EA'
      ctx!.fillRect(0, 0, W, H)

      ctx!.lineCap  = 'round'
      ctx!.lineJoin = 'round'

      for (const arrow of arrowsRef.current) {
        const { gx, gy } = arrow

        if (mouse) {
          
          const dx   = mouse.x - gx
          const dy   = mouse.y - gy
          const dist = Math.sqrt(dx * dx + dy * dy)
          
          const proximityFactor = Math.exp(-dist / DECAY_DIST)
          const wobble = WOBBLE_AMP * (1 - proximityFactor * 0.7) * Math.sin(t * WOBBLE_FREQ + arrow.phase)
          const targetAngle = Math.atan2(dy, dx) + wobble
          const speed = LERP_FAST * proximityFactor + LERP_MIN
          arrow.angle = lerpAngle(arrow.angle, targetAngle, speed)
        } else {
          
          const noiseAngle = flowAngle(gx, gy, t) + WOBBLE_AMP * 0.5 * Math.sin(t * WOBBLE_FREQ * 0.8 + arrow.phase)
          arrow.angle = lerpAngle(arrow.angle, noiseAngle, IDLE_LERP)
        }

        const angle = arrow.angle
        const cos   = Math.cos(angle)
        const sin   = Math.sin(angle)

        
        let alpha: number
        if (mouse) {
          const dx = mouse.x - gx, dy = mouse.y - gy
          const dist2 = dx * dx + dy * dy
          
          const proximity = Math.exp(-dist2 / (200 * 200))
          alpha = dark
            ? 0.06 + proximity * 0.84
            : 0.05 + proximity * 0.75
        } else {
          
          alpha = dark ? 0.18 : 0.15
        }

        const color = dark
          ? `rgba(255,255,255,${alpha.toFixed(3)})`
          : `rgba(28,25,22,${alpha.toFixed(3)})`

        ctx!.strokeStyle = color
        const tipX = gx + cos * SHAFT_LEN
        const tipY = gy + sin * SHAFT_LEN
        const tailX = gx - cos * SHAFT_LEN
        const tailY = gy - sin * SHAFT_LEN

        
        ctx!.lineWidth = 1.2
        ctx!.beginPath()
        ctx!.moveTo(tailX, tailY)
        ctx!.lineTo(tipX, tipY)
        ctx!.stroke()

        
        const headAngle = Math.PI - Math.PI / 5
        ctx!.lineWidth = 1.0
        ctx!.beginPath()
        ctx!.moveTo(tipX, tipY)
        ctx!.lineTo(
          tipX + Math.cos(angle + headAngle) * HEAD_SIZE,
          tipY + Math.sin(angle + headAngle) * HEAD_SIZE,
        )
        ctx!.stroke()
        ctx!.beginPath()
        ctx!.moveTo(tipX, tipY)
        ctx!.lineTo(
          tipX + Math.cos(angle - headAngle) * HEAD_SIZE,
          tipY + Math.sin(angle - headAngle) * HEAD_SIZE,
        )
        ctx!.stroke()
      }

      t += 0.004
      rafId = requestAnimationFrame(draw)
    }

    rafId = requestAnimationFrame(draw)
    return () => {
      cancelAnimationFrame(rafId)
      ro.disconnect()
    }
  }, [])

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}
    >
      <canvas ref={canvasRef} className="absolute inset-0" />
    </div>
  )
}

```

---

## Seven-Segment Clock

Category: Widgets
Slug: `neon-clock`
URL: https://aicanvas.me/components/neon-clock

A retro 7-segment LCD clock with pixel-grid overlay. Shows live HH:MM:SS with blinking colon, AM/PM indicator, day of week row, and full date.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/neon-clock
```

```tsx
'use client'

/**
 * Displays the current time and date with seven-segment neon digits.
 * Active segments and calendar labels update from the local clock.
 */
import { useState, useEffect } from 'react'


const CYAN     = '#55E8E2'
const CYAN_OFF  = 'rgba(85,232,226,0.055)'  
const CYAN_IDLE = 'rgba(85,232,226,0.28)'   
const CYAN_DIM  = 'rgba(85,232,226,0.65)'   
const BG       = '#060a0a'
const GLOW_SVG = `drop-shadow(0 0 3px ${CYAN}) drop-shadow(0 0 8px ${CYAN}99)`
const GLOW_TXT = `0 0 5px ${CYAN}, 0 0 11px ${CYAN}88`


const VW = 42, VH = 80
// tune: raise to thicken the digit segments
const T  = 6    
// tune: raise to deepen the segment bevels
const BV = 3    
// tune: raise to increase segment edge gaps
const GP = 2    

function hPts(y: number): string {
  const x1 = GP + BV, x2 = VW - GP - BV, cy = y + T / 2
  return `${GP},${cy} ${x1},${y} ${x2},${y} ${VW-GP},${cy} ${x2},${y+T} ${x1},${y+T}`
}

function vPts(x: number, y1: number, y2: number): string {
  const cx = x + T / 2
  return `${cx},${y1} ${x+T},${y1+BV} ${x+T},${y2-BV} ${cx},${y2} ${x},${y2-BV} ${x},${y1+BV}`
}

const aY = GP, gY = VH / 2 - T / 2, dY = VH - GP - T
const lX = GP, rX = VW - GP - T


const aEnd = aY,         gTop = gY - GP
const gEnd = gY + T + GP, dTop = dY + T

const SHAPES = [
  hPts(aY),               
  vPts(rX, aEnd, gTop),  
  vPts(rX, gEnd, dTop),  
  hPts(dY),               
  vPts(lX, gEnd, dTop),  
  vPts(lX, aEnd, gTop),  
  hPts(gY),               
]


const SEG: Record<string, boolean[]> = {
  '0': [true,  true,  true,  true,  true,  true,  false],
  '1': [false, true,  true,  false, false, false, false],
  '2': [true,  true,  false, true,  true,  false, true ],
  '3': [true,  true,  true,  true,  false, false, true ],
  '4': [false, true,  true,  false, false, true,  true ],
  '5': [true,  false, true,  true,  false, true,  true ],
  '6': [true,  false, true,  true,  true,  true,  true ],
  '7': [true,  true,  true,  false, false, false, false],
  '8': [true,  true,  true,  true,  true,  true,  true ],
  '9': [true,  true,  true,  true,  false, true,  true ],
}


function Digit({ char, size }: { char: string; size: number }) {
  const segs = SEG[char] ?? SEG['8']
  return (
    <svg
      viewBox={`0 0 ${VW} ${VH}`}
      width={size}
      height={Math.round(size * VH / VW)}
      style={{ display: 'block', overflow: 'visible', flexShrink: 0 }}
    >
      {SHAPES.map((pts, i) => (
        <polygon
          key={i}
          points={pts}
          fill={segs[i] ? CYAN : CYAN_OFF}
          style={segs[i] ? { filter: GLOW_SVG } : undefined}
        />
      ))}
    </svg>
  )
}


function ColonDots({ dim, size }: { dim: boolean; size: number }) {
  return (
    <svg
      viewBox={`0 0 ${VW * 0.44} ${VH}`}
      width={Math.round(size * 0.44)}
      height={Math.round(size * VH / VW)}
      style={{ display: 'block', overflow: 'visible', flexShrink: 0 }}
    >
      {([0.30, 0.68] as const).map((yf, i) => (
        <circle
          key={i}
          cx={VW * 0.22}
          cy={VH * yf}
          r={VW * 0.125}
          fill={dim ? CYAN_OFF : CYAN}
          style={dim ? undefined : { filter: GLOW_SVG }}
        />
      ))}
    </svg>
  )
}


const pad2 = (n: number) => n.toString().padStart(2, '0')
const DAYS  = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'] as const

type Now = {
  h: string
  m: string
  s: string
  isPM: boolean
  dow: number
  date: string
}

function getNow(): Now {
  const d = new Date()
  const h = d.getHours()
  return {
    h:    pad2(h % 12 || 12),
    m:    pad2(d.getMinutes()),
    s:    pad2(d.getSeconds()),
    isPM: h >= 12,
    dow:  d.getDay(),
    date: d.toLocaleDateString('en-US', {
      month: 'long', day: 'numeric', year: 'numeric',
    }).toUpperCase(),
  }
}


// tune: change to resize the primary time digits
const BIG       = 50                          
// tune: change to resize the seconds digits
const SML       = 24                          
const GAP       = 3                           
const COLON_BIG = Math.round(BIG * 0.44)     
const COLON_SML = Math.round(SML * 0.44)     

const TIME_W    = 4 * BIG + COLON_BIG + COLON_SML + 2 * SML + 7 * GAP



export default function NeonClock() {
  
  
  const [now,     setNow]     = useState<Now | null>(null)
  const [colonOn, setColonOn] = useState(true)

  useEffect(() => {
    setNow(getNow())
    const id = setInterval(() => {
      setNow(getNow())
      setColonOn(c => !c)
    }, 1000)
    return () => clearInterval(id)
  }, [])

  
  
  if (now === null) {
    return (
      <div
        className="relative flex min-h-screen w-full select-none items-center justify-center overflow-hidden"
        style={{ background: BG, fontFamily: '"Courier New", Courier, monospace' }}
      >
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.48) 1.3px, transparent 1.3px)',
            backgroundSize: '3.8px 3.8px',
          }}
        />
      </div>
    )
  }

  return (
    <div
      className="relative flex h-full w-full select-none items-center justify-center overflow-hidden"
      style={{ background: BG, fontFamily: '"Courier New", Courier, monospace' }}
    >
      {}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>

        {}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: GAP }}>
          <Digit char={now.h[0]} size={BIG} />
          <Digit char={now.h[1]} size={BIG} />
          <ColonDots dim={false} size={BIG} />
          <Digit char={now.m[0]} size={BIG} />
          <Digit char={now.m[1]} size={BIG} />
          <ColonDots dim={!colonOn} size={SML} />

          {}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
            <div style={{ display: 'flex', gap: 6, fontSize: 13, letterSpacing: '0.08em', marginBottom: 3 }}>
              <span style={{ color: !now.isPM ? CYAN : CYAN_IDLE, textShadow: !now.isPM ? GLOW_TXT : 'none' }}>AM</span>
              <span style={{ color:  now.isPM ? CYAN : CYAN_IDLE, textShadow:  now.isPM ? GLOW_TXT : 'none' }}>PM</span>
            </div>
            <div style={{ display: 'flex', gap: GAP }}>
              <Digit char={now.s[0]} size={SML} />
              <Digit char={now.s[1]} size={SML} />
            </div>
          </div>
        </div>

        {}
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            width: TIME_W,
            marginTop: 13,
            fontSize: 13,
            letterSpacing: '0.05em',
          }}
        >
          {DAYS.map((d, i) => (
            <span
              key={d}
              style={{
                color:      i === now.dow ? CYAN        : CYAN_IDLE,
                textShadow: i === now.dow ? GLOW_TXT    : 'none',
              }}
            >
              {d}
            </span>
          ))}
        </div>

        {}
        <div
          style={{
            width: TIME_W,
            marginTop: 5,
            textAlign: 'center',
            fontSize: 13,
            letterSpacing: '0.1em',
            color: CYAN_DIM,
          }}
        >
          {now.date}
        </div>
      </div>

      {}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.48) 1.3px, transparent 1.3px)',
          backgroundSize: '3.8px 3.8px',
        }}
      />
    </div>
  )
}

```

---

## Scramble Text

Category: Typography
Slug: `scramble-text`
URL: https://aicanvas.me/components/scramble-text

Two words scramble continuously in a pixel cipher. Hover the container to decrypt them one by one. Mouse out and they snap back to noise.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/scramble-text
```

```tsx
'use client'

// npm install framer-motion geist
// font-pkg: geist/font/pixel|GeistPixelGrid
/**
 * Displays words whose characters continuously scramble while idle.
 * Hovering resolves each word from left to right before restoring the loop.
 */

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { GeistPixelGrid } from 'geist/font/pixel'






// customize: replace the scramble characters and resolved words below
const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&!'
const WORDS = ['DECRYPT', 'ACCESS']

function randomChar(): string {
  return CHARSET[Math.floor(Math.random() * CHARSET.length)] ?? 'X'
}

interface CharState {
  display: string
  resolved: boolean
}

const makeScrambled = (word: string): CharState[] =>
  word.split('').map(() => ({ display: randomChar(), resolved: false }))

function useScramble(word: string, isHovered: boolean) {
  const [chars, setChars] = useState<CharState[]>(() => makeScrambled(word))

  useEffect(() => {
    let cancelled = false
    const timeouts: ReturnType<typeof setTimeout>[] = []
    let scrambleInterval: ReturnType<typeof setInterval> | null = null

    function startScrambleInterval(resolvedSet: Set<number>) {
      if (scrambleInterval) clearInterval(scrambleInterval)
      scrambleInterval = setInterval(() => {
        if (cancelled) return
        setChars(prev =>
          prev.map((ch, i) => resolvedSet.has(i) ? ch : { display: randomChar(), resolved: false })
        )
      }, 60)
    }

    if (isHovered) {
      const resolvedSet = new Set<number>()
      startScrambleInterval(resolvedSet)
      word.split('').forEach((letter, i) => {
        const t = setTimeout(() => {
          if (cancelled) return
          resolvedSet.add(i)
          setChars(prev =>
            prev.map((ch, idx) => idx === i ? { display: letter, resolved: true } : ch)
          )
          if (resolvedSet.size === word.length && scrambleInterval) {
            clearInterval(scrambleInterval)
            scrambleInterval = null
          }
        }, 80 + i * 100)
        timeouts.push(t)
      })
    } else {
      setChars(makeScrambled(word))
      startScrambleInterval(new Set<number>())
    }

    return () => {
      cancelled = true
      timeouts.forEach(clearTimeout)
      if (scrambleInterval) clearInterval(scrambleInterval)
    }
  }, [isHovered, word])

  return chars
}

function Crosshair({ style }: { style: React.CSSProperties }) {
  const color = 'rgba(190,207,93,0.35)'
  const arm = 14   
  const gap = 3    
  const thick = 1  
  return (
    <div className="pointer-events-none absolute" style={{ width: arm * 2 + gap * 2, height: arm * 2 + gap * 2, ...style }}>
      <svg width="100%" height="100%" viewBox={`0 0 ${arm * 2 + gap * 2} ${arm * 2 + gap * 2}`} fill="none">
        {}
        <line x1={arm + gap} y1={0} x2={arm + gap} y2={arm} stroke={color} strokeWidth={thick} />
        {}
        <line x1={arm + gap} y1={arm + gap * 2} x2={arm + gap} y2={arm * 2 + gap * 2} stroke={color} strokeWidth={thick} />
        {}
        <line x1={0} y1={arm + gap} x2={arm} y2={arm + gap} stroke={color} strokeWidth={thick} />
        {}
        <line x1={arm + gap * 2} y1={arm + gap} x2={arm * 2 + gap * 2} y2={arm + gap} stroke={color} strokeWidth={thick} />
        {}
        <circle cx={arm + gap} cy={arm + gap} r={1.5} fill={color} />
      </svg>
    </div>
  )
}

export default function ScrambleText() {
  const [isHovered, setIsHovered] = useState(false)
  const chars0 = useScramble(WORDS[0]!, isHovered)
  const chars1 = useScramble(WORDS[1]!, isHovered)
  const rows = [chars0, chars1]

  
  const charStyle: React.CSSProperties = {
    color: '#BECF5D',
    fontSize: 'clamp(1.75rem, 9vw, 3.75rem)',
  }

  return (
    <div
      className="relative flex min-h-screen w-full cursor-default items-center justify-center"
      style={{ background: '#292929' }}
    >
      {}
      <Crosshair style={{ top: '10%', right: '8%' }} />
      {}
      <Crosshair style={{ bottom: '10%', left: '8%' }} />
      <div
        className="flex select-none flex-col items-center gap-4"
        style={{ padding: 'clamp(1.5rem, 8vw, 60px) clamp(1rem, 10vw, 80px)' }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onPointerDown={e => {
          
          if (e.pointerType !== 'mouse') setIsHovered(true)
        }}
        onPointerUp={e => {
          if (e.pointerType !== 'mouse') setIsHovered(false)
        }}
        onPointerCancel={e => {
          if (e.pointerType !== 'mouse') setIsHovered(false)
        }}
      >
        {rows.map((chars, rowIdx) => (
          <div key={rowIdx} className={`flex flex-wrap items-center justify-center gap-1 ${GeistPixelGrid.className}`}>
            {rowIdx === 0 && (
              <span className="leading-none tracking-widest" style={charStyle}>/</span>
            )}
            {chars.map((ch, i) => (
              <span
                key={i}
                className="leading-none tracking-widest"
                style={charStyle}
              >
                {ch.display}
              </span>
            ))}
            {rowIdx === rows.length - 1 && (
              <span className="leading-none tracking-widest" style={charStyle}>_</span>
            )}
          </div>
        ))}

        {}
        <motion.p
          className={`mt-2 text-xs font-medium uppercase tracking-[0.2em] ${GeistPixelGrid.className}`}
          style={{ color: 'rgba(190,207,93,0.45)' }}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, ease: 'easeOut', delay: 0.8 }}
        >
          hover to decrypt
        </motion.p>
      </div>
    </div>
  )
}

```

---

## Spider Web

Category: Backgrounds
Slug: `particle-constellation`
URL: https://aicanvas.me/components/particle-constellation

An animated spider web background. Silk strands bow slowly at rest, and hovering pushes each node so it bounces back under tension.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/particle-constellation
```

```tsx
'use client'

/**
 * Renders a radial canvas constellation with bowed connecting strands.
 * Pointer proximity repels nodes and bends nearby connections.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



const N_RADIALS = 24
const N_RINGS   = 14


// tune: raise to increase idle node drift
const SWAY_AMP  = 3.5     
// tune: raise to speed idle drift
const SWAY_SPD  = 0.00045 


// tune: raise to deepen resting strand curves
const BOW_AMP   = 6       
// tune: raise to speed strand oscillation
const BOW_SPD   = 0.55    


// tune: raise to widen node repulsion
const NODE_PUSH_R   = 90  
// tune: raise to strengthen node repulsion
const NODE_PUSH_STR = 3.2 
// tune: raise to quicken the spring return
const SPRING_K      = 0.07 
// tune: lower to reduce retained velocity
const SPRING_DAMP   = 0.84 


// tune: raise to widen strand bending
const PUSH_RADIUS = 280   
// tune: raise to increase strand displacement
const PUSH_MAX    = 18    


interface WebNode {
  bx: number; by: number
  phase: number       
  
  sx: number; sy: number
  svx: number; svy: number
}

interface Strand {
  a: number; b: number
  kind: 'radial' | 'ring'
  ring: number
  
  bowPhase: number    
  bowPerpX: number    
  bowPerpY: number    
}


function buildWeb(W: number, H: number): { nodes: WebNode[]; strands: Strand[] } {
  const cx   = W / 2
  const cy   = H / 2
  const maxR = Math.sqrt(W * W + H * H) * 0.56

  const nodes: WebNode[] = []

  
  nodes.push({ bx: cx, by: cy, phase: 0, sx: 0, sy: 0, svx: 0, svy: 0 })

  for (let r = 1; r <= N_RINGS; r++) {
    const baseR = maxR * (r / N_RINGS)
    for (let s = 0; s < N_RADIALS; s++) {
      const angle  = s * (2 * Math.PI / N_RADIALS) - Math.PI / 2
      const jitter = 1 + (Math.random() - 0.5) * 0.18
      nodes.push({
        bx: cx + Math.cos(angle) * baseR * jitter,
        by: cy + Math.sin(angle) * baseR * jitter,
        phase: Math.random() * Math.PI * 2,
        sx: 0, sy: 0, svx: 0, svy: 0,
      })
    }
  }

  const strands: Strand[] = []

  function addStrand(a: number, b: number, kind: 'radial' | 'ring', ring: number) {
    const na = nodes[a], nb = nodes[b]
    const dx = nb.bx - na.bx, dy = nb.by - na.by
    const len = Math.sqrt(dx * dx + dy * dy) || 1
    
    strands.push({
      a, b, kind, ring,
      bowPhase: (na.phase + nb.phase) / 2,
      bowPerpX: -dy / len,
      bowPerpY:  dx / len,
    })
  }

  
  for (let s = 0; s < N_RADIALS; s++) {
    addStrand(0, 1 + s, 'radial', 1)
    for (let r = 1; r < N_RINGS; r++) {
      const ai = 1 + (r - 1) * N_RADIALS + s
      const bi = 1 +  r      * N_RADIALS + s
      addStrand(ai, bi, 'radial', r + 1)
    }
  }

  
  for (let r = 1; r <= N_RINGS; r++) {
    for (let s = 0; s < N_RADIALS; s++) {
      const ai = 1 + (r - 1) * N_RADIALS + s
      const bi = 1 + (r - 1) * N_RADIALS + (s + 1) % N_RADIALS
      addStrand(ai, bi, 'ring', r)
    }
  }

  return { nodes, strands }
}


function detectDark(el: HTMLElement): boolean {
  const w = el.closest('[data-card-theme]')
  if (w) return w.classList.contains('dark')
  return document.documentElement.classList.contains('dark')
}


export default function ParticleConstellation() {
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const webRef       = useRef<{ nodes: WebNode[]; strands: Strand[] } | null>(null)
  const rafRef       = useRef<number>(0)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => { const d = detectDark(el); setIsDark(d); isDarkRef.current = d }
    check()
    const mo = new MutationObserver(check)
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const w = el.closest('[data-card-theme]')
    if (w) mo.observe(w, { attributes: true, attributeFilter: ['class'] })
    return () => mo.disconnect()
  }, [])

  
  useIsomorphicLayoutEffect(() => {
    const canvas    = canvasRef.current
    const container = containerRef.current
    if (!canvas || !container) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    let alive = true
    let time  = 0

    function resize() {
      if (!canvas || !container) return
      const dpr = window.devicePixelRatio || 1
      const w   = container.clientWidth
      const h   = container.clientHeight
      canvas.width  = w * dpr
      canvas.height = h * dpr
      canvas.style.width  = `${w}px`
      canvas.style.height = `${h}px`
      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
      webRef.current = buildWeb(w, h)
    }
    resize()

    const ro = new ResizeObserver(() => { if (alive) resize() })
    ro.observe(container)

    const mo = new MutationObserver(() => {
      if (alive && container) isDarkRef.current = detectDark(container)
    })
    const wrapper = container.closest('[data-card-theme]')
    if (wrapper) mo.observe(wrapper, { attributes: true, attributeFilter: ['class'] })
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

    function tick() {
      if (!alive || !canvas || !ctx) return
      rafRef.current = requestAnimationFrame(tick)

      time += SWAY_SPD
      const mouse = mouseRef.current
      const web   = webRef.current
      if (!web) return

      const W = container!.clientWidth
      const H = container!.clientHeight

      
      for (const n of web.nodes) {
        
        const swayX = n.bx + Math.sin(time * 1.1 + n.phase)       * SWAY_AMP
        const swayY = n.by + Math.cos(time * 0.9 + n.phase * 1.4) * SWAY_AMP

        
        if (mouse) {
          const liveX = swayX + n.sx
          const liveY = swayY + n.sy
          const dx = liveX - mouse.x
          const dy = liveY - mouse.y
          const dist = Math.sqrt(dx * dx + dy * dy)
          if (dist < NODE_PUSH_R && dist > 0.1) {
            const force = (1 - dist / NODE_PUSH_R) * NODE_PUSH_STR
            n.svx += (dx / dist) * force
            n.svy += (dy / dist) * force
          }
        }

        
        n.svx += -n.sx * SPRING_K
        n.svy += -n.sy * SPRING_K
        n.svx *= SPRING_DAMP
        n.svy *= SPRING_DAMP
        n.sx  += n.svx
        n.sy  += n.svy
      }

      
      const pos = web.nodes.map(n => ({
        x: n.bx + Math.sin(time * 1.1 + n.phase)       * SWAY_AMP + n.sx,
        y: n.by + Math.cos(time * 0.9 + n.phase * 1.4) * SWAY_AMP + n.sy,
      }))

      
      const dark = isDarkRef.current
      const fg   = dark ? '255,255,255' : '28,25,22'

      ctx.clearRect(0, 0, W, H)
      ctx.fillStyle = dark ? '#110F0C' : '#F5F1EA'
      ctx.fillRect(0, 0, W, H)
      ctx.lineCap  = 'round'
      ctx.lineJoin = 'round'

      for (const s of web.strands) {
        const pa = pos[s.a]
        const pb = pos[s.b]

        const mx = (pa.x + pb.x) / 2
        const my = (pa.y + pb.y) / 2

        
        const bow    = BOW_AMP * Math.sin(time * BOW_SPD * 60 + s.bowPhase)
        let cpx = mx + s.bowPerpX * bow
        let cpy = my + s.bowPerpY * bow

        
        if (mouse) {
          const cdx    = mouse.x - mx
          const cdy    = mouse.y - my
          const cdist2 = cdx * cdx + cdy * cdy
          const cdist  = Math.sqrt(cdist2)
          const falloff = Math.exp(-cdist2 / (PUSH_RADIUS * PUSH_RADIUS))
          const bend    = PUSH_MAX * falloff
          if (cdist > 0.1) {
            cpx -= (cdx / cdist) * bend
            cpy -= (cdy / cdist) * bend
          }
        }

        
        const depthFade = 1 - (s.ring - 1) / (N_RINGS + 2)
        let alpha = s.kind === 'radial' ? 0.42 * depthFade : 0.20 * depthFade

        if (mouse) {
          const cdx = mouse.x - mx, cdy = mouse.y - my
          const proximity = Math.exp(-(cdx * cdx + cdy * cdy) / (PUSH_RADIUS * PUSH_RADIUS * 0.35))
          alpha = alpha * (1 - proximity * 0.82)
        }

        ctx.strokeStyle = `rgba(${fg},${alpha.toFixed(3)})`
        ctx.lineWidth   = s.kind === 'radial' ? 0.75 : 0.5

        ctx.beginPath()
        ctx.moveTo(pa.x, pa.y)
        ctx.quadraticCurveTo(cpx, cpy, pb.x, pb.y)
        ctx.stroke()
      }

      
      for (let i = 0; i < pos.length; i++) {
        const p = pos[i]
        let alpha = i === 0 ? 0.45 : 0.16
        if (mouse) {
          const dx = mouse.x - p.x, dy = mouse.y - p.y
          const prox = Math.exp(-(dx * dx + dy * dy) / (160 * 160))
          alpha = alpha * (1 - prox * 0.82)
        }
        ctx.beginPath()
        ctx.arc(p.x, p.y, i === 0 ? 1.8 : 1.1, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(${fg},${alpha.toFixed(3)})`
        ctx.fill()
      }
    }

    rafRef.current = requestAnimationFrame(tick)

    function onMove(e: MouseEvent) {
      const rect = canvas!.getBoundingClientRect()
      mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }
    }
    function onLeave() { mouseRef.current = null }
    function onTouch(e: TouchEvent) {
      const t = e.touches[0]
      if (!t) return
      const rect = canvas!.getBoundingClientRect()
      mouseRef.current = { x: t.clientX - rect.left, y: t.clientY - rect.top }
    }
    function onTouchEnd() { mouseRef.current = null }
    container.addEventListener('mousemove', onMove)
    container.addEventListener('mouseleave', onLeave)
    container.addEventListener('touchstart', onTouch, { passive: true })
    container.addEventListener('touchmove', onTouch, { passive: true })
    container.addEventListener('touchend', onTouchEnd)

    return () => {
      alive = false
      cancelAnimationFrame(rafRef.current)
      ro.disconnect()
      mo.disconnect()
      container.removeEventListener('mousemove', onMove)
      container.removeEventListener('mouseleave', onLeave)
      container.removeEventListener('touchstart', onTouch)
      container.removeEventListener('touchmove', onTouch)
      container.removeEventListener('touchend', onTouchEnd)
    }
  }, [])

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}
    >
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
    </div>
  )
}

```

---

## Magnetic Logo Cluster

Category: Backgrounds
Slug: `magnetic-logo-cluster`
URL: https://aicanvas.me/components/magnetic-logo-cluster

An interactive swarm of your logo. Marks fly in from off-screen, drift endlessly, and bend toward the cursor.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/magnetic-logo-cluster
```

```tsx
'use client'

// npm install framer-motion

/**
 * A swarm of logo marks that fly in from off-screen, settle into an
 * overlapping diamond pack, breathe on an infinite GPU drift, and bend
 * toward the cursor like iron filings around a magnet.
 *
 * Three motion behaviours run per icon:
 *
 *   1. Entry (one-shot spring): off-screen → rest, staggered across the pack.
 *   2. Float (CSS @keyframes, GPU): infinite slow position drift + rotation
 *      sway. Compositor-driven, so no JS runs per frame while at rest.
 *   3. Magnet (spring): the cursor pulls nearby icons toward it with a soft
 *      radial falloff plus a tangential curl, so they trail and overshoot
 *      before settling.
 *
 * Performance: drift is pure CSS, and the magnet transform returns 0 outside
 * the influence radius, so the springs for distant icons are parked and only
 * the icons near the cursor consume per-frame work.
 */
import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
  type MotionValue,
} from 'framer-motion'
import {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type CSSProperties,
  type ReactNode,
} from 'react'

// ── Defaults ───────────────────────────────────────────────────────────────
const DRIFT_ROT_AMPLITUDE = 3.5
const DRIFT_MAG_MIN_FRAC = 0.012
const DRIFT_MAG_MAX_FRAC = 0.03
const DRIFT_DURATION_MIN = 4
const DRIFT_DURATION_MAX = 8
const ENTRY_SPRING = { type: 'spring' as const, stiffness: 100, damping: 18, mass: 1 }
// Low mass + medium damping: a slight overshoot reaching for the cursor,
// a gentle return when it moves away.
const MAGNET_SPRING = { stiffness: 180, damping: 14, mass: 0.6 }
const PARKED = 99999

type Palette = {
  id: string
  from: string
  to: string
  mid: string
  dark: string
}

// Default palettes for the built-in mark: a light-to-dark ladder in two
// families, so the pack reads as depth rather than as one flat colour.
const OLIVE_PALETTES: Palette[] = [
  { id: 'op0', from: '#EBF0C8', to: '#C5D672', mid: '#5C5C58', dark: '#262624' },
  { id: 'op1', from: '#DAE4A0', to: '#BECF5D', mid: '#4F4F4C', dark: '#1E1E1E' },
  { id: 'op2', from: '#BECF5D', to: '#92A143', mid: '#4F4F4C', dark: '#1E1E1E' },
  { id: 'op3', from: '#A8B94D', to: '#6E7E22', mid: '#3A3A38', dark: '#1A1A19' },
  { id: 'op4', from: '#869631', to: '#5C6A1C', mid: '#2E2E2C', dark: '#141413' },
]
const SAND_PALETTES: Palette[] = [
  { id: 'sp0', from: '#C8C8C0', to: '#BABAB4', mid: '#4F4F4C', dark: '#21211F' },
  { id: 'sp1', from: '#BABAB4', to: '#9E9E98', mid: '#383836', dark: '#1A1A19' },
  { id: 'sp2', from: '#9E9E98', to: '#7D7D78', mid: '#21211F', dark: '#141413' },
  { id: 'sp3', from: '#7D7D78', to: '#666662', mid: '#21211F', dark: '#141413' },
  { id: 'sp4', from: '#666662', to: '#4F4F4C', mid: '#1A1A19', dark: '#141413' },
]
const ALL_PALETTES: Palette[] = [...OLIVE_PALETTES, ...SAND_PALETTES]

// Weighted pool, biased dark so the light marks read as highlights: 30% of
// the accent family, 70% of the neutral one.
const PALETTE_WEIGHTS: Array<[Palette, number]> = [
  [OLIVE_PALETTES[0], 2],
  [OLIVE_PALETTES[1], 4],
  [OLIVE_PALETTES[2], 14],
  [OLIVE_PALETTES[3], 15],
  [OLIVE_PALETTES[4], 10],
  [SAND_PALETTES[0], 6],
  [SAND_PALETTES[1], 17],
  [SAND_PALETTES[2], 30],
  [SAND_PALETTES[3], 36],
  [SAND_PALETTES[4], 16],
]

// ── Deterministic randomness ───────────────────────────────────────────────
// Everything below is seeded, so the server and the client build the exact
// same pack and hydration never mismatches.

function mulberry32(seed: number) {
  let t = seed >>> 0
  return () => {
    t = (t + 0x6d2b79f5) >>> 0
    let x = t
    x = Math.imul(x ^ (x >>> 15), x | 1)
    x ^= x + Math.imul(x ^ (x >>> 7), x | 61)
    return ((x ^ (x >>> 14)) >>> 0) / 4294967296
  }
}

function shuffle<T>(arr: T[], seed: number): T[] {
  const out = arr.slice()
  const rand = mulberry32(seed)
  for (let i = out.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1))
    ;[out[i], out[j]] = [out[j], out[i]]
  }
  return out
}

function smoothstep(edge0: number, edge1: number, x: number) {
  const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)))
  return t * t * (3 - 2 * t)
}

// Halton sequence — a low-discrepancy quasi-random generator. Index 1..N
// spreads points evenly across [0,1] without the clumping of Math.random or
// the visible rows of a grid layout.
function halton(index: number, base: number): number {
  let result = 0
  let f = 1
  let i = index
  while (i > 0) {
    f /= base
    result += f * (i % base)
    i = Math.floor(i / base)
  }
  return result
}

type Item = {
  id: number
  xFrac: number
  yFrac: number
  sizeFrac: number
  rotation: number
  palette: Palette
  iconIndex: number
  tint?: string
  fromXFrac: number
  fromYFrac: number
  driftXFrac: number
  driftYFrac: number
  driftDuration: number
  driftDelay: number
  entryDelay: number
  zIndex: number
}

type ClusterConfig = {
  count: number
  seed: number
  layout: 'diamond' | 'rect'
  spreadX: number
  spreadY: number
  minIconSize: number
  maxIconSize: number
  drift: number
  entryStagger: number
  iconCount: number
  tints: string[]
}

function buildCluster(cfg: ClusterConfig): Item[] {
  const pool: Palette[] = []
  for (const [palette, weight] of PALETTE_WEIGHTS) {
    // Scale the weights so the mix holds at any count, not just the default.
    const n = Math.max(1, Math.round((weight / 150) * cfg.count))
    for (let i = 0; i < n; i++) pool.push(palette)
  }
  const palettes = shuffle(pool, cfg.seed ^ 0xabcdef12)
  const items: Item[] = []

  for (let i = 0; i < cfg.count; i++) {
    const rand = mulberry32(cfg.seed * 0x2545f491 + 0x9e3779b1 + i * 2654435761)

    // Take 2D Halton points in the unit square. For the diamond layout,
    // rotate them 45° (x' = u - v, y' = u + v) so the square maps to a
    // rhombus with corners at (±1, 0) and (0, ±1). The +1 offset skips the
    // degenerate first point; the jitter keeps it from looking machined.
    const u = halton(i + 1, 2) - 0.5
    const v = halton(i + 1, 3) - 0.5
    const ux = cfg.layout === 'diamond' ? u - v : u * 2
    const uy = cfg.layout === 'diamond' ? u + v : v * 2
    const xFrac = ux * cfg.spreadX + (rand() - 0.5) * 0.018
    const yFrac = uy * cfg.spreadY + (rand() - 0.5) * 0.018

    // Size is fully random per icon, biased small so the big ones stay rare.
    const sizeFrac =
      cfg.minIconSize + Math.pow(rand(), 1.4) * (cfg.maxIconSize - cfg.minIconSize)

    // Entry origin: a random bearing, 1.6–2.0 container widths out, so the
    // pack converges from every direction at once.
    const fromAngle = rand() * Math.PI * 2
    const fromDist = 1.6 + rand() * 0.4

    const driftAngle = rand() * Math.PI * 2
    const driftMag =
      (DRIFT_MAG_MIN_FRAC + rand() * (DRIFT_MAG_MAX_FRAC - DRIFT_MAG_MIN_FRAC)) *
      cfg.drift

    items.push({
      id: i,
      xFrac,
      yFrac,
      sizeFrac,
      // Free base rotation in ±180°; the float loop sways around this base.
      rotation: (rand() - 0.5) * 360,
      palette: palettes[i % palettes.length],
      iconIndex: cfg.iconCount > 0 ? i % cfg.iconCount : 0,
      tint: cfg.tints.length ? cfg.tints[Math.floor(rand() * cfg.tints.length)] : undefined,
      fromXFrac: Math.cos(fromAngle) * fromDist,
      fromYFrac: Math.sin(fromAngle) * fromDist,
      driftXFrac: Math.cos(driftAngle) * driftMag,
      driftYFrac: Math.sin(driftAngle) * driftMag,
      driftDuration:
        DRIFT_DURATION_MIN + rand() * (DRIFT_DURATION_MAX - DRIFT_DURATION_MIN),
      driftDelay: -rand() * DRIFT_DURATION_MAX,
      entryDelay: i * cfg.entryStagger,
      // Stack the bigger icons on top so they read as the foreground layer.
      zIndex: Math.round(sizeFrac * 10000),
    })
  }
  return items
}

// Shared gradient defs live in one hidden <svg>, so every mark references
// them by id instead of carrying its own <defs>.
function GradientDefs({ uid }: { uid: string }) {
  return (
    <svg
      aria-hidden='true'
      width='0'
      height='0'
      style={{ position: 'absolute', width: 0, height: 0 }}
    >
      <defs>
        {ALL_PALETTES.map((p) => (
          <linearGradient
            key={p.id}
            id={`${uid}-${p.id}`}
            x1='9'
            y1='3'
            x2='24.8756'
            y2='17'
            gradientUnits='userSpaceOnUse'
          >
            <stop stopColor={p.from} />
            <stop offset='1' stopColor={p.to} />
          </linearGradient>
        ))}
      </defs>
    </svg>
  )
}

// The built-in placeholder mark: an isometric cube in three tones. Swap the
// whole thing out by passing your own logos to the `icons` prop.
function DefaultMark({ palette, uid }: { palette: Palette; uid: string }) {
  return (
    <svg viewBox='0 0 28 24' fill='none' aria-hidden='true'>
      <path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M19.8513 0C20.5626 0 21.2204 0.377823 21.5788 0.992258L22.75 3L27.4122 10.9923C27.7754 11.615 27.7754 12.385 27.4122 13.0077L22.75 21L21.5788 23.0077C21.2204 23.6222 20.5626 24 19.8513 24H8.14874C7.43741 24 6.7796 23.6222 6.42118 23.0077L0.587849 13.0077C0.224593 12.385 0.224593 11.615 0.58785 10.9923L6.42118 0.992257C6.7796 0.377822 7.43741 0 8.14874 0H19.8513ZM4 12L9 21H18.25L13 12L18.25 3H9L4 12Z'
        fill={`url(#${uid}-${palette.id})`}
      />
      <path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M9 21L4 12H13L18.25 21H9Z'
        fill={palette.dark}
      />
      <path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M13 12H4L9 3H18.25L13 12Z'
        fill={palette.mid}
      />
    </svg>
  )
}

// One icon, four nested layers:
//   outer (static):      pins the icon's centre to its rest point in px
//   magnet (motion.div): spring-lagged x/y from the cursor attraction
//   entry  (motion.div): one-shot off-screen → 0
//   float  (plain div):  GPU-driven CSS animation, no per-frame JS
function ClusterIcon({
  item,
  size,
  mouseX,
  mouseY,
  reduceMotion,
  magnetRadius,
  magnetStrength,
  curl,
  uid,
  children,
}: {
  item: Item
  size: number
  mouseX: MotionValue<number>
  mouseY: MotionValue<number>
  reduceMotion: boolean
  magnetRadius: number
  magnetStrength: number
  curl: number
  uid: string
  children?: ReactNode
}) {
  const restX = item.xFrac * size
  const restY = item.yFrac * size
  const box = item.sizeFrac * size
  const influence = magnetRadius * size
  const strength = magnetStrength * size

  // Radial attraction with a smoothstep falloff over the influence radius,
  // plus a tangential component so the field swirls instead of tugging in a
  // straight line. Returning 0 past the radius parks the spring, which is
  // why no explicit proximity gate is needed.
  const magnetX = useTransform([mouseX, mouseY], (input) => {
    const [mx, my] = input as [number, number]
    const dx = mx - restX
    const dy = my - restY
    const d = Math.hypot(dx, dy)
    if (d >= influence || d < 0.0001) return 0
    const fall = 1 - smoothstep(0, influence, d)
    const normX = dx / d
    const tanX = -(dy / d)
    return (normX + tanX * curl) * strength * fall
  })
  const magnetY = useTransform([mouseX, mouseY], (input) => {
    const [mx, my] = input as [number, number]
    const dx = mx - restX
    const dy = my - restY
    const d = Math.hypot(dx, dy)
    if (d >= influence || d < 0.0001) return 0
    const fall = 1 - smoothstep(0, influence, d)
    const normY = dy / d
    const tanY = dx / d
    return (normY + tanY * curl) * strength * fall
  })

  const springX = useSpring(magnetX, MAGNET_SPRING)
  const springY = useSpring(magnetY, MAGNET_SPRING)

  // Per-icon amplitude, period and phase feed the shared @keyframes loop, so
  // the pack never sways in unison.
  const floatStyle: CSSProperties = {
    width: '100%',
    height: '100%',
    ['--ic-dx' as never]: item.driftXFrac * size,
    ['--ic-dy' as never]: item.driftYFrac * size,
    ['--ic-rot' as never]: item.rotation,
    ['--ic-rot-amp' as never]: DRIFT_ROT_AMPLITUDE,
    ['--ic-duration' as never]: `${item.driftDuration}s`,
    ['--ic-delay' as never]: `${item.driftDelay}s`,
  }

  const artwork = children ?? <DefaultMark palette={item.palette} uid={uid} />

  return (
    <div
      style={{
        position: 'absolute',
        left: `calc(50% + ${restX}px)`,
        top: `calc(50% + ${restY}px)`,
        width: box,
        height: box,
        marginLeft: -box / 2,
        marginTop: -box / 2,
        zIndex: item.zIndex,
        color: item.tint,
        pointerEvents: 'none',
      }}
    >
      <motion.div
        style={{
          width: '100%',
          height: '100%',
          x: reduceMotion ? 0 : springX,
          y: reduceMotion ? 0 : springY,
          willChange: 'transform',
        }}
      >
        <motion.div
          style={{ width: '100%', height: '100%' }}
          initial={
            reduceMotion
              ? false
              : {
                  x: item.fromXFrac * size,
                  y: item.fromYFrac * size,
                  opacity: 0,
                  scale: 0.5,
                }
          }
          animate={{ x: 0, y: 0, opacity: 1, scale: 1 }}
          transition={{ ...ENTRY_SPRING, delay: reduceMotion ? 0 : item.entryDelay }}
        >
          {reduceMotion ? (
            <div
              className='aicanvas-cluster-art'
              style={{
                width: '100%',
                height: '100%',
                transform: `rotate(${item.rotation}deg)`,
              }}
            >
              {artwork}
            </div>
          ) : (
            <div className='aicanvas-cluster-art aicanvas-cluster-float' style={floatStyle}>
              {artwork}
            </div>
          )}
        </motion.div>
      </motion.div>
    </div>
  )
}

// The float loop, plus the one rule that lets any artwork — inline SVG, an
// <img>, a whole component — fill its square slot without the caller having
// to style it.
const CLUSTER_CSS = `
.aicanvas-cluster-float {
  animation: aicanvas-cluster-float var(--ic-duration) ease-in-out var(--ic-delay) infinite alternate;
  will-change: transform;
  transform: translateZ(0);
}
.aicanvas-cluster-art > *,
.aicanvas-cluster-art > svg,
.aicanvas-cluster-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes aicanvas-cluster-float {
  from {
    transform:
      translate(calc(var(--ic-dx) * -1px), calc(var(--ic-dy) * -1px))
      rotate(calc((var(--ic-rot) - var(--ic-rot-amp)) * 1deg));
  }
  to {
    transform:
      translate(calc(var(--ic-dx) * 1px), calc(var(--ic-dy) * 1px))
      rotate(calc((var(--ic-rot) + var(--ic-rot-amp)) * 1deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .aicanvas-cluster-float { animation: none; }
}
`

/**
 * @typedef {object} MagneticLogoClusterProps
 * @property {React.ReactNode[]} [icons] Your logos or icons, cycled across the pack. Each one is rendered inside a square slot and scaled to fit, so inline SVG, an `<img>` or a whole component all work. Omit it to get the built-in placeholder mark.
 * @property {string[]} [tints=[]] Colours applied as CSS `color` to each slot, picked per icon. Monochrome marks drawn with `currentColor` pick this up; leave it empty to keep your artwork's own colours. Ignored by the built-in mark, which carries its own palette ladder.
 * @property {number} [count=150] How many icons make up the pack.
 * @property {number} [seed=1] Reshuffles the layout, sizes, entry bearings and drift. Same seed renders the same pack on server and client.
 * @property {'diamond' | 'rect'} [layout='diamond'] Pack silhouette. `diamond` is the rotated square with corners up/down/left/right; `rect` fills the container edge to edge.
 * @property {number} [spreadX=0.47] Half-width of the pack, as a fraction of the container. Raise it to stretch the shape horizontally.
 * @property {number} [spreadY=0.47] Half-height of the pack, as a fraction of the container.
 * @property {number} [minIconSize=0.024] Smallest icon, as a fraction of the container width.
 * @property {number} [maxIconSize=0.072] Largest icon, as a fraction of the container width.
 * @property {number} [magnetRadius=0.42] How far the cursor's pull reaches, as a fraction of the container.
 * @property {number} [magnetStrength=0.18] Peak displacement for an icon directly under the cursor, as a fraction of the container.
 * @property {number} [curl=0.3] Mixes in a push perpendicular to the pull, giving the field a swirl instead of a straight-line tug. 0 is a pure radial magnet.
 * @property {number} [drift=1] Multiplier on the idle floating motion. 0 holds the pack perfectly still once it lands.
 * @property {number} [entryStagger=0.012] Seconds between each icon launching, so the pack converges in a wave rather than all at once.
 * @property {boolean} [autoDemo=true] Runs one scripted cursor sweep across the pack after the entry settles, so a visitor who never moves their mouse still sees the magnetic interaction. Cancels the moment they move it themselves.
 * @property {string} [ariaLabel='A drifting cluster of logo marks'] Label for the cluster, which is exposed as a single decorative image to assistive tech.
 * @property {string} [className] Extra classes merged onto the outermost root element.
 */
export type MagneticLogoClusterProps = {
  icons?: ReactNode[]
  tints?: string[]
  count?: number
  seed?: number
  layout?: 'diamond' | 'rect'
  spreadX?: number
  spreadY?: number
  minIconSize?: number
  maxIconSize?: number
  magnetRadius?: number
  magnetStrength?: number
  curl?: number
  drift?: number
  entryStagger?: number
  autoDemo?: boolean
  ariaLabel?: string
  className?: string
}

export default function MagneticLogoCluster({
  icons,
  tints = [],
  count = 150,
  seed = 1,
  layout = 'diamond',
  spreadX = 0.47,
  spreadY = 0.47,
  minIconSize = 0.024,
  maxIconSize = 0.072,
  magnetRadius = 0.42,
  magnetStrength = 0.18,
  curl = 0.3,
  drift = 1,
  entryStagger = 0.012,
  autoDemo = true,
  ariaLabel = 'A drifting cluster of logo marks',
  className = '',
}: MagneticLogoClusterProps) {
  const reduceMotion = useReducedMotion() ?? false
  // Namespaces the gradient ids so two clusters on one page never collide.
  const uid = useId().replace(/:/g, '')
  const iconCount = icons?.length ?? 0

  // Compared by value, not identity, so a caller passing a fresh array
  // literal on every render doesn't rebuild the whole pack.
  const tintsKey = tints.join('|')

  const items = useMemo(
    () =>
      buildCluster({
        count,
        seed,
        layout,
        spreadX,
        spreadY,
        minIconSize,
        maxIconSize,
        drift,
        entryStagger,
        iconCount,
        tints,
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
      count,
      seed,
      layout,
      spreadX,
      spreadY,
      minIconSize,
      maxIconSize,
      drift,
      entryStagger,
      iconCount,
      tintsKey,
    ],
  )

  const clusterRef = useRef<HTMLDivElement | null>(null)
  const [size, setSize] = useState(0)
  // Once the visitor drives the cursor themselves, the scripted demo stops.
  const interactedRef = useRef(false)
  // The demo is a one-time introduction. Without this it would replay every
  // time the container is re-measured, and on mobile the URL bar collapsing
  // does exactly that.
  const demoPlayedRef = useRef(false)

  const mouseX = useMotionValue(PARKED)
  const mouseY = useMotionValue(PARKED)

  useEffect(() => {
    const el = clusterRef.current
    if (!el) return
    const ro = new ResizeObserver((entries) => {
      setSize(entries[0]?.contentRect.width ?? 0)
    })
    ro.observe(el)
    return () => ro.disconnect()
  }, [])

  // Pointer is tracked on the whole surface, not just the pack, so icons
  // start reaching before the cursor arrives. Coordinates are relative to
  // the pack's centre, which is where the rest points are measured from.
  function handlePointer(e: React.PointerEvent<HTMLDivElement>) {
    if (reduceMotion || !clusterRef.current) return
    interactedRef.current = true
    const rect = clusterRef.current.getBoundingClientRect()
    mouseX.set(e.clientX - rect.left - rect.width / 2)
    mouseY.set(e.clientY - rect.top - rect.height / 2)
  }
  function handlePointerLeave() {
    mouseX.set(PARKED)
    mouseY.set(PARKED)
  }

  // One scripted "ghost cursor" pass right after the entry settles: the same
  // motion values are animated along an arc from the left edge, through the
  // centre, out past the right edge. Icons reach for the invisible cursor and
  // trail behind it, showing the interaction to someone who never touches the
  // page. Skipped for reduced motion, and abandoned on first real input.
  useEffect(() => {
    if (!autoDemo || reduceMotion || size <= 0 || demoPlayedRef.current) return

    const entryDoneMs = count * entryStagger * 1000 + 900 // stagger + spring settle
    const startDelay = entryDoneMs + 400
    const sweepDuration = 1500
    const pauseAfter = 400

    let cancelled = false
    let rafId = 0
    let parkTimer = 0

    const startTimer = window.setTimeout(() => {
      if (cancelled || interactedRef.current) return
      demoPlayedRef.current = true
      const startedAt = performance.now()

      const tick = () => {
        if (cancelled || interactedRef.current) {
          mouseX.set(PARKED)
          mouseY.set(PARKED)
          return
        }
        const t = Math.min(1, (performance.now() - startedAt) / sweepDuration)
        // Ease in/out so the ghost cursor doesn't snap into motion.
        const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2
        // Ends past the right edge, so the trailing icons spill toward
        // whatever copy sits beside the pack.
        const startX = -size * 0.45
        const endX = size * 0.65
        mouseX.set(startX + (endX - startX) * eased)
        // A gentle sine makes the path a soft arc rather than a flat line.
        mouseY.set(Math.sin(eased * Math.PI) * size * -0.08)
        if (t < 1) {
          rafId = requestAnimationFrame(tick)
        } else {
          // Hold briefly, then park far away so the springs return to rest.
          parkTimer = window.setTimeout(() => {
            if (cancelled) return
            mouseX.set(PARKED)
            mouseY.set(PARKED)
          }, pauseAfter)
        }
      }
      rafId = requestAnimationFrame(tick)
    }, startDelay)

    return () => {
      cancelled = true
      window.clearTimeout(startTimer)
      window.clearTimeout(parkTimer)
      cancelAnimationFrame(rafId)
    }
  }, [autoDemo, size, count, entryStagger, reduceMotion, mouseX, mouseY])

  return (
    <div
      onPointerMove={handlePointer}
      onPointerLeave={handlePointerLeave}
      className={`relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#EFEFEA] dark:bg-[#0E0E0F] ${className}`}
      // pan-y, not none: the pack still tracks a finger dragging across it,
      // but the page underneath can always be scrolled away from.
      style={{ touchAction: 'pan-y' }}
    >
      <style dangerouslySetInnerHTML={{ __html: CLUSTER_CSS }} />
      <GradientDefs uid={uid} />
      <div
        ref={clusterRef}
        role='img'
        aria-label={ariaLabel}
        className='relative aspect-square'
        style={{ width: 'min(86vw, 78vh, 640px)' }}
      >
        {size > 0 &&
          items.map((item) => (
            <ClusterIcon
              key={item.id}
              item={item}
              size={size}
              mouseX={mouseX}
              mouseY={mouseY}
              reduceMotion={reduceMotion}
              magnetRadius={magnetRadius}
              magnetStrength={magnetStrength}
              curl={curl}
              uid={uid}
            >
              {icons?.[item.iconIndex]}
            </ClusterIcon>
          ))}
      </div>
    </div>
  )
}

```

---

## Magnetic Dots

Category: Backgrounds
Slug: `magnetic-dots`
URL: https://aicanvas.me/components/magnetic-dots

An interactive dot background. A dense grid of dots is magnetically pulled toward your cursor, snapping back with an elastic bounce.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/magnetic-dots
```

```tsx
'use client'

/**
 * Renders a canvas field of dots connected to spring-based positions.
 * Pointer movement pulls nearby dots before they glide back into the grid.
 */
import { useEffect, useRef } from 'react'


// tune: raise to spread the dots farther apart
const SPACING      = 22      
// tune: raise to enlarge each dot
const DOT_RADIUS   = 1.5     
// tune: raise to widen the magnetic field
const INFLUENCE_R  = 180     
// tune: raise to quicken the return to the grid
const SPRING_K     = 0.055   
// tune: raise to reduce velocity more quickly
const DAMPING      = 0.11    
// tune: raise to strengthen the pointer pull
const MAG_STRENGTH = 16      
// tune: raise to quicken hover transitions
const LERP_FACTOR  = 0.06    
// tune: raise to quicken pointer tracking
const MOUSE_LERP   = 0.14    


type Dot = {
  restX: number
  restY: number
  x: number
  y: number
  vx: number
  vy: number
}


export default function MagneticDots() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const hoverStrRef  = useRef(0)
  const isDarkRef    = useRef(true)
  const bgRef        = useRef('#110F0C')

  
  useEffect(() => {
    const el = containerRef.current
    if (!el) return

    const apply = (dark: boolean) => {
      isDarkRef.current = dark
      bgRef.current = dark ? '#110F0C' : '#F5F1EA'
      if (containerRef.current) {
        containerRef.current.style.background = bgRef.current
      }
    }

    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      apply(dark)
    }

    check()

    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) {
      observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    }

    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    let dots: Dot[] = []
    let animId  = 0
    let alive   = true
    let cw      = 0
    let ch      = 0
    let dpr     = 1
    
    let smoothMx = -99999
    let smoothMy = -99999

    function build() {
      if (!canvas) return
      dpr = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return

      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)

      
      const cols = Math.ceil(cw / SPACING) + 1
      const rows = Math.ceil(ch / SPACING) + 1
      const ox   = ((cw % SPACING) / 2)
      const oy   = ((ch % SPACING) / 2)

      
      const prev = new Map<string, Dot>()
      for (const d of dots) {
        prev.set(`${d.restX},${d.restY}`, d)
      }

      dots = []
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const rx = ox + c * SPACING
          const ry = oy + r * SPACING
          const key = `${rx},${ry}`
          if (prev.has(key)) {
            dots.push(prev.get(key)!)
          } else {
            dots.push({ restX: rx, restY: ry, x: rx, y: ry, vx: 0, vy: 0 })
          }
        }
      }
    }

    function frame() {
      if (!alive || !ctx) return

      
      const hasPointer = mouseRef.current !== null
      const targetStr  = hasPointer ? 1 : 0
      hoverStrRef.current += (targetStr - hoverStrRef.current) * LERP_FACTOR

      const hStr = hoverStrRef.current
      const raw  = mouseRef.current
      if (raw) {
        
        if (smoothMx === -99999) { smoothMx = raw.x; smoothMy = raw.y }
        smoothMx += (raw.x - smoothMx) * MOUSE_LERP
        smoothMy += (raw.y - smoothMy) * MOUSE_LERP
      } else {
        smoothMx = -99999
        smoothMy = -99999
      }
      const mx = smoothMx
      const my = smoothMy
      const r2 = INFLUENCE_R * INFLUENCE_R

      ctx.clearRect(0, 0, cw, ch)

      const dotColor = isDarkRef.current
        ? 'rgba(255,255,255,0.5)'
        : 'rgba(28,25,22,0.4)'

      ctx.fillStyle = dotColor

      for (const d of dots) {
        
        if (hStr > 0.001) {
          const dx   = d.x - mx
          const dy   = d.y - my
          const dist2 = dx * dx + dy * dy

          if (dist2 < r2 && dist2 > 0.01) {
            const dist  = Math.sqrt(dist2)
            
            const t     = 1 - dist / INFLUENCE_R
            const force = t * t * MAG_STRENGTH * hStr
            
            d.vx += (-dx / dist) * force
            d.vy += (-dy / dist) * force
          }
        }

        
        d.vx += (d.restX - d.x) * SPRING_K
        d.vy += (d.restY - d.y) * SPRING_K

        
        d.vx *= (1 - DAMPING)
        d.vy *= (1 - DAMPING)

        
        d.x += d.vx
        d.y += d.vy

        
        ctx.beginPath()
        ctx.arc(d.x, d.y, DOT_RADIUS, 0, Math.PI * 2)
        ctx.fill()
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    if (canvas.parentElement) ro.observe(canvas.parentElement)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  
  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: '#110F0C' }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => {
        const t = e.touches[0]
        if (t) updateMouse(t.clientX, t.clientY)
      }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
    </div>
  )
}

```

---

## Wireframe Globe

Category: Backgrounds
Slug: `sphere-lines`
URL: https://aicanvas.me/components/sphere-lines

An animated wireframe globe background. A narrow wave band drifts slowly across the surface, and hovering ripples the lines under your cursor.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/sphere-lines
```

```tsx
'use client'

/**
 * Renders a rotating canvas sphere from layered latitude lines.
 * Pointer engagement accelerates the waves and distorts nearby line segments.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



// tune: raise to add more latitude lines
const N_LATS      = 42      
// tune: raise to smooth each latitude line
const N_STEPS     = 240     
// tune: raise to increase wave displacement
const WAVE_PHI    = 0.28    
const WAVE_FREQ_T = 2.0     
const WAVE_FREQ_P = 1.8     
// tune: raise to speed idle wave motion
const WAVE_SPEED_IDLE  = 0.003   
// tune: raise to speed engaged wave motion
const WAVE_SPEED_HOVER = 0.012   
const ROT_SPEED_IDLE   = 0.003   
const ROT_SPEED_HOVER  = 0.012   
const BACK_A      = 0.05    
const ALPHA_MIN   = 0.12    
const ALPHA_MAX   = 0.40    
const LW_MIN      = 0.35    
const LW_MAX      = 0.90    
const BAND_SIGMA  = 0.35    
const BAND_FREQ   = 2.5     
// tune: raise to widen local pointer distortion
const HOVER_RADIUS = 90     
// tune: raise to strengthen local pointer distortion
const HOVER_AMP    = 0.45   
const TWO_PI      = Math.PI * 2

export default function SphereLines() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx    = canvas.getContext('2d')!

    let cw = 0, ch = 0
    let animId   = 0
    let alive    = true
    let t        = 0
    let rot      = 0
    let hoverStr = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }

    
    const xs = new Float32Array(N_STEPS + 1)
    const ys = new Float32Array(N_STEPS + 1)
    const zs = new Float32Array(N_STEPS + 1)

    function frame() {
      if (!alive) return
      const hasHover = mouseRef.current !== null
      hoverStr += ((hasHover ? 1 : 0) - hoverStr) * (hasHover ? 0.025 : 0.015)

      t   += WAVE_SPEED_IDLE + hoverStr * (WAVE_SPEED_HOVER - WAVE_SPEED_IDLE)
      rot += ROT_SPEED_IDLE  + hoverStr * (ROT_SPEED_HOVER  - ROT_SPEED_IDLE)

      ctx.clearRect(0, 0, cw, ch)

      const R          = Math.min(cw, ch) * 0.42
      const cx         = cw / 2
      const cy         = ch / 2
      const mouse      = mouseRef.current
      
      const bandCenter = Math.sin(t * BAND_FREQ) * (Math.PI * 0.4)
      const dotRGB     = isDarkRef.current ? '255,255,255' : '28,25,22'

      
      ctx.save()
      ctx.beginPath()
      ctx.arc(cx, cy, R, 0, Math.PI * 2)
      ctx.clip()

      for (let i = 0; i < N_LATS; i++) {
        const phi  = -Math.PI / 2 + (i + 1) * Math.PI / (N_LATS + 1)

        
        const depth = Math.cos(phi)
        const lineA = ALPHA_MIN + depth * (ALPHA_MAX - ALPHA_MIN)
        const lw    = LW_MIN + depth * (LW_MAX - LW_MIN)

        
        const dist    = phi - bandCenter
        const autoEnv = Math.exp(-(dist * dist) / (2 * BAND_SIGMA * BAND_SIGMA))
        const autoAmp = WAVE_PHI * autoEnv

        
        for (let j = 0; j <= N_STEPS; j++) {
          const theta = j * 2 * Math.PI / N_STEPS
          const tR    = theta + rot

          
          const autoDPhi = autoAmp * (
            Math.sin(tR * WAVE_FREQ_T + phi * WAVE_FREQ_P + t) +
            0.45 * Math.sin(tR * WAVE_FREQ_T * 1.7 + phi * WAVE_FREQ_P * 1.3 + t * 1.4)
          )

          
          
          let localDPhi = 0
          if (mouse && hoverStr > 0.01) {
            const sx = cx + R * Math.cos(phi) * Math.cos(tR)
            const sy = cy - R * Math.sin(phi)
            const dx = sx - mouse.x
            const dy = sy - mouse.y
            const localEnv = Math.exp(-(dx * dx + dy * dy) / (HOVER_RADIUS * HOVER_RADIUS))
            localDPhi = HOVER_AMP * localEnv * hoverStr *
              Math.sin(tR * 3 + phi * 2 + t * 6)
          }

          const phiD = phi + autoDPhi + localDPhi
          xs[j] = cx + R * Math.cos(phiD) * Math.cos(tR)
          ys[j] = cy - R * Math.sin(phiD)
        }

        
        ctx.strokeStyle = `rgba(${dotRGB},${BACK_A})`
        ctx.lineWidth   = 0.4
        ctx.beginPath()
        {
          const mx0 = (xs[N_STEPS - 1] + xs[0]) / 2
          const my0 = (ys[N_STEPS - 1] + ys[0]) / 2
          ctx.moveTo(mx0, my0)
          for (let j = 0; j < N_STEPS; j++) {
            const nx  = j + 1 < N_STEPS ? xs[j + 1] : xs[0]
            const ny  = j + 1 < N_STEPS ? ys[j + 1] : ys[0]
            const mx2 = (xs[j] + nx) / 2
            const my2 = (ys[j] + ny) / 2
            ctx.quadraticCurveTo(xs[j], ys[j], mx2, my2)
          }
          ctx.closePath()
          ctx.stroke()
        }

        
        
        
        let startJ = 0
        for (let j = 0; j < N_STEPS; j++) {
          if (Math.sin(j * TWO_PI / N_STEPS + rot) < 0) { startJ = j; break }
        }

        ctx.strokeStyle = `rgba(${dotRGB},${lineA.toFixed(3)})`
        ctx.lineWidth   = lw
        ctx.beginPath()
        let inFront = false
        let prevX   = 0
        let prevY   = 0
        for (let jj = 0; jj <= N_STEPS; jj++) {
          const j       = (startJ + jj) % N_STEPS
          const isFront = Math.sin(j * TWO_PI / N_STEPS + rot) >= 0
          const x = xs[j], y = ys[j]
          if (isFront) {
            if (!inFront) {
              ctx.moveTo(x, y)
              inFront = true
            } else {
              ctx.quadraticCurveTo(prevX, prevY, (prevX + x) / 2, (prevY + y) / 2)
            }
            prevX = x; prevY = y
          } else if (inFront) {
            ctx.lineTo(prevX, prevY)
            inFront = false
          }
        }
        if (inFront) ctx.lineTo(prevX, prevY)
        ctx.stroke()
      }

      ctx.restore()
      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg = isDark ? '#110F0C' : '#F5F1EA'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t2 = e.touches[0]; if (t2) updateMouse(t2.clientX, t2.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas ref={canvasRef} className="absolute inset-0" style={{ width: '100%', height: '100%' }} />
    </div>
  )
}

```

---

## Polaroid Stack

Category: Cards & Modals
Slug: `polaroid-stack`
URL: https://aicanvas.me/components/polaroid-stack

Five polaroid photo cards stacked in a casual pile. Click to fan them out in a spring-animated arc, hover to lift, click a card to spotlight it.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/polaroid-stack
```

```tsx
'use client'

// npm install framer-motion
/**
 * Presents a responsive stack of labeled polaroid cards.
 * Selecting a card brings it forward and rearranges the remaining stack.
 */

import { useState, useEffect, useLayoutEffect, useRef } from 'react'
import { motion } from 'framer-motion'

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



interface CardData {
  id: number
  label: string
  from: string
  to: string
}

interface Pos {
  x: number
  y: number
  rotate: number
}



// tune: change both dimensions to resize the polaroids
const CARD_W = 110
const CARD_H = 140




const STAGE_W = 2 * (160 + CARD_W / 2) + 32 
const STAGE_H = 220

// customize: replace the card labels and colors below
const CARDS: CardData[] = [
  { id: 0, label: 'Sunset', from: '#FF6B6B', to: '#FF8E53' },
  { id: 1, label: 'Ocean',  from: '#14B8A6', to: '#67E8F9' },
  { id: 2, label: 'Dream',  from: '#8B5CF6', to: '#C4B5FD' },
  { id: 3, label: 'Golden', from: '#F59E0B', to: '#FDE68A' },
  { id: 4, label: 'Mist',   from: '#64748B', to: '#CBD5E1' },
]


// tune: adjust these positions to change the stacked and fanned layouts
const STACKED: Pos[] = [
  { x: -6, y:  2, rotate: -12 },
  { x:  3, y: -4, rotate:  -5 },
  { x:  1, y:  1, rotate:   2 },
  { x: -4, y:  3, rotate:   8 },
  { x:  5, y: -2, rotate:  14 },
]


const FANNED: Pos[] = [
  { x: -160, y: 30, rotate: -22 },
  { x:  -80, y:  8, rotate: -11 },
  { x:    0, y: -4, rotate:   0 },
  { x:   80, y:  8, rotate:  11 },
  { x:  160, y: 30, rotate:  22 },
]



export default function PolaroidStack() {
  const [fanned, setFanned] = useState(false)
  const [hoveredId, setHoveredId] = useState<number | null>(null)
  const [selectedId, setSelectedId] = useState<number | null>(null)

  
  
  const rootRef = useRef<HTMLDivElement>(null)
  const [scale, setScale] = useState(1)

  useIsomorphicLayoutEffect(() => {
    const el = rootRef.current
    if (!el) return
    const update = () => {
      const next = Math.min(1, el.clientWidth / STAGE_W)
      setScale(Number.isFinite(next) && next > 0 ? next : 1)
    }
    update()
    const ro = new ResizeObserver(update)
    ro.observe(el)
    return () => ro.disconnect()
  }, [])

  const toggle = () => {
    setFanned((f) => !f)
    setHoveredId(null)
    setSelectedId(null)
  }

  return (
    <div
      ref={rootRef}
      className="relative flex min-h-screen w-full cursor-pointer select-none items-center justify-center overflow-hidden bg-zinc-950"
      onClick={toggle}
    >
      {}
      <style>{`@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');`}</style>
        {}
        <motion.div
          className="relative"
          animate={{ scale }}
          transition={{ type: 'spring', stiffness: 280, damping: 30 }}
          style={{ width: STAGE_W, height: STAGE_H }}
        >
          {CARDS.map((card, i) => {
            const pos = fanned ? FANNED[i] : STACKED[i]
            const isHovered = fanned && hoveredId === card.id && selectedId !== card.id
            const isSelected = fanned && selectedId === card.id

            return (
              
              <motion.div
                key={card.id}
                className="absolute left-1/2 top-1/2"
                animate={{
                  x: pos.x - CARD_W / 2,
                  y: pos.y - CARD_H / 2,
                  rotate: isSelected ? 0 : pos.rotate,
                }}
                style={{ zIndex: isSelected ? 30 : isHovered ? 20 : i }}
                transition={{
                  type: 'spring',
                  stiffness: 280,
                  damping: 22,
                  
                  delay: fanned
                    ? i * 0.06
                    : (CARDS.length - 1 - i) * 0.05,
                }}
              >
                {}
                <motion.div
                  animate={{
                    y: isSelected ? -28 : isHovered ? -18 : 0,
                    scale: isSelected ? 1.4 : isHovered ? 1.1 : 1,
                  }}
                  transition={{ type: 'spring', stiffness: 420, damping: 26 }}
                  style={{ cursor: fanned ? 'pointer' : 'inherit' }}
                  onHoverStart={() => { if (fanned) setHoveredId(card.id) }}
                  onHoverEnd={() => setHoveredId(null)}
                  onClick={(e) => {
                    if (!fanned) return
                    e.stopPropagation()
                    setSelectedId((id) => (id === card.id ? null : card.id))
                    setHoveredId(null)
                  }}
                >
                  {}
                  <div
                    style={{
                      width: CARD_W,
                      height: CARD_H,
                      backgroundColor: '#ffffff',
                      borderRadius: 2,
                      display: 'flex',
                      flexDirection: 'column',
                      padding: '8px 8px 0 8px',
                      boxShadow: isSelected
                        ? '0 32px 64px rgba(0,0,0,0.7), 0 12px 24px rgba(0,0,0,0.4)'
                        : isHovered
                          ? '0 20px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.3)'
                          : '0 4px 20px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.15)',
                      transition: 'box-shadow 0.25s ease',
                    }}
                  >
                    {}
                    <div
                      style={{
                        flexShrink: 0,
                        height: 93,
                        background: `linear-gradient(135deg, ${card.from}, ${card.to})`,
                      }}
                    />

                    {}
                    <div
                      style={{
                        flex: 1,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <p
                        style={{
                          fontFamily: "'Caveat', cursive",
                          fontSize: 16,
                          fontWeight: 600,
                          color: '#3f3f46',
                          margin: 0,
                          lineHeight: 1,
                        }}
                      >
                        {card.label}
                      </p>
                    </div>
                  </div>
                </motion.div>
              </motion.div>
            )
          })}
        </motion.div>

        {}
        <motion.p
          key={`${String(fanned)}-${String(selectedId !== null)}`}
          initial={{ opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="absolute bottom-6 text-xs text-zinc-500"
          style={{
            pointerEvents: 'none',
            fontFamily: 'var(--font-sans, sans-serif)',
            letterSpacing: '0.03em',
          }}
        >
          {!fanned
            ? 'click to fan out'
            : selectedId !== null
              ? 'click card again to deselect'
              : 'click a card · click bg to stack'}
        </motion.p>
    </div>
  )
}

```

---

## Particle Sphere

Category: Backgrounds
Slug: `particle-sphere`
URL: https://aicanvas.me/components/particle-sphere

A 3D particle background built with Three.js. 9,000 particles sit on a slowly spinning sphere in warm gold and cool silver.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/particle-sphere
```

```tsx
'use client'

// npm install three
/**
 * Renders a shaded particle sphere with a Three.js point cloud.
 * Pointer movement rotates the sphere while its particles continue drifting.
 */

import { useEffect, useRef } from 'react'
import * as THREE from 'three'

// tune: raise to increase sphere density
const PARTICLE_COUNT = 9000


function makeSprite(): THREE.CanvasTexture {
  const size = 64
  const canvas = document.createElement('canvas')
  canvas.width = canvas.height = size
  const ctx = canvas.getContext('2d')!
  const half = size / 2
  const grad = ctx.createRadialGradient(half, half, 0, half, half, half)
  grad.addColorStop(0.00, 'rgba(255,255,255,1.00)')
  grad.addColorStop(0.20, 'rgba(255,255,255,0.80)')
  grad.addColorStop(0.55, 'rgba(255,255,255,0.25)')
  grad.addColorStop(1.00, 'rgba(255,255,255,0.00)')
  ctx.fillStyle = grad
  ctx.fillRect(0, 0, size, size)
  return new THREE.CanvasTexture(canvas)
}


function colorFromY(ny: number): [number, number, number] {
  if (ny >= 0) {
    return [1.0, 0.55 + ny * 0.37, 0.02 + ny * 0.63]
  } else {
    const d = -ny
    const v = 0.38 + d * 0.62
    return [v, v, v + (1 - d) * 0.07]
  }
}

export default function ParticleSphere() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const W = container.clientWidth  || 500
    const H = container.clientHeight || 500

    const scene    = new THREE.Scene()
    const camera   = new THREE.PerspectiveCamera(52, W / H, 0.1, 100)
    camera.position.z = 2.9

    // Throws outright when the browser cannot hand back a WebGL context:
    // hardware acceleration switched off, an older or virtualised machine, or
    // too many live contexts on one page. Thrown from inside an effect it takes
    // the surrounding page down with it, so an empty frame is the better
    // failure.
    let renderer: THREE.WebGLRenderer
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true })
    } catch {
      return
    }
    renderer.setSize(W, H)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.setClearColor(0x000000)
    container.appendChild(renderer.domElement)

    const positions = new Float32Array(PARTICLE_COUNT * 3)
    const colors    = new Float32Array(PARTICLE_COUNT * 3)

    for (let i = 0; i < PARTICLE_COUNT; i++) {
      const theta = Math.acos(2 * Math.random() - 1)
      const phi   = 2 * Math.PI * Math.random()
      const r = 1.0 + (Math.random() - 0.5) * 0.14

      const x = r * Math.sin(theta) * Math.cos(phi)
      const y = r * Math.cos(theta)
      const z = r * Math.sin(theta) * Math.sin(phi)

      positions[i * 3]     = x
      positions[i * 3 + 1] = y
      positions[i * 3 + 2] = z

      const ny          = Math.max(-1, Math.min(1, y / r))
      const [cr, cg, cb] = colorFromY(ny)
      colors[i * 3]     = cr
      colors[i * 3 + 1] = cg
      colors[i * 3 + 2] = cb
    }

    const geo = new THREE.BufferGeometry()
    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3))
    geo.setAttribute('color',    new THREE.BufferAttribute(colors,    3))

    const sprite  = makeSprite()
    const mat     = new THREE.PointsMaterial({
      size:         0.032,
      map:          sprite,
      vertexColors: true,
      transparent:  true,
      depthWrite:   false,
      blending:     THREE.AdditiveBlending,
    })

    const mesh = new THREE.Points(geo, mat)
    mesh.rotation.x = 0.28
    mesh.rotation.z = 0.08
    scene.add(mesh)

    let raf: number
    let t = 0

    function tick() {
      raf = requestAnimationFrame(tick)
      t += 0.004
      mesh.rotation.y = t
      mesh.rotation.z = 0.08 + Math.sin(t * 0.4) * 0.04
      renderer.render(scene, camera)
    }
    tick()

    return () => {
      cancelAnimationFrame(raf)
      geo.dispose()
      mat.dispose()
      sprite.dispose()
      // Hand the GPU context back explicitly: dispose() frees the scene but
      // leaves the context alive, and a browser grants only about sixteen per
      // page, so remounting a few times exhausts them.
      try {
        renderer.forceContextLoss()
      } catch {}
      renderer.dispose()
      if (container.contains(renderer.domElement)) {
        container.removeChild(renderer.domElement)
      }
    }
  }, [])

  return <div ref={containerRef} className="h-full w-full" />
}

```

---

## Text Blur Reveal

Category: Typography
Slug: `text-blur-reveal`
URL: https://aicanvas.me/components/text-blur-reveal

Words animate into view one by one with a satisfying blur-to-sharp entrance, auto-replaying in a loop.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/text-blur-reveal
```

```tsx
'use client'

// npm install framer-motion
/**
 * Reveals a short sentence through staggered blur and position transitions.
 * The call-to-action appears after the final word finishes animating.
 */

import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

// customize: replace the sentence and accented word indexes below
const WORDS = ['Craft', 'interfaces', 'that', 'feel', 'like', 'magic.']
const ACCENTED = new Set([1, 5]) 


// tune: raise to increase the delay between words
const STAGGER = 100
// tune: raise to slow each word reveal
const DURATION = 650
const LAST_WORD_END = (WORDS.length - 1) * STAGGER + DURATION 
const SHOW_BUTTON_AT = LAST_WORD_END + 150                     

export default function TextBlurReveal() {
  const [showCTA, setShowCTA] = useState(false)

  useEffect(() => {
    const t = setTimeout(() => setShowCTA(true), SHOW_BUTTON_AT)
    return () => clearTimeout(t)
  }, [])

  return (
    <div className="relative flex min-h-screen w-full flex-col items-center justify-center gap-5 overflow-hidden">

      {}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)',
          backgroundSize: '24px 24px',
        }}
      />

      {}
      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
        <div className="h-40 w-80 rounded-full bg-indigo-600/20 blur-3xl" />
      </div>

      {}
      <div className="relative flex flex-wrap justify-center gap-x-[0.4em] gap-y-1">
        {WORDS.map((word, i) => (
          <motion.span
            key={i}
            initial={{ opacity: 0, y: 22, filter: 'blur(14px)' }}
            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
            transition={{
              duration: DURATION / 1000,
              delay: (i * STAGGER) / 1000,
              ease: [0.21, 0.47, 0.32, 0.98],
            }}
            className={
              ACCENTED.has(i)
                ? 'bg-gradient-to-r from-violet-400 to-indigo-400 bg-clip-text text-4xl tracking-tight text-transparent'
                : 'text-4xl tracking-tight text-white'
            }
            style={{ fontFamily: 'var(--font-geist-pixel-circle)' }}
          >
            {word}
          </motion.span>
        ))}
      </div>

      {}
      <motion.p
        key="sub"
        initial={{ opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          duration: 0.55,
          delay: ((WORDS.length - 1) * STAGGER + 200) / 1000,
          ease: 'easeOut',
        }}
        className="relative text-base text-zinc-400"
      >
        Drop any phrase. Works with any text.
      </motion.p>

      {}
      <div className="flex h-10 items-center justify-center">
      <AnimatePresence>
        {showCTA && (
          <motion.button
            initial={{ opacity: 0, y: 6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 6 }}
            transition={{ duration: 0.35, ease: 'easeOut' }}
            whileHover={{ scale: 1.04 }}
            whileTap={{ scale: 0.97 }}
            className="relative rounded-full bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/30 transition-opacity hover:opacity-90"
          >
            Start building
          </motion.button>
        )}
      </AnimatePresence>
      </div>

    </div>
  )
}

```

---

## Travel Deck

Category: Cards & Modals
Slug: `traveldeck`
URL: https://aicanvas.me/components/traveldeck

A swipeable deck of destination cards. Drag the front card down to fling it off-screen and reveal the next. Each card reveals an animated hotels counter as it comes forward.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/traveldeck
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a stacked set of travel cards with animated hotel counts.
 * Dragging the front card downward sends it behind the deck.
 */

import { useRef, useState, useLayoutEffect, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Buildings, ArrowUpRight } from '@phosphor-icons/react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


const CARD_W = 280
const CARD_H = 200

const CARDS = [
  { title: 'Maafushi',   sub: 'Crystal waters',    img: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=520&q=80&fit=crop&crop=center', country: 'Maldives',    hotels: 120 },
  { title: 'Swiss Alps', sub: 'Powder & peaks',    img: 'https://images.unsplash.com/photo-1491555103944-7c647fd857e6?w=520&q=80&fit=crop&crop=center', country: 'Switzerland', hotels: 87  },
  { title: 'Bali',       sub: 'Sun-soaked shores', img: 'https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?w=520&q=80&fit=crop&crop=center', country: 'Indonesia',   hotels: 250 },
] as const

// tune: adjust offsets and rotation to change the deck spread
const POSITIONS = [
  { x:  12, y: -32, rotate:  6, zIndex: 1, opacity: 1.00 },
  { x:   6, y: -18, rotate:  4, zIndex: 2, opacity: 1.00 },
  { x:   0, y:   0, rotate:  0, zIndex: 3, opacity: 1.00 },
] as const

function useCountUp(target: number, active: boolean) {
  const [value, setValue] = useState(0)
  useIsomorphicLayoutEffect(() => {
    if (!active) { setValue(0); return }
    const duration = 900
    const steps = 40
    const interval = duration / steps
    let step = 0
    const id = setInterval(() => {
      step++
      setValue(Math.round((step / steps) * target))
      if (step >= steps) clearInterval(id)
    }, interval)
    return () => clearInterval(id)
  }, [active, target])
  return value
}

function HotelsCounter({ target, active }: { target: number; active: boolean }) {
  const value = useCountUp(target, active)
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 5,
    }}>
      <Buildings weight="regular" size={16} style={{ color: '#E8E8DF', opacity: 0.55 }} />
      <span style={{
        fontSize: 10,
        fontWeight: 500,
        color: 'rgba(255,255,255,0.55)',
        letterSpacing: '0.04em',
        fontVariantNumeric: 'tabular-nums',
      }}>
        hotels <span style={{ color: 'rgba(255,255,255,0.85)', marginLeft: 2 }}>{value}</span>
      </span>
    </div>
  )
}

export default function FloatingCards() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [order, setOrder] = useState<[number, number, number]>([0, 1, 2])
  const [isShuffling, setIsShuffling] = useState(false)
  const [exitingCard, setExitingCard] = useState<number | null>(null)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])


  return (
    <div
      ref={containerRef}
      className="relative flex min-h-screen w-full items-center justify-center overflow-hidden"
      style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}
    >
      {}
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `radial-gradient(circle, ${isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.07)'} 1px, transparent 1px)`,
          backgroundSize: '24px 24px',
        }}
      />


      {}
      <div style={{ position: 'relative', width: CARD_W, height: CARD_H }}>
        {CARDS.map((card, i) => {
          const posIndex = order.indexOf(i)
          const pos = POSITIONS[posIndex]
          const isFront = posIndex === 2
          const isExiting = exitingCard === i
          return (
            <motion.div
              key={i}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: CARD_W,
                height: CARD_H,
                cursor: isFront ? 'grab' : 'default',
                borderRadius: 16,
                background: '#2A2825',
                border: '1px solid rgba(255,255,255,0.10)',
                boxShadow: isDark
                  ? '8px -8px 24px rgba(0,0,0,0.35)'
                  : '8px -8px 24px rgba(0,0,0,0.15)',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                overflow: 'hidden',
                padding: 0,
              }}
              drag={isFront && !isShuffling ? 'y' : false}
              dragConstraints={{ top: 0, bottom: 0 }}
              dragElastic={{ top: 0, bottom: 0.6 }}
              dragMomentum={false}
              onDragEnd={(_e, info) => {
                if (!isFront || isShuffling) return
                if (info.offset.y > 80 || info.velocity.y > 400) {
                  setIsShuffling(true)
                  setExitingCard(i)
                }
              }}
              animate={isExiting
                ? { y: 600, rotate: 8, opacity: 0 }
                : { x: pos.x, y: pos.y, rotate: pos.rotate, zIndex: pos.zIndex, opacity: pos.opacity }
              }
              transition={isExiting
                ? { duration: 0.45, ease: 'easeIn' }
                : { type: 'spring', stiffness: 80, damping: 16 }
              }
              onAnimationComplete={() => {
                if (isExiting) {
                  setExitingCard(null)
                  setOrder(prev => [prev[2], prev[0], prev[1]])
                  setTimeout(() => setIsShuffling(false), 400)
                }
              }}
            >
              {}
              <div style={{
                padding: '10px 10px 0',
                display: 'flex',
                flexDirection: 'column',
                gap: 8,
                flex: '0 0 auto',
              }}>
                {}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  {}
                  <HotelsCounter target={card.hotels} active={isFront && !isExiting} />

                  {}
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: '#BECF5D',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <ArrowUpRight weight="bold" size={13} style={{ color: '#1A1A19' }} />
                  </div>
                </div>

                {}
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                  <p style={{
                    fontSize: 17,
                    fontWeight: 800,
                    lineHeight: 1.15,
                    color: '#FFFFFF',
                    letterSpacing: '-0.02em',
                    margin: 0,
                  }}>
                    {card.title}
                  </p>
                  <span style={{
                    fontSize: 10,
                    fontWeight: 500,
                    color: 'rgba(255,255,255,0.45)',
                    letterSpacing: '0.04em',
                  }}>
                    {card.country}
                  </span>
                </div>
              </div>

              {}
              <div style={{
                margin: '8px 6px 6px',
                borderRadius: 12,
                flex: 1,
                position: 'relative',
                overflow: 'hidden',
                backgroundImage: `url(${card.img})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}>
              </div>
            </motion.div>
          )
        })}
      </div>

      {}
      <p
        style={{
          position: 'absolute',
          bottom: 24,
          fontSize: 11,
          color: isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)',
          letterSpacing: '0.05em',
        }}
      >
        swipe down to shuffle
      </p>
    </div>
  )
}

```

---

## Glitch Button

Category: Buttons & Toggles
Slug: `glitch-button`
URL: https://aicanvas.me/components/glitch-button

A terminal-inspired button with a text scramble glitch effect on hover.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/glitch-button
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a terminal-styled button with a character scramble effect.
 * Hovering replaces unresolved letters with symbols before restoring the label.
 */

import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react'
import { motion } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



const LABEL = 'INITIALIZE'
const GLITCH_CHARS = '@#$%&!*^~<>?+='
// tune: raise to lengthen the scramble
const SCRAMBLE_DURATION = 700
// tune: raise to slow character updates
const SCRAMBLE_INTERVAL = 40

const DARK = {
  text: '#00ff41',
  textDim: 'rgba(0, 255, 65, 0.6)',
  glow: 'rgba(0, 255, 65, 0.15)',
  borderDefault: '#2E2A24',
}

const LIGHT = {
  text: '#2a6b0a',
  textDim: 'rgba(42, 107, 10, 0.7)',
  glow: 'rgba(42, 107, 10, 0.12)',
  borderDefault: '#DDD8CE',
}

function getRandomChar(): string {
  return GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]
}

export default function GlitchButton() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  const colors = isDark ? DARK : LIGHT

  const [displayText, setDisplayText] = useState(LABEL)
  const [isHovered, setIsHovered] = useState(false)
  const rafRef = useRef<number>(0)
  const isHoveredRef = useRef(false)
  const startTimeRef = useRef(0)
  const lastUpdateRef = useRef(0)

  const cleanup = useCallback(() => {
    if (rafRef.current) {
      cancelAnimationFrame(rafRef.current)
      rafRef.current = 0
    }
  }, [])

  useEffect(() => {
    return () => { cleanup() }
  }, [cleanup])

  const scrambleTick = useCallback((timestamp: number) => {
    if (!isHoveredRef.current) return

    const elapsed = timestamp - startTimeRef.current
    const resolvePerChar = SCRAMBLE_DURATION / LABEL.length

    if (timestamp - lastUpdateRef.current < SCRAMBLE_INTERVAL) {
      rafRef.current = requestAnimationFrame(scrambleTick)
      return
    }
    lastUpdateRef.current = timestamp

    const resolvedCount = Math.min(
      Math.floor(elapsed / resolvePerChar),
      LABEL.length
    )

    if (resolvedCount >= LABEL.length) {
      setDisplayText(LABEL)
      return
    }

    const chars: string[] = []
    for (let i = 0; i < LABEL.length; i++) {
      chars.push(i < resolvedCount ? LABEL[i] : getRandomChar())
    }
    setDisplayText(chars.join(''))

    rafRef.current = requestAnimationFrame(scrambleTick)
  }, [])

  function handleMouseEnter() {
    isHoveredRef.current = true
    setIsHovered(true)
    startTimeRef.current = performance.now()
    lastUpdateRef.current = 0
    cleanup()
    rafRef.current = requestAnimationFrame(scrambleTick)
  }

  function handleMouseLeave() {
    isHoveredRef.current = false
    setIsHovered(false)
    cleanup()
    setDisplayText(LABEL)
  }

  return (
    <div ref={containerRef} className="flex min-h-screen w-full items-center justify-center" style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}>
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
      >
        <motion.button
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          className="relative cursor-pointer px-8 py-4 font-mono text-lg font-semibold tracking-widest"
          style={{
            background: isDark ? '#110F0C' : '#F5F1EA',
            color: colors.text,
            boxShadow: isHovered
              ? `0 0 20px ${colors.glow}, inset 0 0 12px ${colors.glow}`
              : 'none',
            transition: 'box-shadow 0.3s',
          }}
          whileTap={{ scale: 0.97 }}
          transition={{ type: 'spring', stiffness: 400, damping: 30 }}
        >
          {}
          {(['tl', 'tr', 'bl', 'br'] as const).map((corner) => (
            <span
              key={corner}
              className="pointer-events-none absolute"
              style={{
                width: 10,
                height: 10,
                top: corner.startsWith('t') ? 0 : 'auto',
                bottom: corner.startsWith('b') ? 0 : 'auto',
                left: corner.endsWith('l') ? 0 : 'auto',
                right: corner.endsWith('r') ? 0 : 'auto',
                borderColor: isHovered ? colors.textDim : colors.borderDefault,
                borderTopWidth: corner.startsWith('t') ? 1.5 : 0,
                borderBottomWidth: corner.startsWith('b') ? 1.5 : 0,
                borderLeftWidth: corner.endsWith('l') ? 1.5 : 0,
                borderRightWidth: corner.endsWith('r') ? 1.5 : 0,
                borderStyle: 'solid',
                transition: 'border-color 0.3s',
              }}
            />
          ))}

          <span className="relative z-10">{displayText}</span>
        </motion.button>
      </motion.div>
    </div>
  )
}

```

---

## Flip Calendar

Category: Widgets
Slug: `flip-calendar`
URL: https://aicanvas.me/components/flip-calendar

A desk-calendar widget showing dates 1–31 with a satisfying flip-clock page-turn animation.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/flip-calendar
```

```tsx
'use client'

// npm install framer-motion
/**
 * Renders a draggable day calendar with a split-flap transition.
 * Pointer movement tilts the card, while vertical swipes change the date.
 */

import { useState, useRef, useLayoutEffect, useEffect } from 'react'
import { motion, useMotionValue, useTransform, animate } from 'framer-motion'
import type { PanInfo } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


// tune: raise to slow the page flip
const FLIP_MS = 220

function fmt(n: number) { return String(n).padStart(2, '0') }

export default function FlipCalendar() {
  const [topDisplay,    setTopDisplay   ] = useState(1)
  const [bottomDisplay, setBottomDisplay] = useState(1)
  const [flapContent,   setFlapContent  ] = useState(1)
  const [flapVisible,   setFlapVisible  ] = useState(false)
  const [flapping,      setFlapping     ] = useState(false)
  const currentRef = useRef(1)
  const rootRef    = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  const rotateX     = useMotionValue(0)
  const scanY       = useMotionValue(18)
  const scanYPct    = useTransform(scanY, (v) => `${v}%`)

  const tiltX = useMotionValue(0)
  const tiltY = useMotionValue(0)

  const aliveRef = useRef(true)
  const timeouts = useRef<ReturnType<typeof setTimeout>[]>([])

  useIsomorphicLayoutEffect(() => {
    aliveRef.current = true
    return () => {
      aliveRef.current = false
      timeouts.current.forEach(clearTimeout)
    }
  }, [])

  useIsomorphicLayoutEffect(() => {
    const el = rootRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  function sched(fn: () => void, ms: number) {
    const id = setTimeout(() => { if (aliveRef.current) fn() }, ms)
    timeouts.current.push(id)
  }

  function runFlip(
    target: number,
    durationMs: number,
    dir: 'next' | 'prev',
    onDone?: () => void,
  ) {
    const prev = currentRef.current
    currentRef.current = target
    setFlapContent(prev)
    setFlapVisible(true)

    if (dir === 'next') {
      scanY.set(18)
      animate(scanY, 104, { duration: (durationMs * 2) / 1000, ease: 'linear' })
    } else {
      scanY.set(104)
      animate(scanY, 18, { duration: (durationMs * 2) / 1000, ease: 'linear' })
    }

    rotateX.set(0)
    animate(rotateX, -90, { duration: durationMs / 1000, ease: 'easeIn' })

    sched(() => {
      setTopDisplay(target)
      setBottomDisplay(target)
      setFlapContent(target)
      rotateX.set(90)
      animate(rotateX, 0, { duration: durationMs / 1000, ease: 'easeOut' })
    }, durationMs)

    sched(() => {
      setFlapVisible(false)
      onDone?.()
    }, durationMs * 2 + 20)
  }

  function flip(dir: 'next' | 'prev') {
    if (flapping) return
    const cur = currentRef.current
    const target = dir === 'next' ? (cur === 31 ? 1 : cur + 1) : (cur === 1 ? 31 : cur - 1)
    setFlapping(true)
    runFlip(target, FLIP_MS, dir, () => setFlapping(false))
  }

  function onDragEnd(_e: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) {
    if (Math.abs(info.offset.y) < 40 && Math.abs(info.velocity.y) < 300) return
    flip(info.offset.y > 0 || info.velocity.y > 300 ? 'next' : 'prev')
  }

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    if (flapping) return
    const r = e.currentTarget.getBoundingClientRect()
    const cx = (e.clientX - r.left) / r.width - 0.5
    const cy = (e.clientY - r.top) / r.height - 0.5
    animate(tiltX, cy * -11, { duration: 0.12, ease: 'linear' })
    animate(tiltY, cx *  11, { duration: 0.12, ease: 'linear' })
  }

  function handleMouseLeave() {
    animate(tiltX, 0, { type: 'spring', stiffness: 160, damping: 18 })
    animate(tiltY, 0, { type: 'spring', stiffness: 160, damping: 18 })
  }

  const topGrad = isDark
    ? 'linear-gradient(155deg, #3572cc 0%, #2d62bc 55%, #2455a0 100%)'
    : 'linear-gradient(155deg, #4e9aec 0%, #3d88da 55%, #3078c8 100%)'

  const flapGrad = isDark
    ? 'linear-gradient(155deg, #2d64bc 0%, #2556ac 55%, #1e4894 100%)'
    : 'linear-gradient(155deg, #4290de 0%, #3480cc 55%, #2870bc 100%)'

  const bottomGrad = isDark
    ? 'linear-gradient(155deg, #4a8edc 0%, #5a9eec 55%, #68aef4 100%)'
    : 'linear-gradient(155deg, #5aaaee 0%, #6abaf8 55%, #76c4fc 100%)'

  const headerGrad = isDark
    ? 'linear-gradient(180deg, #2a2724 0%, #1e1c19 100%)'
    : 'linear-gradient(180deg, #d8d4ce 0%, #c6c2bc 100%)'

  const ringGrad = isDark
    ? 'radial-gradient(circle at 35% 30%, #f4f0ea 0%, #c0bcb6 45%, #888480 100%)'
    : 'radial-gradient(circle at 35% 30%, #ffffff 0%, #dedad4 45%, #aeaaa4 100%)'

  const cardShadow = isDark
    ? '0 40px 100px rgba(20,55,155,0.65), 0 12px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07)'
    : '0 40px 100px rgba(40,100,220,0.32), 0 12px 32px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,255,255,0.9)'

  const seam        = isDark ? 'rgba(0,0,0,0.42)' : 'rgba(0,0,0,0.22)'
  const numShadow   = isDark
    ? '0 4px 24px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4)'
    : '0 4px 24px rgba(0,0,0,0.3),  0 2px 8px rgba(0,0,0,0.22)'

  return (
    <div ref={rootRef} className="flex min-h-screen w-full flex-col items-center justify-center gap-6" style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}>

      {}
      <div
        style={{ perspective: '900px' }}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      >
        <motion.div
          initial={{ opacity: 0, y: 32, scale: 0.9 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
          drag="y"
          dragConstraints={{ top: 0, bottom: 0 }}
          dragElastic={0.08}
          onDragEnd={onDragEnd}
          className="relative cursor-grab active:cursor-grabbing select-none"
          style={{
            width: 'min(260px, 56vw)',
            aspectRatio: '1 / 1',
            rotate: '3deg',
            rotateX: tiltX,
            rotateY: tiltY,
          }}
        >

          {}
          {[13, 8, 4].map((y, i) => (
            <div
              key={i}
              className="absolute inset-0"
              style={{
                background: isDark ? '#2E2A24' : '#C8C2B8',
                transform: `translateY(${y}px)`,
                opacity: 0.28 + i * 0.2,
                zIndex: 0,
                borderRadius: 18,
                boxShadow: `0 ${y * 2}px ${y * 4}px rgba(0,0,0,0.35)`,
              }}
            />
          ))}

          {}
          <div
            className="absolute inset-0 overflow-hidden"
            style={{ zIndex: 1, boxShadow: cardShadow, borderRadius: 18 }}
          >

            {}
            <div
              className="absolute inset-x-0 top-0 flex items-end justify-center gap-8"
              style={{
                height: '18%',
                background: headerGrad,
                zIndex: 12,
                borderRadius: '18px 18px 0 0',
                borderLeft:  '1.5px solid rgba(0,0,0,0.14)',
                borderRight: '1.5px solid rgba(0,0,0,0.14)',
                paddingBottom: 7,
              }}
            >
              {[0, 1].map((i) => (
                <div
                  key={i}
                  style={{
                    width: 15, height: 15, borderRadius: '50%',
                    background: ringGrad,
                    boxShadow: '0 2px 6px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,255,255,0.6)',
                  }}
                />
              ))}
            </div>

            {}
            <div
              className="absolute inset-x-0 bottom-0 overflow-hidden"
              style={{ top: '59%', background: bottomGrad }}
            >
              <Half n={bottomDisplay} half="bottom" numShadow={numShadow} />
            </div>

            {}
            <div
              className="absolute inset-x-0 overflow-hidden"
              style={{
                top: '18%', bottom: '41%',
                background: topGrad,
                borderRadius: '12px 12px 0 0',
              }}
            >
              <Half n={topDisplay} half="top" numShadow={numShadow} />
            </div>

            {}
            {flapVisible && (
              <div
                className="absolute inset-x-0"
                style={{ top: '18%', height: '41%', zIndex: 8 }}
              >
                <motion.div
                  className="absolute inset-0 overflow-hidden"
                  style={{
                    background: flapGrad,
                    rotateX,
                    perspective: 140,
                    transformOrigin: 'center bottom',
                    willChange: 'transform',
                    borderRadius: '12px 12px 0 0',
                    boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.2)',
                  }}
                >
                  <Half n={flapContent} half="top" numShadow={numShadow} />
                </motion.div>

                {}
                <div
                  className="absolute inset-x-0 bottom-0 pointer-events-none"
                  style={{
                    height: 3,
                    background: 'rgba(255,255,255,0.25)',
                    zIndex: 9,
                    boxShadow: '0 0 8px rgba(255,255,255,0.18)',
                  }}
                />
              </div>
            )}

            {}
            {flapVisible && (
              <motion.div
                className="absolute inset-x-0 pointer-events-none"
                style={{
                  top: scanYPct,
                  height: 2,
                  borderRadius: '9999px',
                  background: '#ffffff',
                  opacity: 0.3,
                  zIndex: 20,
                }}
              />
            )}

            {}
            <div
              className="absolute inset-x-0 pointer-events-none"
              style={{
                top: 'calc(59% - 3px)', height: 6,
                background: seam, zIndex: 10,
              }}
            />

            {}
            <div
              className="absolute inset-x-0 pointer-events-none"
              style={{
                top: 'calc(18% - 1px)', height: 1,
                background: 'rgba(0,0,0,0.22)', zIndex: 11,
              }}
            />

            {}
            <div
              className="absolute inset-x-0 pointer-events-none"
              style={{
                top: '18%', height: '30%',
                background: 'linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%)',
                borderRadius: '12px 12px 0 0',
                zIndex: 6,
              }}
            />
          </div>
        </motion.div>
      </div>

      {}
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.1, duration: 0.8 }}
        className="font-mono text-xs tracking-widest"
        style={{ color: isDark ? '#3a3530' : '#C8C2B8' }}
      >
        ↑ swipe ↓
      </motion.p>
    </div>
  )
}


interface HalfProps {
  n: number
  half: 'top' | 'bottom'
  numShadow: string
}

function Half({ n, half, numShadow }: HalfProps) {
  return (
    <div
      className="absolute inset-x-0 flex items-center justify-center"
      style={{
        height: '200%',
        top:    half === 'top'    ? 0         : undefined,
        bottom: half === 'bottom' ? 0         : undefined,
      }}
    >
      <span
        className="font-sans font-bold select-none tabular-nums"
        style={{
          fontSize: 'clamp(3.8rem, 13vw, 6.5rem)',
          color: '#ffffff',
          lineHeight: 1,
          letterSpacing: '-0.03em',
          textShadow: numShadow,
        }}
      >
        {fmt(n)}
      </span>
    </div>
  )
}

```

---

## Runway Loader

Category: Widgets
Slug: `runway-loader`
URL: https://aicanvas.me/components/runway-loader

An airplane taxis down a runway progress bar, nose tilting up and taking off at 100%.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/runway-loader
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays an airplane loader moving along a runway timeline.
 * Progress advances through staged labels before the sequence restarts.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect




function Airplane({ isDark }: { isDark: boolean }) {
  
  const bodyTop    = isDark ? '#ececec' : '#c8c8c8'
  const bodyMid    = isDark ? '#ffffff' : '#dedede'
  const bodyBot    = isDark ? '#d0d0d0' : '#b4b4b4'
  const wingLight  = isDark ? '#f8f8f8' : '#d8d8d8'
  const wingDark   = isDark ? '#bababa' : '#909090'
  const tail       = isDark ? '#c8c8c8' : '#a8a8a8'
  const nose       = isDark ? '#f4f4f4' : '#d8d8d8'

  return (
    <svg
      className="w-[52px] sm:w-[72px] h-auto"
      viewBox="0 0 72 46"
      fill="none"
      style={{
        filter: isDark
          ? 'drop-shadow(0 4px 12px rgba(0,0,0,0.75)) drop-shadow(0 2px 4px rgba(0,0,0,0.5))'
          : 'drop-shadow(0 2px 8px rgba(0,0,0,0.35)) drop-shadow(0 1px 3px rgba(0,0,0,0.2))',
      }}
    >
      <defs>
        <linearGradient id="rl-body" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"   stopColor={bodyTop} />
          <stop offset="40%"  stopColor={bodyMid} />
          <stop offset="100%" stopColor={bodyBot} />
        </linearGradient>
        <linearGradient id="rl-wing-t" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%"   stopColor={wingLight} />
          <stop offset="100%" stopColor={wingDark} />
        </linearGradient>
        <linearGradient id="rl-wing-b" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"   stopColor={wingLight} />
          <stop offset="100%" stopColor={wingDark} />
        </linearGradient>
      </defs>

      {}
      <path d="M44,21 L28,21 L8,2 L18,0 Z" fill="url(#rl-wing-t)" />
      {}
      <path d="M44,25 L28,25 L8,44 L18,46 Z" fill="url(#rl-wing-b)" />

      {}
      <path d="M8,21 L2,14 L6,14 L12,21 Z" fill={tail} />
      <path d="M8,25 L2,32 L6,32 L12,25 Z" fill={tail} />

      {}
      <ellipse cx="34" cy="23" rx="29" ry="7" fill="url(#rl-body)" />

      {}
      <path
        d="M61,19.5 C66,21.5 67.5,23 67,23 C67.5,23 66,24.5 61,26.5 L58,23 Z"
        fill={nose}
      />

      {}
      <ellipse cx="57" cy="23" rx="4" ry="3" fill="#7ec8e8" opacity="0.9" />
    </svg>
  )
}



type Phase = 'taxiing' | 'takeoff' | 'resetting'

export default function RunwayLoader() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  const [progress, setProgress] = useState(0)
  const [phase, setPhase] = useState<Phase>('taxiing')
  const [cycle, setCycle] = useState(0)

  const rafRef         = useRef<number>(0)
  const startRef       = useRef<number | undefined>(undefined)
  const aliveRef       = useRef(true)
  const disappearedRef = useRef(false)

  
  // tune: lower to shorten the runway travel
  const WALL_PCT = 91

  useEffect(() => {
    aliveRef.current = true
    disappearedRef.current = false
    const TAXI_MS = 5500

    function tick(ts: number) {
      if (!aliveRef.current) return
      if (!startRef.current) startRef.current = ts
      const t = Math.min((ts - startRef.current) / TAXI_MS, 1)
      
      const eased = t <= 0.75
        ? (t / 0.75) * 82
        : 82 + (1 - Math.pow(1 - (t - 0.75) / 0.25, 2)) * 18
      const p = Math.min(eased, 100)
      setProgress(p)

      
      if (p >= WALL_PCT && !disappearedRef.current) {
        disappearedRef.current = true
        setPhase('takeoff')
      }

      if (p < 100) {
        rafRef.current = requestAnimationFrame(tick)
      } else {
        
        setTimeout(() => {
          if (!aliveRef.current) return
          setPhase('resetting')
          setTimeout(() => {
            if (!aliveRef.current) return
            disappearedRef.current = false
            startRef.current = undefined
            setProgress(0)
            setPhase('taxiing')
            setCycle((c) => c + 1)
            rafRef.current = requestAnimationFrame(tick)
          }, 400)
        }, 600)
      }
    }

    rafRef.current = requestAnimationFrame(tick)
    return () => {
      aliveRef.current = false
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
    }
  }, [])


  
  const planePct = Math.min(progress, WALL_PCT)

  
  const trackBg = isDark
    ? 'linear-gradient(to bottom, #404040, #252525)'
    : 'linear-gradient(to bottom, #bab7b2, #a09d98)'
  const trackShadow = isDark
    ? 'inset 0 4px 12px rgba(0,0,0,0.85), inset 0 -1px 3px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.5)'
    : 'inset 0 3px 8px rgba(0,0,0,0.22), inset 0 -1px 3px rgba(255,255,255,0.28), 0 2px 5px rgba(0,0,0,0.12)'
  const dashColor = isDark
    ? 'rgba(255,255,255,0.22)'
    : 'rgba(255,255,255,0.42)'

  return (
    <div ref={containerRef} className="flex min-h-screen w-full items-center justify-center" style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}>
      <div className="flex w-full max-w-[440px] flex-col items-center gap-4 px-4 sm:gap-6 sm:px-6">

        {}
        <div
          className="relative h-11 w-full overflow-visible rounded-full sm:h-14"
          style={{ background: trackBg, boxShadow: trackShadow }}
        >

          {}
          <div
            className="pointer-events-none absolute top-1/2 -translate-y-px"
            style={{
              left: 18,
              right: 18,
              height: 2,
              backgroundImage: `repeating-linear-gradient(to right, ${dashColor} 0, ${dashColor} 10px, transparent 10px, transparent 24px)`,
            }}
          />

          {}
          <div
            className="absolute inset-y-0 left-0 rounded-full"
            style={{
              width: `${progress}%`,
              background: 'linear-gradient(to right, #6b0000, #be1c1c 50%, #e03030)',
              boxShadow: 'inset 0 1px 3px rgba(255,255,255,0.1)',
            }}
          />

          {}
          {phase === 'taxiing' && progress > 30 && (
            <motion.div
              className="pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full"
              style={{
                right: `calc(${100 - planePct}% + 26px)`,
                width: Math.min(((progress - 30) / 70) * 56, 56),
                height: 22,
                background:
                  'radial-gradient(ellipse at right, rgba(255,140,20,0.3), transparent)',
                filter: 'blur(8px)',
              }}
              animate={{ opacity: [0.3, 0.75, 0.2, 0.65, 0.3] }}
              transition={{ duration: 0.2, repeat: Infinity }}
            />
          )}

          {}
          <AnimatePresence>
            {phase !== 'resetting' && (
              <div
                key={`plane-${cycle}`}
                className="pointer-events-none absolute top-1/2 z-20"
                style={{
                  left: `${planePct}%`,
                  transform: 'translateX(-50%) translateY(-50%)',
                }}
              >
                {phase === 'taxiing' ? (
                  <Airplane isDark={isDark} />
                ) : (
                  
                  <motion.div
                    initial={{ opacity: 1, x: 0, scale: 1 }}
                    animate={{ opacity: 0, x: 120, scale: 1.8 }}
                    transition={{ duration: 0.7, ease: 'easeIn' }}
                  >
                    <Airplane isDark={isDark} />
                  </motion.div>
                )}
              </div>
            )}
          </AnimatePresence>
        </div>

        {}
        <div className="flex flex-col items-center gap-1">
          <div className="flex items-baseline gap-1">
            <span
              className="text-2xl font-bold tabular-nums sm:text-[28px]"
              style={{ color: isDark ? '#FAF7F2' : '#1C1916' }}
            >
              {Math.round(progress)}
            </span>
            <span className="text-sm font-semibold sm:text-base" style={{ color: '#9E9890' }}>%</span>
          </div>
          <span
            className="text-[10px] font-semibold uppercase tracking-widest sm:text-[11px]"
            style={{ color: isDark ? '#736D65' : '#9E9890' }}
          >
            {phase === 'takeoff'
              ? 'Taking off!'
              : phase === 'resetting'
                ? '...'
                : 'Preparing for takeoff'}
          </span>
        </div>

      </div>
    </div>
  )
}

```

---

## Charging Widget

Category: Widgets
Slug: `charging-widget`
URL: https://aicanvas.me/components/charging-widget

Circular battery indicator with animated liquid waves that rise as the percentage counts up, looping continuously.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/charging-widget
```

```tsx
'use client'

// npm install framer-motion
// font: Manrope

/**
 * Circular charging indicator with liquid waves that rise with a looping count.
 * The displayed percentage resets after reaching its target.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
import { useMotionValue, animate } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


const TARGET_PERCENT = 78
const COUNT_DURATION = 4 // tune: raise to slow the count-up
const PAUSE_DURATION = 1 // tune: raise to lengthen the pause between loops

export default function ChargingWidget() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  const WAVE1_COLOR = isDark ? 'rgba(120, 60, 220, 0.45)' : 'rgba(109, 40, 217, 0.28)'
  const WAVE2_COLOR = isDark ? 'rgba(160, 80, 255, 0.70)' : 'rgba(124, 58, 237, 0.52)'
  const RING_COLOR  = isDark ? '#a855f7' : '#7c3aed'
  const BG_CIRCLE_COLOR = isDark ? 'rgba(120, 60, 220, 0.10)' : 'rgba(130, 60, 220, 0.06)'
  const TEXT_COLOR  = isDark ? '#ffffff' : '#1C1916'
  const TEXT_MUTED  = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(28,25,22,0.60)'
  const BOLT_COLOR  = isDark ? '#e0b0ff' : '#6d28d9'

  const percent = useMotionValue(0)

  const wave1Ref   = useRef<SVGPathElement>(null)
  const wave2Ref   = useRef<SVGPathElement>(null)
  const displayRef = useRef<SVGTextElement>(null)
  const percentRef = useRef(0)

  useEffect(() => {
    const unsub = percent.on('change', (v) => {
      percentRef.current = v
      if (displayRef.current) {
        displayRef.current.textContent = Math.round(v).toString()
      }
    })
    return unsub
  }, [percent])

  useEffect(() => {
    let alive = true

    async function run() {
      while (alive) {
        percent.set(0)
        await animate(percent, TARGET_PERCENT, {
          duration: COUNT_DURATION,
          ease: 'easeInOut',
        })
        if (!alive) break
        await new Promise<void>((resolve) => {
          const timer = setTimeout(resolve, PAUSE_DURATION * 1000)
          if (!alive) { clearTimeout(timer); resolve() }
        })
        if (!alive) break
      }
    }

    run()
    return () => { alive = false }
  }, [percent])

  useEffect(() => {
    let rafId: number
    let offset1 = 0
    let offset2 = 0

    function buildWavePath(fillY: number, amp: number, phase: number): string {
      let d = `M 0 ${fillY}`
      for (let x = 0; x <= 200; x += 2) {
        const y = fillY + Math.sin((x / 200) * 2 * Math.PI * 2 + phase) * amp
        d += ` L ${x} ${y}`
      }
      d += ` L 200 200 L 0 200 Z`
      return d
    }

    function tick() {
      const pct = percentRef.current
      const fillY = 200 - (pct / 100) * 200
      const amp = 14 * (1 - pct / 100) + 4

      offset1 += 0.025
      offset2 -= 0.018

      if (wave1Ref.current) {
        wave1Ref.current.setAttribute('d', buildWavePath(fillY, amp, offset1))
      }
      if (wave2Ref.current) {
        wave2Ref.current.setAttribute('d', buildWavePath(fillY, amp, offset2 + Math.PI))
      }

      rafId = requestAnimationFrame(tick)
    }

    rafId = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(rafId)
  }, [])

  const svgSize = 'min(260px, 56vw)'

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: isDark ? '#110F0C' : '#F5F1EA' }}
    >
      <svg
        viewBox="0 0 200 200"
        style={{ width: svgSize, height: svgSize }}
        aria-label={`Charging: ${TARGET_PERCENT}%`}
      >
        <defs>
          {}
          <clipPath id="cw-circle-clip">
            <circle cx="100" cy="100" r="88" />
          </clipPath>

          {}
          <filter id="cw-bolt-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feComposite in="blur" in2="SourceGraphic" operator="over" />
          </filter>
        </defs>

        {}
        <circle cx="100" cy="100" r="88" fill={BG_CIRCLE_COLOR} />

        {}
        <g clipPath="url(#cw-circle-clip)">
          <path ref={wave1Ref} fill={WAVE1_COLOR} d="M 0 200 L 200 200 L 200 200 L 0 200 Z" />
          <path ref={wave2Ref} fill={WAVE2_COLOR} d="M 0 200 L 200 200 L 200 200 L 0 200 Z" />
        </g>

        {}
        <circle cx="100" cy="100" r="88" fill="none" stroke={RING_COLOR} strokeWidth="3" />

        {}
        <g transform="translate(100, 52) scale(0.7)" filter="url(#cw-bolt-glow)">
          <path
            d="M 8 -20 L -8 2 L 0 2 L -8 20 L 8 -2 L 0 -2 Z"
            fill={BOLT_COLOR}
            strokeLinejoin="round"
          />
        </g>

        {}
        <text
          ref={displayRef}
          x="100"
          y="118"
          textAnchor="middle"
          dominantBaseline="middle"
          fill={TEXT_COLOR}
          fontSize="42"
          fontWeight="800"
          fontFamily="Manrope, sans-serif"
          letterSpacing="-1"
        >
          0
        </text>

        {}
        <text
          x="100"
          y="140"
          textAnchor="middle"
          dominantBaseline="middle"
          fill={TEXT_MUTED}
          fontSize="14"
          fontWeight="600"
          fontFamily="Manrope, sans-serif"
        >
          %
        </text>
      </svg>
    </div>
  )
}

```

---

## Dot Grid

Category: Backgrounds
Slug: `dot-grid`
URL: https://aicanvas.me/components/dot-grid

An animated dot grid background. Hovering lights up nearby dots with a smooth glow and an organic fade.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/dot-grid
```

```tsx
'use client'

/**
 * Renders a canvas dot grid with theme-aware resting and highlight colors.
 * Pointer movement brightens and enlarges nearby dots with eased falloff.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


const SPACING = 20     // tune: raise to spread the dots farther apart
const RADIUS  = 130    // tune: raise to widen the pointer influence
const BASE_A  = 0.13   // tune: raise to brighten resting dots
const PEAK_A  = 0.92   // tune: raise to brighten highlighted dots

export default function InteractiveDotGrid({
  showLabel = true,
  colors,
}: {
  showLabel?: boolean
  /** Overrides the background, dot colors, and resting or highlighted opacity. */
  colors?: {
    background?: string
    dot?: string
    highlight?: string
    baseAlpha?: number
    peakAlpha?: number
  }
} = {}) {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const colorsRef    = useRef(colors)
  colorsRef.current  = colors
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  useEffect(() => {
    const updateFromClient = (clientX: number, clientY: number) => {
      const canvas = canvasRef.current
      if (!canvas) return
      const rect = canvas.getBoundingClientRect()
      mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
    }

    const onMouseMove = (e: MouseEvent) => updateFromClient(e.clientX, e.clientY)
    const onTouchMove = (e: TouchEvent) => {
      const t = e.touches[0]
      if (t) updateFromClient(t.clientX, t.clientY)
    }
    const clearPointer = () => { mouseRef.current = null }

    window.addEventListener('mousemove', onMouseMove, { passive: true })
    window.addEventListener('touchmove', onTouchMove, { passive: true })
    window.addEventListener('touchend', clearPointer, { passive: true })
    window.addEventListener('touchcancel', clearPointer, { passive: true })
    document.addEventListener('mouseleave', clearPointer)

    return () => {
      window.removeEventListener('mousemove', onMouseMove)
      window.removeEventListener('touchmove', onTouchMove)
      window.removeEventListener('touchend', clearPointer)
      window.removeEventListener('touchcancel', clearPointer)
      document.removeEventListener('mouseleave', clearPointer)
    }
  }, [])

  useEffect(() => {
    const canvas: HTMLCanvasElement = canvasRef.current!
    const ctx = canvas.getContext('2d')!

    type Dot = { x: number; y: number; b: number }
    let dots: Dot[] = []
    let animId = 0
    let alive  = true
    let cw = 0, ch = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      dots = []
      const cols = Math.floor(cw / SPACING) + 2
      const rows = Math.floor(ch / SPACING) + 2
      const ox   = (cw % SPACING) / 2
      const oy   = (ch % SPACING) / 2
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          dots.push({ x: ox + c * SPACING, y: oy + r * SPACING, b: 0 })
        }
      }
    }

    function frame() {
      if (!alive) return
      ctx.clearRect(0, 0, cw, ch)

      const mx      = mouseRef.current?.x ?? -99999
      const my      = mouseRef.current?.y ?? -99999
      const r2      = RADIUS * RADIUS

      const ov      = colorsRef.current
      const dark    = isDarkRef.current
      const restRGB = ov?.dot ?? (dark ? '255,255,255' : '28,25,22')
      const litRGB  = ov?.highlight ?? restRGB
      const baseA   = ov?.baseAlpha ?? (dark ? BASE_A : 0.25)
      const peakA   = ov?.peakAlpha ?? PEAK_A
      const [r0, g0, b0] = restRGB.split(',').map(Number)
      const [r1, g1, b1] = litRGB.split(',').map(Number)

      for (const d of dots) {
        const dx    = d.x - mx
        const dy    = d.y - my
        const dist2 = dx * dx + dy * dy
        const tgt   = dist2 < r2 ? Math.pow(1 - Math.sqrt(dist2) / RADIUS, 1.5) : 0

        // tune: raise either rate to speed up illumination changes
        d.b += (tgt > d.b ? 0.16 : 0.07) * (tgt - d.b)
        if (d.b < 0.004) d.b = 0

        const alpha = baseA + (peakA - baseA) * d.b
        const sz    = 1 + d.b * 1.2   // tune: raise the multiplier to enlarge highlighted dots
        const r = Math.round(r0 + (r1 - r0) * d.b)
        const g = Math.round(g0 + (g1 - g0) * d.b)
        const b = Math.round(b0 + (b1 - b0) * d.b)
        ctx.fillStyle = `rgba(${r},${g},${b},${alpha.toFixed(2)})`
        ctx.fillRect(d.x - sz / 2, d.y - sz / 2, sz, sz)
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  const bg        = colors?.background ?? (isDark ? '#110F0C' : '#F5F1EA')
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
      {showLabel && (
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
          <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
            Dot Grid
          </span>
          <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
            hover to illuminate
          </span>
        </div>
      )}
    </div>
  )
}

```

---

## Radial Toolbar

Category: Inputs & Controls
Slug: `radial-toolbar`
URL: https://aicanvas.me/components/radial-toolbar

A radial context menu that fans out formatting tools around a centre button, with active toggle states and an animated label pill.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/radial-toolbar
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Presents formatting tools around an expandable radial menu.
 * Opening fans the controls outward, while selection toggles each tool state.
 */

import { useState, useLayoutEffect, useEffect, useRef } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import type { Icon as PhosphorIcon } from '@phosphor-icons/react'
import {
  X,
  TextB,
  TextItalic,
  TextUnderline,
  TextStrikethrough,
  LinkSimple,
  Palette,
} from '@phosphor-icons/react'

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



interface Tool {
  id: string
  label: string
  Icon: PhosphorIcon
}

const CX = 120
const CY = 120
const R_IN  = 30   
// tune: raise to widen the expanded toolbar
const R_OUT = 114
// tune: raise to move icons farther from the center
const R_ICON = 78
const GAP   = 0

// customize: replace the toolbar actions below
const TOOLS: Tool[] = [
  { id: 'bold',    label: 'Bold',          Icon: TextB },
  { id: 'italic',  label: 'Italic',        Icon: TextItalic },
  { id: 'under',   label: 'Underline',     Icon: TextUnderline },
  { id: 'strike',  label: 'Strikethrough', Icon: TextStrikethrough },
  { id: 'link',    label: 'Link',          Icon: LinkSimple },
  { id: 'color',   label: 'Color',         Icon: Palette },
]



const toRad = (d: number) => (d - 90) * (Math.PI / 180)

function wedgePath(startDeg: number, endDeg: number): string {
  const s = toRad(startDeg + GAP)
  const e = toRad(endDeg   - GAP)
  const x1 = CX + R_IN  * Math.cos(s);  const y1 = CY + R_IN  * Math.sin(s)
  const x2 = CX + R_OUT * Math.cos(s);  const y2 = CY + R_OUT * Math.sin(s)
  const x3 = CX + R_OUT * Math.cos(e);  const y3 = CY + R_OUT * Math.sin(e)
  const x4 = CX + R_IN  * Math.cos(e);  const y4 = CY + R_IN  * Math.sin(e)
  return `M${x1} ${y1}L${x2} ${y2}A${R_OUT} ${R_OUT} 0 0 1 ${x3} ${y3}L${x4} ${y4}A${R_IN} ${R_IN} 0 0 0 ${x1} ${y1}Z`
}

function iconXY(midDeg: number) {
  const r = toRad(midDeg)
  return { x: CX + R_ICON * Math.cos(r), y: CY + R_ICON * Math.sin(r) }
}



export default function RadialToolbar() {
  const [open, setOpen]       = useState(false)
  const [hoveredId, setHover] = useState<string | null>(null)
  const [activeId,  setActive]= useState<string | null>(null)

  const containerRef = useRef<HTMLDivElement>(null)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setIsDark(card ? card.classList.contains('dark') : document.documentElement.classList.contains('dark'))
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  const handleTool = (id: string) => setActive(p => p === id ? null : id)
  const close = () => { setOpen(false); setActive(null); setHover(null) }

  const labelTool = TOOLS.find(t => t.id === hoveredId) ?? TOOLS.find(t => t.id === activeId)

  return (
    <div ref={containerRef} className="relative flex min-h-screen w-full items-center justify-center" style={{ background: isDark ? '#0a0a0a' : '#F5F1EA' }}>

      {}
      <AnimatePresence>
        {open && (
          <div className="absolute inset-0 flex items-center justify-center">
            <motion.div
              style={{
                width: 240,
                height: 240,
                position: 'relative',
                filter: 'drop-shadow(0 20px 48px rgba(0,0,0,0.7))',
              }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.22, ease: 'easeOut' }}
            >
              <svg width={240} height={240} className="absolute inset-0">
                <circle
                  cx={CX} cy={CY} r={R_OUT + 1}
                  fill="none"
                  stroke={isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.10)'}
                  strokeWidth={1}
                />

                {TOOLS.map((tool, i) => {
                  const isH = hoveredId === tool.id
                  const isA = activeId  === tool.id
                  return (
                    <path
                      key={tool.id}
                      d={wedgePath(i * 60, i * 60 + 60)}
                      style={{
                        fill: isA
                          ? (isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.16)')
                          : isH
                            ? (isDark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.10)')
                            : (isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)'),
                        stroke: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)',
                        strokeWidth: 1,
                        transition: 'fill 0.18s ease',
                        cursor: 'pointer',
                      }}
                      onPointerEnter={() => setHover(tool.id)}
                      onPointerLeave={() => setHover(null)}
                      onClick={() => handleTool(tool.id)}
                    />
                  )
                })}
              </svg>

              {}
              {TOOLS.map((tool, i) => {
                const { x, y } = iconXY(i * 60 + 30)
                const isH = hoveredId === tool.id
                const isA = activeId  === tool.id
                return (
                  <motion.div
                    key={`icon-${tool.id}`}
                    className="absolute flex items-center justify-center"
                    style={{
                      left: x - 12,
                      top:  y - 12,
                      width: 24,
                      height: 24,
                      pointerEvents: 'none',
                    }}
                    initial={{ opacity: 0, scale: 0.4 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{
                      type: 'spring',
                      stiffness: 320,
                      damping: 28,
                      delay: i * 0.035 + 0.05,
                    }}
                  >
                    <tool.Icon
                      size={18}
                      weight="regular"
                      color={isA ? (isDark ? '#ffffff' : '#110F0C') : isH ? (isDark ? '#e4e4e7' : '#2E2A24') : (isDark ? '#71717a' : '#9E9890')}
                    />
                  </motion.div>
                )
              })}
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {}
      <motion.button
        style={{
          position: 'relative',
          zIndex: 10,
          width: 60,
          height: 60,
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: 'pointer',
          background: isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.05)',
          border: `1px solid ${isDark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.14)'}`,
          boxShadow: isDark
            ? '0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)'
            : '0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6)',
        }}
        whileHover={{ scale: 1.08 }}
        whileTap={{ scale: 0.94 }}
        onClick={open ? close : () => setOpen(true)}
      >
        <AnimatePresence mode="wait">
          {!open ? (
            
            <motion.span
              key="edit"
              initial={{ opacity: 0, scale: 0.7 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{   opacity: 0, scale: 0.7 }}
              transition={{ duration: 0.14, ease: 'easeOut' }}
              style={{
                fontFamily: 'var(--font-sans, sans-serif)',
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: '0.1em',
                color: isDark ? '#e4e4e7' : '#2E2A24',
                userSelect: 'none',
              }}
            >
              EDIT
            </motion.span>
          ) : (
            
            <motion.span
              key="x-icon"
              initial={{ opacity: 0, rotate: -90, scale: 0.4 }}
              animate={{ opacity: 1, rotate: 0,   scale: 1   }}
              exit={{   opacity: 0, rotate: -90,  scale: 0.4 }}
              transition={{ type: 'spring', stiffness: 260, damping: 24 }}
              style={{ display: 'flex' }}
            >
              <X size={16} weight="regular" color={isDark ? '#a1a1aa' : '#4A453F'} />
            </motion.span>
          )}
        </AnimatePresence>
      </motion.button>

      {}
      <AnimatePresence>
        {open && labelTool && (
          <motion.div
            key={labelTool.id}
            className="pointer-events-none absolute flex items-center gap-1.5 rounded-full px-3 py-1.5"
            style={{
              top: 'calc(50% + 140px)',
              left: '50%',
              x: '-50%',
              background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
              border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.10)'}`,
              fontFamily: 'var(--font-sans, sans-serif)',
              whiteSpace: 'nowrap',
            }}
            initial={{ opacity: 0, y: 8,  scale: 0.9  }}
            animate={{ opacity: 1, y: 0,  scale: 1    }}
            exit={{    opacity: 0, y: 4,  scale: 0.95 }}
            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
          >
            <labelTool.Icon size={11} weight="regular" color={activeId === labelTool.id ? (isDark ? '#e4e4e7' : '#2E2A24') : (isDark ? '#71717a' : '#9E9890')} />
            <span className="text-xs font-medium" style={{ color: isDark ? '#a1a1aa' : '#736D65' }}>{labelTool.label}</span>
            {activeId === labelTool.id && (
              <motion.span
                className="h-1 w-1 rounded-full"
                style={{ background: isDark ? '#ffffff' : '#1C1916' }}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: 'spring', stiffness: 600, damping: 20 }}
              />
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

```

---

## X Grid

Category: Backgrounds
Slug: `x-grid`
URL: https://aicanvas.me/components/x-grid

An animated X grid background. Marks illuminate and connect to their neighbors with constellation lines as your cursor passes.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/x-grid
```

```tsx
'use client'

/**
 * Renders a theme-aware canvas grid of connected cross marks.
 * Pointer proximity brightens nearby marks and their connecting lines.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



// tune: raise to spread the cross marks farther apart
const SPACING = 20     
// tune: raise to widen pointer influence
const RADIUS  = 340    
// tune: raise to brighten resting marks
const BASE_A  = 0.13   
// tune: raise to brighten highlighted marks
const PEAK_A  = 0.92   

export default function XGrid() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas: HTMLCanvasElement = canvasRef.current!
    const ctx = canvas.getContext('2d')!

    type Mark = { x: number; y: number; b: number; col: number; row: number }
    let marks: Mark[] = []
    let grid: Mark[][] = []
    let animId = 0
    let alive  = true
    let cw = 0, ch = 0
    const t0 = performance.now()

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      marks = []
      grid  = []
      const cols = Math.floor(cw / SPACING) + 2
      const rows = Math.floor(ch / SPACING) + 2
      const ox   = (cw % SPACING) / 2
      const oy   = (ch % SPACING) / 2
      for (let r = 0; r < rows; r++) {
        grid[r] = []
        for (let c = 0; c < cols; c++) {
          const m: Mark = { x: ox + c * SPACING, y: oy + r * SPACING, b: 0, col: c, row: r }
          marks.push(m)
          grid[r][c] = m
        }
      }
    }

    function frame() {
      if (!alive) return
      ctx.clearRect(0, 0, cw, ch)

      
      ctx.lineWidth = 0.5

      const mx      = mouseRef.current?.x ?? -99999
      const my      = mouseRef.current?.y ?? -99999
      const r2      = RADIUS * RADIUS
      const dotRGB  = isDarkRef.current ? '255,255,255' : '28,25,22'
      const t       = (performance.now() - t0) / 1000

      for (const d of marks) {
        const dx    = d.x - mx
        const dy    = d.y - my
        const dist2 = dx * dx + dy * dy
        const tgt   = dist2 < r2 ? Math.pow(1 - Math.sqrt(dist2) / RADIUS, 1.5) : 0

        d.b += (tgt > d.b ? 0.16 : 0.05) * (tgt - d.b)
        if (d.b < 0.004) d.b = 0

        const arm   = 2 + d.b * 1.0   
        const sw    = 0.5 + d.b * 0.3 
        const baseA = isDarkRef.current ? BASE_A : 0.25
        const wave  = Math.sin(d.col * 0.3 + d.row * 0.3 - t * 0.5)
        const restingAlpha = baseA * (1 + wave * 0.3)
        const alpha = restingAlpha + (PEAK_A - restingAlpha) * d.b
        ctx.strokeStyle = `rgba(${dotRGB},${alpha.toFixed(2)})`
        ctx.lineWidth = sw

        ctx.beginPath()
        ctx.moveTo(d.x - arm, d.y - arm)
        ctx.lineTo(d.x + arm, d.y + arm)
        ctx.moveTo(d.x + arm, d.y - arm)
        ctx.lineTo(d.x - arm, d.y + arm)
        ctx.stroke()
      }

      
      ctx.lineWidth = 0.5
      for (const d of marks) {
        if (d.b < 0.05) continue
        
        const neighbours = [
          grid[d.row]?.[d.col + 1],     
          grid[d.row + 1]?.[d.col],     
          grid[d.row + 1]?.[d.col + 1], 
          grid[d.row + 1]?.[d.col - 1], 
        ]
        for (const n of neighbours) {
          if (!n || n.b < 0.05) continue
          const lineAlpha = Math.min(d.b, n.b) * 0.4
          ctx.strokeStyle = `rgba(${dotRGB},${lineAlpha.toFixed(2)})`
          ctx.beginPath()
          ctx.moveTo(d.x, d.y)
          ctx.lineTo(n.x, n.y)
          ctx.stroke()
        }
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg         = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t = e.touches[0]; if (t) updateMouse(t.clientX, t.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          X Grid
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to illuminate
        </span>
      </div>
    </div>
  )
}

```

---

## Blind Pull Toggle

Category: Buttons & Toggles
Slug: `blind-pull-toggle`
URL: https://aicanvas.me/components/blind-pull-toggle

A dark/light mode toggle styled as a window-blind pull cord. Click to yank the cord and watch the icon swap through a venetian-blind slat animation.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/blind-pull-toggle
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a responsive pull control whose slat animation swaps between moon and sun icons.
 */

import { useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react'
import { motion, useAnimate, stagger } from 'framer-motion'
import { Moon, Sun } from '@phosphor-icons/react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

const SLATS      = 6
const MAX_SIZE   = 80  // tune: raise to increase the maximum control size
const MIN_SIZE   = 48  // tune: raise to increase the minimum control size

export default function BlindPullToggle() {
  const [toggleDark, setToggleDark] = useState(true)
  const [pageIsDark, setPageIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [animating, setAnimating]   = useState(false)
  const [size, setSize]             = useState(MAX_SIZE) 
  const sizeRef                     = useRef(MAX_SIZE)   
  const [scope, animate]            = useAnimate()

  useIsomorphicLayoutEffect(() => {
    const el = scope.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setPageIsDark(
        card
          ? card.classList.contains('dark')
          : document.documentElement.classList.contains('dark'),
      )
    }
    check()
    const mo = new MutationObserver(check)
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) mo.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => mo.disconnect()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    const el = scope.current
    if (!el) return
    const update = () => {
      const w = el.offsetWidth
      const h = el.offsetHeight
      const s = Math.max(MIN_SIZE, Math.min(MAX_SIZE, Math.round(Math.min(w, h) * 0.2)))
      sizeRef.current = s
      setSize(s)
    }
    update()
    const ro = new ResizeObserver(update)
    ro.observe(el)
    return () => ro.disconnect()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const iconSize   = Math.round(size * 0.45)               // tune: raise the multiplier to enlarge the icon
  const radius     = Math.round(size * 0.275)              // tune: raise the multiplier to round the corners further
  const cordRestH  = Math.round(size * 0.30)               // tune: raise the multiplier to lengthen the resting cord
  const dotSize    = Math.max(8, Math.round(size * 0.138)) // tune: raise the multiplier to enlarge the pull dot

  const previewBg    = pageIsDark ? '#110F0C' : '#EDEAE5'
  const buttonBg     = pageIsDark
    ? 'linear-gradient(145deg, #3a3530, #252019)'
    : 'linear-gradient(145deg, #E8E4DC, #DFDBD4)'
  const buttonBorder = pageIsDark
    ? '1.5px solid rgba(255,255,255,0.10)'
    : '1.5px solid rgba(0,0,0,0.12)'
  const buttonShadow = pageIsDark
    ? '0 6px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07)'
    : '0 4px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08)'
  const iconColor    = pageIsDark ? 'white' : '#2E2A24'
  const cordTop      = pageIsDark ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.22)'
  const cordBottom   = pageIsDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.05)'
  const dotBg        = pageIsDark ? 'rgba(255,255,255,0.62)' : 'rgba(0,0,0,0.32)'
  const dotShadow    = pageIsDark ? '0 2px 8px rgba(0,0,0,0.5)' : '0 2px 6px rgba(0,0,0,0.12)'

  const handleToggle = useCallback(async () => {
    if (animating) return
    setAnimating(true)

    const pullH = Math.round(sizeRef.current * 0.65)
    const restH = Math.round(sizeRef.current * 0.30)

    await animate('.cord-line', { height: pullH }, { duration: 0.1, ease: [0.4, 0, 1, 1] })
    animate('.cord-line', { height: restH }, { type: 'spring', stiffness: 300, damping: 18 })
    await animate('.slat', { scaleY: 0 }, { delay: stagger(0.04), duration: 0.1, ease: 'easeIn' })
    setToggleDark((d) => !d)
    await animate('.slat', { scaleY: 1 }, { delay: stagger(0.04), duration: 0.13, ease: 'easeOut' })

    setAnimating(false)
  }, [animating, animate])

  return (
    <div
      ref={scope}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: previewBg }}
    >
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
        className="flex select-none flex-col items-center"
      >
        <motion.button
          onClick={handleToggle}
          whileHover={{ scale: 1.06 }}
          whileTap={{ scale: 0.97 }}
          transition={{ type: 'spring', stiffness: 400, damping: 28 }}
          style={{
            width: size,
            height: size,
            borderRadius: radius,
            border: buttonBorder,
            boxShadow: buttonShadow,
            cursor: 'pointer',
            position: 'relative',
            background: 'transparent',
          }}
        >
          <div
            style={{
              position: 'absolute',
              inset: 0,
              borderRadius: radius - 1,
              overflow: 'hidden',
            }}
          >
            {Array.from({ length: SLATS }).map((_, i) => {
              const topPx     = Math.round((i / SLATS) * size)
              const nextTopPx = i === SLATS - 1
                ? size
                : Math.round(((i + 1) / SLATS) * size)
              const heightPx  = nextTopPx - topPx

              return (
                <div
                  key={i}
                  className="slat"
                  style={{
                    position: 'absolute',
                    top: topPx,
                    left: 0,
                    width: '100%',
                    height: heightPx,
                    overflow: 'hidden',
                    transformOrigin: '50% 50%',
                  }}
                >
                  <div
                    style={{
                      position: 'absolute',
                      top: -topPx,
                      left: 0,
                      width: size,
                      height: size,
                      background: buttonBg,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: iconColor,
                    }}
                  >
                    {toggleDark ? (
                      <Moon size={iconSize} weight="regular" />
                    ) : (
                      <Sun size={iconSize} weight="regular" />
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        </motion.button>

        <div
          className="flex cursor-pointer flex-col items-center"
          onClick={handleToggle}
        >
          <div
            className="cord-line"
            style={{
              width: 2,
              height: cordRestH,
              background: `linear-gradient(to bottom, ${cordTop}, ${cordBottom})`,
              borderRadius: 1,
            }}
          />
          <div
            style={{
              width: dotSize,
              height: dotSize,
              borderRadius: '50%',
              background: dotBg,
              boxShadow: dotShadow,
            }}
          />
        </div>
      </motion.div>
    </div>
  )
}

```

---

## Taga Toggle

Category: Buttons & Toggles
Slug: `taga-toggle`
URL: https://aicanvas.me/components/taga-toggle

A playful pill toggle with an expressive face on the thumb: dead (×× eyes, flat mouth) when off, happy (arc eyes, big smile) when on. Track warms from grey to yellow.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/taga-toggle
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a responsive pill toggle with an expressive face on its thumb.
 * Toggling slides the thumb and morphs the face between inactive and happy states.
 */

import { useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react'
import { motion, AnimatePresence, useMotionValue, useTransform, animate } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect






// tune: change these bounds to resize the responsive track
const MAX_TRACK_W = 80
const MIN_TRACK_W = 48
const FACE_COLOR  = '#4A3F35'  

export default function TagaToggle() {
  const [isOn, setIsOn]             = useState(false)
  const [animating, setAnimating]   = useState(false)
  const [pageIsDark, setPageIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [trackW, setTrackW]         = useState(MAX_TRACK_W)
  const containerRef                = useRef<HTMLDivElement>(null)
  const isOnRef                     = useRef(false)

  
  const trackH = Math.round(trackW * 0.58)
  const thumb  = Math.round(trackW * 0.50)
  const pad    = Math.max(3, Math.round(trackW * 0.04))
  const offX   = pad
  const onX    = trackW - thumb - pad

  const thumbX = useMotionValue(offX)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setPageIsDark(
        card
          ? card.classList.contains('dark')
          : document.documentElement.classList.contains('dark'),
      )
    }
    check()
    const mo = new MutationObserver(check)
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) mo.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    const update = () => {
      const s = Math.max(
        MIN_TRACK_W,
        Math.min(MAX_TRACK_W, Math.round(Math.min(el.offsetWidth, el.offsetHeight) * 0.18)),
      )
      setTrackW(s)
    }
    update()
    const ro = new ResizeObserver(update)
    ro.observe(el)
    return () => { mo.disconnect(); ro.disconnect() }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  
  useEffect(() => {
    thumbX.set(isOnRef.current ? onX : offX)
  }, [trackW]) // eslint-disable-line react-hooks/exhaustive-deps

  
  const offTrack   = pageIsDark ? '#4A4540' : '#9E9890'
  const onTrack    = pageIsDark ? '#D4960A' : '#F5C518'
  const trackColor = useTransform(thumbX, [offX, onX], [offTrack, onTrack])

  
  const handleToggle = useCallback(async () => {
    if (animating) return
    setAnimating(true)
    const target = isOn ? offX : onX
    isOnRef.current = !isOn
    setIsOn((v) => !v)
    await animate(thumbX, target, { type: 'spring', stiffness: 500, damping: 36 })
    setAnimating(false)
  }, [isOn, animating, thumbX, offX, onX])

  
  const previewBg   = pageIsDark ? '#110F0C' : '#EDEAE5'
  const trackInset  = pageIsDark
    ? 'inset 0 1px 4px rgba(0,0,0,0.50)'
    : 'inset 0 1px 3px rgba(0,0,0,0.14)'
  const thumbShadow = pageIsDark
    ? '0 3px 8px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30)'
    : '0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10)'

  
  const mouthPath = isOn
    ? 'M -0.40,0.15 Q 0,0.50 0.40,0.15'   
    : 'M -0.40,0.43 Q 0,0.43 0.40,0.43'   

  const faceSize = thumb * 0.78

  
  const eyeSpring = { duration: 0.16, ease: [0.34, 1.56, 0.64, 1] as [number, number, number, number] }

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: previewBg }}
    >
      <motion.div
        initial={{ opacity: 0, scale: 0.88 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }}
        className="select-none"
      >
        {}
        <motion.button
          type="button"
          role="switch"
          aria-checked={isOn}
          aria-label="Toggle"
          onClick={handleToggle}
          style={{
            width: trackW,
            height: trackH,
            borderRadius: trackH / 2,
            backgroundColor: trackColor,
            boxShadow: trackInset,
            position: 'relative',
            cursor: 'pointer',
            border: 'none',
            outline: 'none',
            display: 'block',
          }}
          whileTap={{ scale: 0.96 }}
          transition={{ type: 'spring', stiffness: 400, damping: 28 }}
        >
          {}
          <motion.div
            style={{
              position: 'absolute',
              top: pad,
              x: thumbX,
              width: thumb,
              height: thumb,
              borderRadius: '50%',
              background: 'white',
              boxShadow: thumbShadow,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {}
            <svg
              viewBox="-1 -1 2 2"
              width={faceSize}
              height={faceSize}
            >
              {}
              <AnimatePresence mode="wait">
                {isOn ? (
                  <motion.path
                    key="le-happy"
                    d="M -0.50,-0.28 Q -0.32,-0.06 -0.14,-0.28"
                    stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" fill="none"
                    initial={{ opacity: 0, scale: 0.3 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.3 }}
                    transition={eyeSpring}
                  />
                ) : (
                  <motion.g
                    key="le-dead"
                    initial={{ opacity: 0, scale: 0.3 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.3 }}
                    transition={eyeSpring}
                  >
                    <line x1="-0.50" y1="-0.33" x2="-0.14" y2="-0.01"
                      stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" />
                    <line x1="-0.14" y1="-0.33" x2="-0.50" y2="-0.01"
                      stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" />
                  </motion.g>
                )}
              </AnimatePresence>

              {}
              <AnimatePresence mode="wait">
                {isOn ? (
                  <motion.path
                    key="re-happy"
                    d="M 0.14,-0.28 Q 0.32,-0.06 0.50,-0.28"
                    stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" fill="none"
                    initial={{ opacity: 0, scale: 0.3 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.3 }}
                    transition={eyeSpring}
                  />
                ) : (
                  <motion.g
                    key="re-dead"
                    initial={{ opacity: 0, scale: 0.3 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.3 }}
                    transition={eyeSpring}
                  >
                    <line x1="0.14" y1="-0.33" x2="0.50" y2="-0.01"
                      stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" />
                    <line x1="0.50" y1="-0.33" x2="0.14" y2="-0.01"
                      stroke={FACE_COLOR} strokeWidth={0.13} strokeLinecap="round" />
                  </motion.g>
                )}
              </AnimatePresence>

              {}
              <motion.path
                d={mouthPath}
                stroke={FACE_COLOR}
                strokeWidth={0.13}
                strokeLinecap="round"
                fill="none"
                transition={{ duration: 0.28, ease: 'easeInOut' }}
              />
            </svg>
          </motion.div>
        </motion.button>
      </motion.div>
    </div>
  )
}

```

---

## Mark Toggle

Category: Buttons & Toggles
Slug: `mark-toggle`
URL: https://aicanvas.me/components/mark-toggle

An iOS-style pill toggle in warm earth and sand tones: the thumb carries a small icon that morphs from X to checkmark as it slides across.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/mark-toggle
```

```tsx
'use client'

// npm install @phosphor-icons/react framer-motion
/**
 * Displays a responsive pill toggle with an icon-bearing thumb.
 * Toggling slides the thumb and morphs its mark between an X and check.
 */

import { useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react'
import { motion, AnimatePresence, useMotionValue, useTransform, animate } from 'framer-motion'
import { X, Check } from '@phosphor-icons/react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect






// tune: change these bounds to resize the responsive track
const MAX_TRACK_W = 80
const MIN_TRACK_W = 48

export default function MarkToggle() {
  const [isOn, setIsOn]             = useState(false)
  const [animating, setAnimating]   = useState(false)
  const [pageIsDark, setPageIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [trackW, setTrackW]         = useState(MAX_TRACK_W)
  const containerRef                = useRef<HTMLDivElement>(null)
  const isOnRef                     = useRef(false)

  
  const trackH   = Math.round(trackW * 0.55)
  const thumb    = Math.round(trackW * 0.45)
  const pad      = Math.max(3, Math.round(trackW * 0.05))
  const offX     = pad
  const onX      = trackW - thumb - pad
  const iconSize = Math.round(thumb * 0.50)

  const thumbX = useMotionValue(offX)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return

    const check = () => {
      const card = el.closest('[data-card-theme]')
      setPageIsDark(
        card
          ? card.classList.contains('dark')
          : document.documentElement.classList.contains('dark'),
      )
    }
    check()
    const mo = new MutationObserver(check)
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) mo.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })

    const update = () => {
      const s = Math.max(
        MIN_TRACK_W,
        Math.min(MAX_TRACK_W, Math.round(Math.min(el.offsetWidth, el.offsetHeight) * 0.18)),
      )
      setTrackW(s)
    }
    update()
    const ro = new ResizeObserver(update)
    ro.observe(el)

    return () => { mo.disconnect(); ro.disconnect() }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  
  useEffect(() => {
    thumbX.set(isOnRef.current ? onX : offX)
  }, [trackW]) // eslint-disable-line react-hooks/exhaustive-deps

  
  const offTrack  = pageIsDark ? '#8C7B6B' : '#B09478'
  const onTrack   = pageIsDark ? '#4A5935' : '#6B8040'
  const trackColor = useTransform(thumbX, [offX, onX], [offTrack, onTrack])

  
  const iconColor = isOn ? onTrack : offTrack

  
  const handleToggle = useCallback(async () => {
    if (animating) return
    setAnimating(true)
    const target = isOn ? offX : onX
    isOnRef.current = !isOn
    setIsOn((v) => !v)
    await animate(thumbX, target, { type: 'spring', stiffness: 500, damping: 36 })
    setAnimating(false)
  }, [isOn, animating, thumbX, offX, onX])

  
  const previewBg   = pageIsDark ? '#110F0C' : '#EDEAE5'
  const trackInset  = pageIsDark
    ? 'inset 0 1px 4px rgba(0,0,0,0.50)'
    : 'inset 0 1px 3px rgba(0,0,0,0.14)'
  const thumbShadow = pageIsDark
    ? '0 3px 8px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30)'
    : '0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10)'

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: previewBg }}
    >
      <motion.div
        initial={{ opacity: 0, scale: 0.88 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }}
        className="select-none"
      >
        {}
        <motion.button
          type="button"
          role="switch"
          aria-checked={isOn}
          aria-label="Toggle"
          onClick={handleToggle}
          style={{
            width: trackW,
            height: trackH,
            borderRadius: trackH / 2,
            backgroundColor: trackColor,
            boxShadow: trackInset,
            position: 'relative',
            cursor: 'pointer',
            border: 'none',
            outline: 'none',
            display: 'block',
          }}
          whileTap={{ scale: 0.96 }}
          transition={{ type: 'spring', stiffness: 400, damping: 28 }}
        >
          {}
          <motion.div
            style={{
              position: 'absolute',
              top: pad,
              x: thumbX,
              width: thumb,
              height: thumb,
              borderRadius: '50%',
              background: 'white',
              boxShadow: thumbShadow,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              overflow: 'hidden',
            }}
          >
            {}
            <AnimatePresence mode="wait" initial={false}>
              {isOn ? (
                <motion.span
                  key="check"
                  initial={{ scale: 0, rotate: -45, opacity: 0 }}
                  animate={{ scale: 1, rotate: 0, opacity: 1 }}
                  exit={{ scale: 0, rotate: 45, opacity: 0 }}
                  transition={{ duration: 0.18, ease: [0.34, 1.56, 0.64, 1] }}
                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <Check size={iconSize} weight="bold" color={iconColor} />
                </motion.span>
              ) : (
                <motion.span
                  key="x-icon"
                  initial={{ scale: 0, rotate: 45, opacity: 0 }}
                  animate={{ scale: 1, rotate: 0, opacity: 1 }}
                  exit={{ scale: 0, rotate: -45, opacity: 0 }}
                  transition={{ duration: 0.18, ease: [0.34, 1.56, 0.64, 1] }}
                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <X size={iconSize} weight="bold" color={iconColor} />
                </motion.span>
              )}
            </AnimatePresence>
          </motion.div>
        </motion.button>
      </motion.div>
    </div>
  )
}

```

---

## Pill Toggle

Category: Buttons & Toggles
Slug: `pill-toggle`
URL: https://aicanvas.me/components/pill-toggle

A minimal iOS-style slider toggle: thumb glides between off (grey) and on (green) with a snappy spring. Fully responsive.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/pill-toggle
```

```tsx
'use client'

// npm install framer-motion
/**
 * Displays a responsive pill toggle with a sliding thumb.
 * Toggling animates the thumb position and interpolates the track color.
 */

import { useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react'
import { motion, useMotionValue, useTransform, animate } from 'framer-motion'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect






// tune: change these bounds to resize the responsive track
const MAX_TRACK_W = 80   
const MIN_TRACK_W = 48   

export default function PillToggle() {
  const [isOn, setIsOn]             = useState(false)
  const [animating, setAnimating]   = useState(false)
  const [pageIsDark, setPageIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [trackW, setTrackW]         = useState(MAX_TRACK_W)
  const containerRef                = useRef<HTMLDivElement>(null)
  const isOnRef                     = useRef(false) 

  
  const trackH = Math.round(trackW * 0.55)                    
  const thumb  = Math.round(trackW * 0.45)                    
  const pad    = Math.max(3, Math.round(trackW * 0.05))       
  const offX   = pad
  const onX    = trackW - thumb - pad

  const thumbX = useMotionValue(offX)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return

    
    const check = () => {
      const card = el.closest('[data-card-theme]')
      setPageIsDark(
        card
          ? card.classList.contains('dark')
          : document.documentElement.classList.contains('dark'),
      )
    }
    check()
    const mo = new MutationObserver(check)
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) mo.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })

    
    const update = () => {
      const s = Math.max(
        MIN_TRACK_W,
        Math.min(MAX_TRACK_W, Math.round(Math.min(el.offsetWidth, el.offsetHeight) * 0.18)),
      )
      setTrackW(s)
    }
    update()
    const ro = new ResizeObserver(update)
    ro.observe(el)

    return () => { mo.disconnect(); ro.disconnect() }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  
  useEffect(() => {
    thumbX.set(isOnRef.current ? onX : offX)
  }, [trackW]) // eslint-disable-line react-hooks/exhaustive-deps

  
  const offTrack   = pageIsDark ? '#3D3A3A' : '#D1D1D6'
  const trackColor = useTransform(thumbX, [offX, onX], [offTrack, '#22c55e'])

  
  const handleToggle = useCallback(async () => {
    if (animating) return
    setAnimating(true)
    const target = isOn ? offX : onX
    isOnRef.current = !isOn
    setIsOn((v) => !v)
    await animate(thumbX, target, { type: 'spring', stiffness: 500, damping: 36 })
    setAnimating(false)
  }, [isOn, animating, thumbX, offX, onX])

  
  const previewBg   = pageIsDark ? '#110F0C' : '#EDEAE5'
  const trackInset  = pageIsDark
    ? 'inset 0 1px 4px rgba(0,0,0,0.50)'
    : 'inset 0 1px 3px rgba(0,0,0,0.14)'
  const thumbShadow = pageIsDark
    ? '0 3px 8px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30)'
    : '0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10)'

  return (
    <div
      ref={containerRef}
      className="flex min-h-screen w-full items-center justify-center"
      style={{ background: previewBg }}
    >
      <motion.div
        initial={{ opacity: 0, scale: 0.88 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }}
        className="select-none"
      >
        {}
        <motion.button
          type="button"
          role="switch"
          aria-checked={isOn}
          aria-label="Toggle"
          onClick={handleToggle}
          style={{
            width: trackW,
            height: trackH,
            borderRadius: trackH / 2,
            backgroundColor: trackColor,
            boxShadow: trackInset,
            position: 'relative',
            cursor: 'pointer',
            border: 'none',
            outline: 'none',
            display: 'block',
          }}
          whileTap={{ scale: 0.96 }}
          transition={{ type: 'spring', stiffness: 400, damping: 28 }}
        >
          {}
          <motion.div
            style={{
              position: 'absolute',
              top: pad,
              x: thumbX,
              width: thumb,
              height: thumb,
              borderRadius: '50%',
              background: 'white',
              boxShadow: thumbShadow,
            }}
          />
        </motion.button>
      </motion.div>
    </div>
  )
}

```

---

## Grain Background

Category: Backgrounds
Slug: `noise-bg`
URL: https://aicanvas.me/components/noise-bg

A grain background of randomly scattered dots. Hover to illuminate them with a soft Gaussian glow and organic connection lines.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/noise-bg
```

```tsx
'use client'

/**
 * Renders a theme-aware canvas field of granular dots and connections.
 * Pointer proximity changes the brightness of nearby particles and lines.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



// tune: lower the divisor to add more dots
const DENSITY     = 1 / 120   
// tune: raise to permit more dots on large canvases
const MAX_DOTS    = 3000      
// tune: raise to widen pointer influence
const RADIUS      = 200      
// tune: raise to connect dots across larger gaps
const NEIGHBOUR_D = 35       
const BASE_A_DARK  = 0.18
const BASE_A_LIGHT = 0.28
const PEAK_A      = 0.14


type Dot  = { x: number; y: number; b: number }
type Pair = [Dot, Dot]

export default function NoiseBg() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas: HTMLCanvasElement = canvasRef.current!
    const ctx = canvas.getContext('2d')!

    let dots: Dot[]  = []
    let pairs: Pair[] = []
    let animId = 0
    let alive  = true
    let cw = 0, ch = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      
      const count = Math.min(Math.round(cw * ch * DENSITY), MAX_DOTS)
      dots = Array.from({ length: count }, () => ({
        x: Math.random() * cw,
        y: Math.random() * ch,
        b: 0,
      }))

      
      const nd2 = NEIGHBOUR_D * NEIGHBOUR_D
      pairs = []
      for (let i = 0; i < dots.length; i++) {
        for (let j = i + 1; j < dots.length; j++) {
          const dx = dots[i].x - dots[j].x
          const dy = dots[i].y - dots[j].y
          if (dx * dx + dy * dy < nd2) pairs.push([dots[i], dots[j]])
        }
      }
    }

    function frame() {
      if (!alive) return
      ctx.clearRect(0, 0, cw, ch)

      const mx     = mouseRef.current?.x ?? -99999
      const my     = mouseRef.current?.y ?? -99999
      const r2     = RADIUS * RADIUS
      const dotRGB = isDarkRef.current ? '255,255,255' : '28,25,22'
      const baseA  = isDarkRef.current ? BASE_A_DARK : BASE_A_LIGHT

      
      for (const d of dots) {
        const dx    = d.x - mx
        const dy    = d.y - my
        const dist2 = dx * dx + dy * dy
        const tgt   = dist2 < r2 ? Math.exp(-dist2 / (RADIUS * RADIUS * 0.25)) : 0

        d.b += (tgt > d.b ? 0.16 : 0.07) * (tgt - d.b)
        if (d.b < 0.004) d.b = 0

        const alpha = baseA + (PEAK_A - baseA) * d.b
        const sz    = 0.8 + d.b * 0.6   
        ctx.fillStyle = `rgba(${dotRGB},${alpha.toFixed(2)})`
        ctx.fillRect(d.x - sz / 2, d.y - sz / 2, sz, sz)
      }

      
      for (const [a, b] of pairs) {
        if (a.b < 0.05 || b.b < 0.05) continue
        const lineAlpha = Math.min(a.b, b.b) * 0.10
        ctx.strokeStyle = `rgba(${dotRGB},${lineAlpha.toFixed(2)})`
        ctx.lineWidth = 0.5
        ctx.beginPath()
        ctx.moveTo(a.x, a.y)
        ctx.lineTo(b.x, b.y)
        ctx.stroke()
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg         = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t = e.touches[0]; if (t) updateMouse(t.clientX, t.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Noise
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to illuminate
        </span>
      </div>
    </div>
  )
}

```

---

## Bubble Field

Category: Backgrounds
Slug: `bubble-field`
URL: https://aicanvas.me/components/bubble-field

An animated bubble background. A monochrome grid of outline circles bursts near the cursor, expanding and fading, then reforming.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/bubble-field
```

```tsx
'use client'

/**
 * Canvas field of outlined bubbles that react to nearby pointer and touch input.
 * Each affected bubble expands, fades, and reforms in a repeating burst.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


const SPACING     = 20    // tune: raise to spread the circles farther apart
const RADIUS      = 200
const BASE_R      = 1.5
const BURST_R     = 16
const BASE_A_DARK  = 0.55
const BASE_A_LIGHT = 0.75

type Bubble = { x: number; y: number; b: number; phase: number }

export default function BubbleField() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  useEffect(() => {
    const canvas: HTMLCanvasElement = canvasRef.current!
    const ctx = canvas.getContext('2d')!

    let bubbles: Bubble[] = []
    let animId = 0
    let alive  = true
    let cw = 0, ch = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      bubbles = []
      const cols = Math.floor(cw / SPACING) + 2
      const rows = Math.floor(ch / SPACING) + 2
      const ox   = (cw % SPACING) / 2
      const oy   = (ch % SPACING) / 2
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          bubbles.push({ x: ox + c * SPACING, y: oy + r * SPACING, b: 0, phase: Math.random() })
        }
      }
    }

    function frame() {
      if (!alive) return
      ctx.clearRect(0, 0, cw, ch)

      const mx     = mouseRef.current?.x ?? -99999
      const my     = mouseRef.current?.y ?? -99999
      const r2     = RADIUS * RADIUS
      const dotRGB = isDarkRef.current ? '255,255,255' : '28,25,22'
      const baseA  = isDarkRef.current ? BASE_A_DARK : BASE_A_LIGHT

      for (const bub of bubbles) {
        const dx    = bub.x - mx
        const dy    = bub.y - my
        const dist2 = dx * dx + dy * dy
        const tgt   = dist2 < r2 ? Math.exp(-dist2 / (RADIUS * RADIUS * 0.25)) : 0

        bub.b += (tgt > bub.b ? 0.16 : 0.07) * (tgt - bub.b)
        if (bub.b < 0.004) bub.b = 0

        if (bub.b > 0.08) {
          bub.phase = (bub.phase + 0.025 * bub.b) % 1
        }

        const p = bub.phase

        if (bub.b > 0.08) {
          if (p < 0.55) {
            const t     = p / 0.55
            const r     = BASE_R + t * BURST_R
            const alpha = baseA * (1 - t)
            if (alpha > 0.004) {
              ctx.strokeStyle = `rgba(${dotRGB},${alpha.toFixed(3)})`
              ctx.lineWidth   = 0.5
              ctx.beginPath()
              ctx.arc(bub.x, bub.y, r, 0, Math.PI * 2)
              ctx.stroke()
            }
          } else if (p < 0.72) {
          } else {
            const t     = (p - 0.72) / 0.28
            const r     = BASE_R * t
            const alpha = baseA * t
            if (r > 0.2 && alpha > 0.004) {
              ctx.strokeStyle = `rgba(${dotRGB},${alpha.toFixed(3)})`
              ctx.lineWidth   = 0.5
              ctx.beginPath()
              ctx.arc(bub.x, bub.y, r, 0, Math.PI * 2)
              ctx.stroke()
            }
          }
        } else {
          ctx.strokeStyle = `rgba(${dotRGB},${baseA.toFixed(3)})`
          ctx.lineWidth   = 0.5
          ctx.beginPath()
          ctx.arc(bub.x, bub.y, BASE_R, 0, Math.PI * 2)
          ctx.stroke()
        }
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg         = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t = e.touches[0]; if (t) updateMouse(t.clientX, t.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Bubble Field
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to burst
        </span>
      </div>
    </div>
  )
}

```

---

## Grid Lines

Category: Backgrounds
Slug: `grid-lines`
URL: https://aicanvas.me/components/grid-lines

A grid background of dots connected by thin lines. The cursor lights a radial glow and bulges the grid outward like a lens as it moves.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/grid-lines
```

```tsx
'use client'

/**
 * Renders a canvas grid of connected dots with theme-aware coloring.
 * Pointer proximity brightens the grid and pushes nearby nodes into a lens shape.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


// tune: raise to spread the grid nodes farther apart
const SPACING = 20
// tune: raise to widen the pointer influence
const RADIUS_FRAC = 0.30
// tune: raise to strengthen the lens displacement
const LENS_FRAC = 0.06
// tune: raise to brighten resting dots
const BASE_A = 0.13
// tune: raise to brighten highlighted dots
const PEAK_A = 0.95
// tune: raise to brighten resting lines in dark mode
const LINE_A_DARK = 0.07
// tune: raise to brighten resting lines in light mode
const LINE_A_LIGHT = 0.12
// tune: raise to quicken pointer tracking
const MOUSE_LERP = 0.14
type Dot = { x: number; y: number; b: number; l: number; px: number; py: number }
type Segment = { a: Dot; b: Dot }

export default function GridLines() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const mouseRef = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  useEffect(() => {
    const canvas: HTMLCanvasElement = canvasRef.current!
    const ctx = canvas.getContext('2d')!

    let dots: Dot[] = []
    let hSegs: Segment[] = []
    let vSegs: Segment[] = []
    let animId = 0
    let alive = true
    let cw = 0, ch = 0

    let smoothMx = -99999
    let smoothMy = -99999

    function build() {
      const dpr = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      const cols = Math.floor(cw / SPACING) + 2
      const rows = Math.floor(ch / SPACING) + 2
      const ox = (cw % SPACING) / 2
      const oy = (ch % SPACING) / 2

      const prev = new Map<string, Dot>()
      for (const d of dots) {
        prev.set(`${d.x.toFixed(0)},${d.y.toFixed(0)}`, d)
      }

      const grid: Dot[][] = []
      dots = []
      for (let r = 0; r < rows; r++) {
        grid[r] = []
        for (let c = 0; c < cols; c++) {
          const x = ox + c * SPACING
          const y = oy + r * SPACING
          const key = `${x.toFixed(0)},${y.toFixed(0)}`
          const d: Dot = prev.get(key) ?? { x, y, b: 0, l: 0, px: x, py: y }

          dots.push(d)
          grid[r][c] = d
        }
      }

      hSegs = []
      vSegs = []
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          if (c + 1 < cols) hSegs.push({ a: grid[r][c], b: grid[r][c + 1] })
          if (r + 1 < rows) vSegs.push({ a: grid[r][c], b: grid[r + 1][c] })
        }
      }
    }

    function frame() {
      if (!alive) return
      ctx.clearRect(0, 0, cw, ch)

      const raw = mouseRef.current
      if (raw) {
        if (smoothMx === -99999) { smoothMx = raw.x; smoothMy = raw.y }
        smoothMx += (raw.x - smoothMx) * MOUSE_LERP
        smoothMy += (raw.y - smoothMy) * MOUSE_LERP
      } else {
        smoothMx = -99999
        smoothMy = -99999
      }

      const mx = smoothMx
      const my = smoothMy
      const R = RADIUS_FRAC * Math.max(cw, ch)
      const r2 = R * R
      const lensPush = LENS_FRAC * R
      const dotRGB = isDarkRef.current ? '255,255,255' : '28,25,22'
      const baseA = isDarkRef.current ? BASE_A : 0.22
      const lineRestA = isDarkRef.current ? LINE_A_DARK : LINE_A_LIGHT

      for (const d of dots) {
        const dx = d.x - mx
        const dy = d.y - my
        const dist2 = dx * dx + dy * dy
        const dist = Math.sqrt(dist2)

        const tgtB = dist2 < r2 ? Math.exp(-dist2 / (r2 * 0.45)) : 0
        d.b += (tgtB > d.b ? 0.16 : 0.07) * (tgtB - d.b)
        if (d.b < 0.004) d.b = 0

        const tgtL = dist < R ? Math.sin(Math.PI * (dist / R)) : 0
        d.l += (tgtL > d.l ? 0.18 : 0.08) * (tgtL - d.l)
        if (d.l < 0.004) d.l = 0

        if (dist > 0.5 && d.l > 0.004) {
          const push = lensPush * d.l
          const ux = dx / dist
          const uy = dy / dist
          d.px = d.x + ux * push
          d.py = d.y + uy * push
        } else {
          d.px = d.x
          d.py = d.y
        }
      }

      const allSegs = [...hSegs, ...vSegs]
      for (const seg of allSegs) {
        const segB = (seg.a.b + seg.b.b) / 2
        const lineA = lineRestA + (PEAK_A - lineRestA) * segB
        ctx.strokeStyle = `rgba(${dotRGB},${lineA.toFixed(3)})`
        ctx.lineWidth = 0.5 + segB * 0.6
        ctx.beginPath()
        ctx.moveTo(seg.a.px, seg.a.py)
        ctx.lineTo(seg.b.px, seg.b.py)
        ctx.stroke()
      }

      for (const d of dots) {
        const alpha = baseA + (PEAK_A - baseA) * d.b
        const sz = 1 + d.b * 2.2
        ctx.fillStyle = `rgba(${dotRGB},${alpha.toFixed(2)})`
        ctx.fillRect(d.px - sz / 2, d.py - sz / 2, sz, sz)
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t = e.touches[0]; if (t) updateMouse(t.clientX, t.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas
        ref={canvasRef}
        className="absolute inset-0"
        style={{ width: '100%', height: '100%' }}
      />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Grid Lines
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to illuminate
        </span>
      </div>
    </div>
  )
}

```

---

## Distortion Grid

Category: Backgrounds
Slug: `distortion-grid`
URL: https://aicanvas.me/components/distortion-grid

An animated grid background. Thin lines undulate in slow sweeping waves, and hovering repels the grid fabric outward from your cursor.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/distortion-grid
```

```tsx
'use client'

/**
 * Renders a canvas grid of curved lines with ambient wave distortion.
 * Pointer proximity increases the wave amplitude and repels nearby lines.
 */

import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect


const SPACING      = 32     // tune: raise to spread the grid points farther apart
const BASE_AMP     = 30     // tune: raise to increase the resting distortion
const WAVE_FREQ    = 0.007  // tune: raise to shorten the wave length
const HOVER_BOOST  = 1.5    // tune: raise to amplify the hover distortion
const LOCAL_AMP    = 60     // tune: raise to strengthen pointer repulsion
const LOCAL_RADIUS = 260    // tune: raise to widen the pointer influence
const LINE_A_DARK  = 0.55
const LINE_A_LIGHT = 0.75

export default function DistortionGrid() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx    = canvas.getContext('2d')!

    let cols = 0, rows = 0, cw = 0, ch = 0
    let ox = 0, oy = 0
    let animId  = 0
    let alive   = true
    let t       = 0
    let hoverStr = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      cols = Math.floor(cw / SPACING) + 2
      rows = Math.floor(ch / SPACING) + 2
      ox   = (cw % SPACING) / 2
      oy   = (ch % SPACING) / 2
    }

    function frame() {
      if (!alive) return
      t += 0.002

      const hasHover = mouseRef.current !== null
      hoverStr += ((hasHover ? 1 : 0) - hoverStr) * (hasHover ? 0.018 : 0.010)

      ctx.clearRect(0, 0, cw, ch)

      const dotRGB = isDarkRef.current ? '255,255,255' : '28,25,22'
      const lineA  = isDarkRef.current ? LINE_A_DARK : LINE_A_LIGHT

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const r2 = LOCAL_RADIUS * LOCAL_RADIUS

      const amp = BASE_AMP * (1 + hoverStr * HOVER_BOOST)

      function displaced(c: number, r: number): [number, number] {
        const rx = ox + c * SPACING
        const ry = oy + r * SPACING

        const wx = amp * (Math.sin(rx * WAVE_FREQ + t) + Math.sin(ry * WAVE_FREQ * 0.6 + t * 1.3) * 0.55)
        const wy = amp * (Math.cos(ry * WAVE_FREQ * 0.8 + t * 1.15) + Math.cos(rx * WAVE_FREQ * 0.5 + t * 0.75) * 0.55)

        const dx = rx - mx
        const dy = ry - my
        const dist2 = dx * dx + dy * dy
        let px = 0, py = 0
        if (dist2 < r2 * 4) {
          const push = LOCAL_AMP * Math.exp(-dist2 / (r2 * 0.5))
          const dist = Math.sqrt(dist2) || 1
          px = (dx / dist) * push
          py = (dy / dist) * push
        }

        return [rx + wx + px, ry + wy + py]
      }

      ctx.strokeStyle = `rgba(${dotRGB},${lineA.toFixed(3)})`
      ctx.lineWidth = 0.5

      for (let r = 0; r < rows; r++) {
        ctx.beginPath()
        const [x0, y0] = displaced(0, r)
        ctx.moveTo(x0, y0)
        for (let c = 1; c < cols; c++) {
          const [x, y] = displaced(c, r)
          ctx.lineTo(x, y)
        }
        ctx.stroke()
      }

      for (let c = 0; c < cols; c++) {
        ctx.beginPath()
        const [x0, y0] = displaced(c, 0)
        ctx.moveTo(x0, y0)
        for (let r = 1; r < rows; r++) {
          const [x, y] = displaced(c, r)
          ctx.lineTo(x, y)
        }
        ctx.stroke()
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg         = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t2 = e.touches[0]; if (t2) updateMouse(t2.clientX, t2.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas ref={canvasRef} className="absolute inset-0" style={{ width: '100%', height: '100%' }} />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Distortion Grid
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to warp
        </span>
      </div>
    </div>
  )
}

```

---

## Wave Lines

Category: Backgrounds
Slug: `wave-lines`
URL: https://aicanvas.me/components/wave-lines

An animated line background. Dense vertical lines ripple with two layered sine waves, bunching and breathing. Hover to send waves across the canvas.

Install (free account):

```bash
npx shadcn@latest add @aicanvas/wave-lines
```

```tsx
'use client'

/**
 * Renders a theme-aware canvas field of vertically sampled wave lines.
 * Pointer presence amplifies the field and repels nearby line segments.
 */
import { useLayoutEffect, useEffect, useRef, useState } from 'react'
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect



// tune: raise to spread the lines farther apart
const SPACING      = 32     
// tune: lower to smooth each line with more samples
const ROW_STEP     = 4      
// tune: raise to increase resting wave amplitude
const AMP          = 18     
const FREQ_Y       = 0.015  
const FREQ_X       = 0.006  
// tune: raise to amplify the field further on hover
const HOVER_BOOST  = 5.0    
// tune: raise to strengthen local pointer repulsion
const LOCAL_AMP    = 58     
// tune: raise to widen local pointer repulsion
const LOCAL_RADIUS = 220    
const LINE_A_DARK  = 0.55
const LINE_A_LIGHT = 0.75

export default function WaveLines() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef    = useRef<HTMLCanvasElement>(null)
  const mouseRef     = useRef<{ x: number; y: number } | null>(null)
  const isDarkRef = useRef(typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)
  const [isDark, setIsDark] = useState(() => typeof window !== 'undefined' ? document.documentElement.classList.contains('dark') : false)

  
  useIsomorphicLayoutEffect(() => {
    const el = containerRef.current
    if (!el) return
    const check = () => {
      const card = el.closest('[data-card-theme]')
      const dark = card
        ? card.classList.contains('dark')
        : document.documentElement.classList.contains('dark')
      setIsDark(dark)
      isDarkRef.current = dark
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    const cardWrapper = el.closest('[data-card-theme]')
    if (cardWrapper) observer.observe(cardWrapper, { attributes: true, attributeFilter: ['class'] })
    return () => observer.disconnect()
  }, [])

  
  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx    = canvas.getContext('2d')!

    let cols = 0, rows = 0, cw = 0, ch = 0
    let ox = 0
    let animId  = 0
    let alive   = true
    let t       = 0
    let hoverStr = 0

    function build() {
      const dpr  = window.devicePixelRatio || 1
      const rect = canvas.getBoundingClientRect()
      cw = rect.width
      ch = rect.height
      if (!cw || !ch) return
      canvas.width  = Math.round(cw * dpr)
      canvas.height = Math.round(ch * dpr)
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      cols = Math.ceil(cw / SPACING) + 2
      rows = Math.ceil(ch / ROW_STEP) + 1
      ox   = (cw % SPACING) / 2
    }

    function frame() {
      if (!alive) return
      t += 0.003

      
      const hasHover = mouseRef.current !== null
      hoverStr += ((hasHover ? 1 : 0) - hoverStr) * (hasHover ? 0.018 : 0.010)

      ctx.clearRect(0, 0, cw, ch)

      const dotRGB = isDarkRef.current ? '255,255,255' : '28,25,22'
      const lineA  = isDarkRef.current ? LINE_A_DARK : LINE_A_LIGHT
      const amp    = AMP * (1 + hoverStr * HOVER_BOOST)

      const mx = mouseRef.current?.x ?? -99999
      const my = mouseRef.current?.y ?? -99999
      const r2 = LOCAL_RADIUS * LOCAL_RADIUS

      ctx.strokeStyle = `rgba(${dotRGB},${lineA.toFixed(3)})`
      ctx.lineWidth = 0.8

      
      for (let c = 0; c < cols; c++) {
        const rx = ox + c * SPACING
        ctx.beginPath()

        let prevX = 0, prevY = 0

        for (let r = 0; r <= rows; r++) {
          const ry = r * ROW_STEP

          
          const wx = amp * Math.sin(ry * FREQ_Y + rx * FREQ_X + t)
                   + amp * 0.38 * Math.sin(ry * FREQ_Y * 1.6 + rx * FREQ_X * 1.4 + t * 1.5 + 1.1)
          
          const wy = amp * 0.12 * Math.cos(rx * FREQ_X * 0.9 + ry * FREQ_Y * 0.4 + t * 0.8)

          
          const dx = rx - mx
          const dy = ry - my
          const dist2 = dx * dx + dy * dy
          let px = 0, py = 0
          if (dist2 < r2 * 4) {
            const push = LOCAL_AMP * Math.exp(-dist2 / (r2 * 0.5))
            const dist = Math.sqrt(dist2) || 1
            px = (dx / dist) * push
            py = (dy / dist) * push
          }

          const x = rx + wx + px
          const y = ry + wy + py

          if (r === 0) {
            ctx.moveTo(x, y)
          } else {
            
            const mx2 = (prevX + x) / 2
            const my2 = (prevY + y) / 2
            ctx.quadraticCurveTo(prevX, prevY, mx2, my2)
          }
          prevX = x
          prevY = y
        }
        
        ctx.lineTo(prevX, prevY)
        ctx.stroke()
      }

      animId = requestAnimationFrame(frame)
    }

    build()
    frame()

    const ro = new ResizeObserver(build)
    ro.observe(canvas.parentElement!)

    return () => {
      alive = false
      cancelAnimationFrame(animId)
      ro.disconnect()
    }
  }, [])

  function updateMouse(clientX: number, clientY: number) {
    const rect = canvasRef.current?.getBoundingClientRect()
    if (!rect) return
    mouseRef.current = { x: clientX - rect.left, y: clientY - rect.top }
  }

  const bg         = isDark ? '#110F0C' : '#F5F1EA'
  const labelColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(28,25,22,0.45)'
  const hintColor  = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(28,25,22,0.22)'

  return (
    <div
      ref={containerRef}
      className="relative min-h-screen w-full overflow-hidden"
      style={{ background: bg }}
      onMouseMove={(e) => updateMouse(e.clientX, e.clientY)}
      onMouseLeave={() => { mouseRef.current = null }}
      onTouchMove={(e) => { const t2 = e.touches[0]; if (t2) updateMouse(t2.clientX, t2.clientY) }}
      onTouchEnd={() => { mouseRef.current = null }}
    >
      <canvas ref={canvasRef} className="absolute inset-0" style={{ width: '100%', height: '100%' }} />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2">
        <span style={{ color: labelColor, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Wave Lines
        </span>
        <span style={{ color: hintColor, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          hover to fold
        </span>
      </div>
    </div>
  )
}

```

---

## 3D Product Card

Category: Cards & Modals
Slug: `3d-product-card`
URL: https://aicanvas.me/components/3d-product-card

An e-commerce product card with a real WebGL turntable. At rest it's a normal shop card (product, name, price, add-to-cart); hovering tilts the card into a 3D display floor while the product lifts and spins so shoppers can inspect it from any angle. Drag to orbit, pick a finish swatch to recolor the upholstery live, drop in your own .glb, adapts to light and dark themes.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/3d-product-card
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/3d-product-card._

---

## Filter Menu

Category: Inputs & Controls
Slug: `filter-menu`
URL: https://aicanvas.me/components/filter-menu

A skeuomorphic pill that expands into a multi-select filter checklist with Apply.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/filter-menu
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/filter-menu._

---

## 3D Gem Pricing Section

Category: Blocks
Slug: `3d-gem-pricing-section`
URL: https://aicanvas.me/components/3d-gem-pricing-section

Three pricing cards, each topped by a still faceted gem that grows and spins on hover.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/3d-gem-pricing-section
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/3d-gem-pricing-section._

---

## Curved Frame Carousel

Category: Blocks
Slug: `curved-frame-carousel`
URL: https://aicanvas.me/components/curved-frame-carousel

A fixed frame masks a drifting photo deck. Drag it and panels hinge into 3D at the edge.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/curved-frame-carousel
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/curved-frame-carousel._

---

## Perspective Showcase Hero

Category: Blocks
Slug: `perspective-showcase-hero`
URL: https://aicanvas.me/components/perspective-showcase-hero

A hero section pairing a split editorial header with an endless CSS 3D carousel, no WebGL: cards tilt continuously with distance from the centre so the row reads as one arc, images counter-zoom inside their frames, and one velocity loop drives drift, drag, wheel, and keyboard input. Fully configurable via typed props.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/perspective-showcase-hero
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/perspective-showcase-hero._

---

## Fluid Simulation Hero

Category: Blocks
Slug: `fluid-simulation-hero`
URL: https://aicanvas.me/components/fluid-simulation-hero

A full bleed hero on a real time WebGL fluid simulation. The surface blooms into being on load, and the pointer stirs the dye.

Install (Premium, requires an AI Canvas token):

```bash
npx shadcn@latest add @aicanvas/fluid-simulation-hero
```

_Premium component — source is gated. Preview, details, and install at https://aicanvas.me/components/fluid-simulation-hero._