Button

"use client"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Arc, ArcLayer } from "@/components/glow/arc"
import { Grain } from "@/components/texture/grain"
import { Button } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Low Water Festival featured set",
  eyebrow: "Low Water / Bellingham / May 21–23",
  stage: "Friday night at the Pier Stage",
  when: "May 21, 2027 · 8:15–9 pm PDT",
  cta: "Add set to calendar",
  title: "Harbor",
  aside: "Static",
} as const

const SET_CALENDAR = [
  "BEGIN:VCALENDAR",
  "VERSION:2.0",
  "PRODID:-//Low Water//Festival Sets//EN",
  "BEGIN:VEVENT",
  "UID:harbor-static-20270521@lowwater.example",
  "DTSTAMP:20261103T120000Z",
  "DTSTART:20270522T031500Z",
  "DTEND:20270522T040000Z",
  "SUMMARY:Harbor Static at Low Water",
  "LOCATION:Pier Stage - Bellingham WA",
  "DESCRIPTION:Low Water Festival. Gates open at 5 pm.",
  "END:VEVENT",
  "END:VCALENDAR",
  "",
].join("\r\n")

/** A frosted button over a large Arc and grain on a festival card that downloads a calendar file for the set. */
export default function ButtonFrostedSetReminder() {
  return (
    <section
      aria-label={COPY.label}
      className="theme-clay relative isolate w-full max-w-lg overflow-hidden bg-background p-7 text-foreground [--font-display:var(--font-hanken-grotesk)]"
    >
      <ArcLayer>
        <Arc
          variant="outline"
          size={370}
          left="100%"
          top="90%"
          from={210}
          sweep={180}
          width={22}
          color="oklch(0.6 0.13 35 / 0.5)"
          track="oklch(0.4 0.07 25 / 0.3)"
          trackWidth={1}
        />
      </ArcLayer>
      <Grain variant="single" opacity={0.22} />
      <div className="relative">
        <Eyebrow
          variant="caps"
          tone="ink"
          className="font-semibold tracking-[0.2em]"
        >
          {COPY.eyebrow}
        </Eyebrow>
        <p className="mt-10 text-sm text-foreground">{COPY.stage}</p>
        <h3 className="mt-3 font-display text-5xl leading-[0.95] tracking-tight">
          {COPY.title}
          <br />
          {COPY.aside}
        </h3>
        <p className="mt-5 text-sm">{COPY.when}</p>
        <Button
          size="lg"
          className="relative mt-7 rounded-md border-current/25 bg-background/15 text-foreground shadow-md backdrop-blur-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:opacity-20 after:shadow-[inset_0_0_2px_1px_currentColor] hover:bg-background/25"
          onClick={() => {
            const link = document.createElement("a")
            link.href = `data:text/calendar;charset=utf-8,${encodeURIComponent(SET_CALENDAR)}`
            link.download = "harbor-static-low-water.ics"
            document.body.appendChild(link)
            link.click()
            link.remove()
          }}
        >
          {COPY.cta}
        </Button>
      </div>
    </section>
  )
}

import { useId, type ComponentProps, type CSSProperties } from "react"
import { cn } from "cn"

// One turn for every arc, backwards when ccw; reduced motion holds it still.
const ARC_CSS = `@keyframes arc-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: no-preference){
[data-slot="arc-layer"][data-animate] [data-slot="arc"],[data-slot="arc"][data-animate]{animation:arc-turn var(--arc-duration) linear infinite var(--arc-direction)}}`

const LOOKS = {
  default: {
    from: 150,
    sweep: 150,
    color: "oklch(0.80 0.06 350 / 0.65)",
    width: 0,
    seconds: 90,
  },
  outline: {
    from: 0,
    sweep: 108,
    color: "oklch(0.842 0.061 196)",
    width: 2.5,
    seconds: 26,
  },
  traveling: {
    from: 0,
    sweep: 90,
    color: "oklch(0.94 0.18 39)",
    width: 1,
    seconds: 6,
  },
} as const

const finite = (n: number | undefined, fallback: number) =>
  n !== undefined && Number.isFinite(n) ? n : fallback

/**
 * A layer for `Arc` rings behind a section's content. It fills its positioned
 * parent, clips any ring that runs past its edge, and ignores the pointer.
 */
function ArcLayer({
  animate = false,
  className,
  ...props
}: ComponentProps<"div"> & {
  /**
   * Turns every `Arc` inside, each at its own speed and direction. Reduced
   * motion holds them still.
   */
  animate?: boolean
}) {
  return (
    <div
      data-slot="arc-layer"
      data-animate={animate || undefined}
      className={cn(
        "pointer-events-none absolute inset-0 overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

/**
 * A ring of light, lit along part of its circle, for the background behind a
 * section. Put it in an `ArcLayer` or another positioned parent: `left` and
 * `top` set its center, and a ring often sits partly past the frame's edge.
 *
 * It is hidden from assistive tech and ignores the pointer. When animated it
 * makes one full turn per `duration`; reduced motion holds it still.
 */
function Arc({
  variant = "default",
  size = 900,
  left = "50%",
  top = "50%",
  from,
  sweep,
  color,
  fade = "oklch(0.60 0.05 340 / 0.25)",
  track = "oklch(0.842 0.061 196 / 0.14)",
  width,
  trackWidth = 1.5,
  turn = "cw",
  animate = false,
  duration,
  className,
  style,
  ...props
}: Omit<ComponentProps<"div">, "color"> & {
  /**
   * `default` is a thin, soft ring that brightens and fades along its lit
   * part and lightens what is under it. `outline` is a bright stroke that
   * fades toward its end, over a faint full ring. `traveling` is a single
   * highlight that builds slowly and drops off at its end.
   */
  variant?: keyof typeof LOOKS
  /** Diameter in px, or any CSS length such as "80cqw". */
  size?: number | string
  /** The center's distance from the parent's left edge; any CSS length. */
  left?: string
  /** The center's distance from the parent's top edge; any CSS length. */
  top?: string
  /**
   * Where the lit part starts, in degrees clockwise from 12 o'clock. On
   * `traveling` it is where the lit part ends.
   */
  from?: number
  /** How far the lit part runs, in degrees from 0 to 360. */
  sweep?: number
  /** The color of the lit part. */
  color?: string
  /** The dimmer color the lit part fades through. Used by `default`. */
  fade?: string
  /** The color of the faint full ring. Used by `outline`. */
  track?: string
  /** Thickness of the lit stroke in px. Used by `outline` and `traveling`. */
  width?: number
  /** Thickness of the faint full ring in px. Used by `outline`. */
  trackWidth?: number
  /** Which way the ring turns when animated: clockwise or counterclockwise. */
  turn?: "cw" | "ccw"
  /** Turns this ring on its own. Reduced motion holds it still. */
  animate?: boolean
  /**
   * Seconds per full turn. Defaults to 90 for `default` (120 when it turns
   * counterclockwise), 26 for `outline` and 6 for `traveling`.
   */
  duration?: number
}) {
  const look = LOOKS[variant]
  const gradientId = `arc-${useId().replace(/[^\w-]/g, "")}`
  const start = finite(from, look.from)
  const lit = Math.min(360, Math.max(0, finite(sweep, look.sweep)))
  const ink = color ?? look.color
  const stroke = Math.max(0, finite(width, look.width))
  const seconds =
    duration !== undefined && Number.isFinite(duration) && duration > 0
      ? duration
      : variant === "default" && turn === "ccw"
        ? 120
        : look.seconds
  const diameter = typeof size === "number" ? `${size}px` : size

  const paint: CSSProperties =
    variant === "default"
      ? {
          background: `conic-gradient(from ${start}deg, transparent 0deg, ${ink} ${lit * 0.37}deg, ${fade} ${lit * 0.63}deg, transparent ${lit}deg)`,
          mask: "radial-gradient(closest-side in srgb, transparent calc(100% - 2px), oklch(0 0 0) calc(100% - 0.5px), transparent calc(100% + 1px))",
        }
      : variant === "traveling"
        ? {
            padding: `${stroke}px`,
            background: `conic-gradient(from ${start}deg, transparent 0deg, transparent ${360 - lit}deg, ${ink} ${360 - lit / 4}deg, transparent 360deg)`,
            mask: "linear-gradient(in srgb, oklch(0 0 0) 0 0) content-box, linear-gradient(in srgb, oklch(0 0 0) 0 0)",
            maskComposite: "exclude",
          }
        : { rotate: start ? `${start}deg` : undefined }

  // The outline stroke fades along its own chord, clamped at a half turn.
  const end = (Math.min(lit, 180) * Math.PI) / 180

  return (
    <div
      data-slot="arc"
      data-variant={variant}
      data-turn={turn}
      data-animate={animate || undefined}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute rounded-full",
        variant === "default" && "mix-blend-screen",
        className
      )}
      style={
        {
          left,
          top,
          width: size,
          height: size,
          margin: `calc(${diameter} / -2) 0 0 calc(${diameter} / -2)`,
          "--arc-duration": `${seconds}s`,
          "--arc-direction": turn === "ccw" ? "reverse" : "normal",
          ...paint,
          ...style,
        } as CSSProperties
      }
      {...props}
    >
      <style href="arc" precedence="medium">
        {ARC_CSS}
      </style>
      {variant === "outline" && (
        <svg className="block size-full overflow-visible">
          <defs>
            <linearGradient
              id={gradientId}
              x1="0.5"
              y1="0"
              x2={0.5 + 0.5 * Math.sin(end)}
              y2={0.5 - 0.5 * Math.cos(end)}
            >
              <stop offset="0" stopColor={ink} />
              <stop offset="0.55" stopColor={ink} />
              <stop offset="1" stopColor={ink} stopOpacity="0" />
            </linearGradient>
          </defs>
          <circle
            cx="50%"
            cy="50%"
            r="50%"
            fill="none"
            stroke={track}
            strokeWidth={trackWidth}
          />
          {lit > 0 && (
            <circle
              cx="50%"
              cy="50%"
              r="50%"
              fill="none"
              stroke={`url(#${gradientId})`}
              strokeWidth={stroke}
              strokeLinecap="round"
              pathLength={360}
              strokeDasharray={`${lit} ${360 - lit}`}
              strokeDashoffset={90}
            />
          )}
        </svg>
      )}
    </div>
  )
}

export { Arc, ArcLayer }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`