@kongyo2/cards-css 0.1.0

package/src/styles/effects/holo.css

@@ -0,0 +1,127 @@
+.holo-card[data-effect="holo"] .holo-card__shine {
+  --scanlines-space: 1px;
+  --scanlines-light: #666;
+  --scanlines-dark: black;
+
+  --bars: 3%;
+  --bar-color: hsla(0, 0%, 70%, 1);
+  --bar-bg: hsla(0, 0%, 0%, 1);
+
+  background-image:
+    repeating-linear-gradient(
+      110deg,
+      var(--violet),
+      var(--blue),
+      var(--green),
+      var(--yellow),
+      var(--red),
+      var(--violet),
+      var(--blue),
+      var(--green),
+      var(--yellow),
+      var(--red),
+      var(--violet),
+      var(--blue),
+      var(--green),
+      var(--yellow),
+      var(--red)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--scanlines-dark) calc(var(--scanlines-space) * 0),
+      var(--scanlines-dark) calc(var(--scanlines-space) * 2),
+      var(--scanlines-light) calc(var(--scanlines-space) * 2),
+      var(--scanlines-light) calc(var(--scanlines-space) * 4)
+    );
+
+  background-position:
+    calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
+    center center;
+
+  background-size:
+    400% 400%,
+    cover;
+
+  background-blend-mode: overlay;
+  filter: brightness(1.1) contrast(1.1) saturate(1.2);
+  mix-blend-mode: color-dodge;
+}
+
+.holo-card[data-effect="holo"] .holo-card__shine::before {
+  content: "";
+
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      var(--bar-bg) calc(var(--bars) * 2),
+      var(--bar-color) calc(var(--bars) * 3),
+      var(--bar-bg) calc(var(--bars) * 3.5),
+      var(--bar-color) calc(var(--bars) * 4),
+      var(--bar-bg) calc(var(--bars) * 5),
+      var(--bar-bg) calc(var(--bars) * 14)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--bar-bg) calc(var(--bars) * 2),
+      var(--bar-color) calc(var(--bars) * 3),
+      var(--bar-bg) calc(var(--bars) * 3.5),
+      var(--bar-color) calc(var(--bars) * 4),
+      var(--bar-bg) calc(var(--bars) * 5),
+      var(--bar-bg) calc(var(--bars) * 10)
+    );
+
+  background-position:
+    calc((((50% - var(--background-x)) * 1.65) + 50%) + (var(--background-y) * 0.5)) var(--background-x),
+    calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75)) var(--background-y);
+
+  background-size:
+    200% 200%,
+    200% 200%;
+
+  background-blend-mode: screen;
+  filter: brightness(1.15) contrast(1.1);
+  mix-blend-mode: hard-light;
+}
+
+.holo-card[data-effect="holo"] .holo-card__shine::after {
+  content: "";
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsla(0, 0%, 90%, 0.8) 0%,
+    hsla(0, 0%, 78%, 0.1) 25%,
+    hsl(0, 0%, 0%) 90%
+  );
+
+  background-position: center center;
+  background-size: cover;
+
+  mix-blend-mode: luminosity;
+  filter: brightness(0.6) contrast(4);
+}
+
+@media screen and (max-width: 900px) {
+  .holo-card[data-effect="holo"] .holo-card__shine {
+    --scanlines-space: 0.5px;
+  }
+}
+
+.holo-card[data-effect="holo"] .holo-card__glare {
+  opacity: calc(var(--card-opacity) * 0.8);
+  filter: brightness(0.8) contrast(1.5);
+  mix-blend-mode: overlay;
+}
+
+.holo-card[data-effect="holo"] .holo-card__glare::after {
+  content: "";
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsl(180, 100%, 95%) 5%,
+    hsla(0, 0%, 39%, 0.25) 55%,
+    hsla(0, 0%, 0%, 0.36) 110%
+  );
+
+  mix-blend-mode: overlay;
+  filter: brightness(0.6) contrast(3);
+}

package/src/styles/effects/reverse.css

@@ -0,0 +1,55 @@
+.holo-card[data-effect="reverse"] {
+  --foil-brightness: 0.55;
+}
+
+.holo-card[data-effect="reverse"] .holo-card__shine {
+  background-image:
+    radial-gradient(circle at var(--pointer-x) var(--pointer-y), #fff 5%, #000 50%, #fff 80%),
+    linear-gradient(-45deg, #000 15%, #fff, #000 85%), var(--foil);
+
+  background-blend-mode: soft-light, difference;
+  background-size:
+    120% 120%,
+    200% 200%,
+    cover;
+  background-position:
+    center center,
+    calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
+    center center;
+
+  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
+  mix-blend-mode: color-dodge;
+
+  opacity: calc((1.5 * var(--card-opacity)) - var(--pointer-from-center));
+}
+
+.holo-card[data-effect="reverse"] .holo-card__glare {
+  opacity: var(--card-opacity);
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsla(0, 0%, 100%, 0.8) 10%,
+    hsla(0, 0%, 100%, 0.5) 20%,
+    hsla(0, 0%, 0%, 0.75) 90%
+  );
+
+  filter: brightness(0.7) contrast(1.5);
+}
+
+.holo-card[data-effect="reverse"] .holo-card__glare::after {
+  content: "";
+  opacity: var(--card-opacity);
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsl(0, 0%, 100%) 10%,
+    hsla(0, 0%, 100%, 0.5) 20%,
+    hsla(0, 0%, 0%, 0.5) 120%
+  );
+
+  filter: brightness(1) contrast(1.5);
+}
+
+.holo-card[data-effect="reverse"]:not(.holo-card--masked) .holo-card__shine {
+  --foil: none;
+}

package/src/styles/index.css

@@ -0,0 +1,5 @@
+@import "./base.css";
+@import "./effects/holo.css";
+@import "./effects/reverse.css";
+@import "./effects/cosmos.css";
+@import "./effects/glitter.css";

package/src/subscribers.ts

@@ -0,0 +1,30 @@
+export class Subscribers<T> {
+  private readonly fns = new Set<(value: T) => void>();
+  private readonly getCurrent: () => T;
+
+  constructor(getCurrent: () => T) {
+    this.getCurrent = getCurrent;
+  }
+
+  subscribe(fn: (value: T) => void): () => void {
+    this.fns.add(fn);
+    fn(this.getCurrent());
+    return () => {
+      this.fns.delete(fn);
+    };
+  }
+
+  emit(value: T): void {
+    for (const fn of this.fns) {
+      fn(value);
+    }
+  }
+
+  get size(): number {
+    return this.fns.size;
+  }
+
+  clear(): void {
+    this.fns.clear();
+  }
+}

package/src/textures.ts

@@ -0,0 +1,310 @@
+export interface TextureOptions {
+  seed?: number;
+}
+
+export interface Textures {
+  grain: string;
+  glitter: string;
+  cosmosBottom: string;
+  cosmosMiddle: string;
+  cosmosTop: string;
+}
+
+export const DEFAULT_TEXTURE_SEED = 0x9e3779b9;
+
+const mulberry32 = (seed: number): (() => number) => {
+  let a = seed >>> 0;
+  return () => {
+    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 svgToDataUri = (svg: string): string => {
+  const cleaned = svg
+    .replace(/>\s+</g, "><")
+    .replace(/\s{2,}/g, " ")
+    .trim();
+  const encoded = cleaned
+    .replace(/%/g, "%25")
+    .replace(/</g, "%3C")
+    .replace(/>/g, "%3E")
+    .replace(/#/g, "%23")
+    .replace(/&/g, "%26")
+    .replace(/"/g, "'")
+    .replace(/\n/g, "%0A");
+  return `data:image/svg+xml,${encoded}`;
+};
+
+const svgDocument = (width: number, height: number, defs: string, body: string): string =>
+  svgToDataUri(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 ${width} ${height}'>` +
+      (defs ? `<defs>${defs}</defs>` : "") +
+      body +
+      `</svg>`,
+  );
+
+const pick = <T>(rng: () => number, items: readonly T[]): T => {
+  const value = items[Math.floor(rng() * items.length)];
+  return value ?? (items[0] as T);
+};
+
+const rand = (rng: () => number, min: number, max: number): number => min + rng() * (max - min);
+
+const circle = (
+  x: number,
+  y: number,
+  r: number,
+  fill: string,
+  opacity: number,
+  opts: { rDigits?: number; filter?: string } = {},
+): string => {
+  const filter = opts.filter ? ` filter='url(${opts.filter})'` : "";
+  return `<circle cx='${x.toFixed(1)}' cy='${y.toFixed(1)}' r='${r.toFixed(opts.rDigits ?? 2)}' fill='${fill}' opacity='${opacity.toFixed(2)}'${filter}/>`;
+};
+
+const gaussianBlurFilter = (id: string, std: number, margin: string, size: string): string =>
+  `<filter id='${id}' x='${margin}' y='${margin}' width='${size}' height='${size}'><feGaussianBlur stdDeviation='${std}'/></filter>`;
+
+const discreteTable = (keep: number, steps = 32): string => {
+  const ones = Math.min(steps, Math.max(1, Math.round(steps * keep)));
+  const cells: string[] = [];
+  for (let i = 0; i < steps - ones; i += 1) {
+    cells.push("0");
+  }
+  for (let i = 0; i < ones; i += 1) {
+    cells.push("1");
+  }
+  return cells.join(" ");
+};
+
+interface SpeckleLayer {
+  freq: number;
+  keep: number;
+  color: string;
+  opacity: number;
+}
+
+const speckleField = (
+  idBase: string,
+  seed: number,
+  layers: readonly SpeckleLayer[],
+  stitch = true,
+): { defs: string; body: string } => {
+  let defs = "";
+  let body = "";
+  const stitchTiles = stitch ? "stitch" : "noStitch";
+  layers.forEach((layer, index) => {
+    const id = `${idBase}${index}`;
+    defs +=
+      `<filter id='${id}' x='0%' y='0%' width='100%' height='100%'>` +
+      `<feTurbulence type='fractalNoise' baseFrequency='${layer.freq}' numOctaves='1' seed='${(seed + index * 37) % 9973}' stitchTiles='${stitchTiles}' result='n'/>` +
+      `<feColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/>` +
+      `<feComponentTransfer in='a' result='m'><feFuncA type='discrete' tableValues='${discreteTable(layer.keep)}'/></feComponentTransfer>` +
+      `<feComposite in='SourceGraphic' in2='m' operator='in'/>` +
+      `</filter>`;
+    body += `<rect width='100%' height='100%' fill='${layer.color}' filter='url(#${id})' opacity='${layer.opacity}'/>`;
+  });
+  return { defs, body };
+};
+
+const clusterBlobs = (
+  rng: () => number,
+  width: number,
+  height: number,
+  count: number,
+  palette: readonly string[],
+  blurId: string,
+  radius: [number, number],
+  opacity: [number, number],
+): string => {
+  let blobs = "";
+  for (let i = 0; i < count; i += 1) {
+    blobs += circle(
+      rng() * width,
+      rng() * height,
+      rand(rng, radius[0], radius[1]),
+      pick(rng, palette),
+      rand(rng, opacity[0], opacity[1]),
+      { rDigits: 1 },
+    );
+  }
+  return `<g filter='url(${blurId})'>${blobs}</g>`;
+};
+
+const brightStars = (rng: () => number, width: number, height: number, count: number, glowId: string): string => {
+  let stars = "";
+  for (let i = 0; i < count; i += 1) {
+    const x = rng() * width;
+    const y = rng() * height;
+    const r = rand(rng, 1.1, 2.6);
+    stars +=
+      circle(x, y, r * 2.6, "#ffffff", 0.14, { rDigits: 1, filter: glowId }) +
+      circle(x, y, r, "#ffffff", rand(rng, 0.75, 1));
+  }
+  return stars;
+};
+
+const ringClusters = (rng: () => number, width: number, height: number, count: number, color: string): string => {
+  let out = "";
+  for (let i = 0; i < count; i += 1) {
+    const cx = rng() * width;
+    const cy = rng() * height;
+    const radius = rand(rng, 14, 30);
+    const dots = 26 + Math.floor(rng() * 22);
+    for (let k = 0; k < dots; k += 1) {
+      const angle = rng() * Math.PI * 2;
+      const rr = radius * rand(rng, 0.78, 1.28);
+      out += circle(
+        cx + Math.cos(angle) * rr,
+        cy + Math.sin(angle) * rr * 1.05,
+        rand(rng, 0.5, 1.5),
+        color,
+        rand(rng, 0.4, 0.9),
+      );
+    }
+  }
+  return out;
+};
+
+const COSMOS_W = 512;
+const COSMOS_H = 716;
+
+const cosmosDefs = (extraDefs: string): string =>
+  gaussianBlurFilter("blur", 2.6, "-30%", "160%") + gaussianBlurFilter("glow", 2.4, "-200%", "500%") + extraDefs;
+
+export const grainTexture = (seed: number): string =>
+  svgDocument(
+    200,
+    200,
+    `<filter id='grain' x='0%' y='0%' width='100%' height='100%'>` +
+      `<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='${seed % 9973}' stitchTiles='stitch' result='n'/>` +
+      `<feColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/>` +
+      `<feComponentTransfer in='a' result='m'><feFuncA type='discrete' tableValues='${discreteTable(0.28)}'/></feComponentTransfer>` +
+      `<feFlood flood-color='#ffffff' result='w'/>` +
+      `<feComposite in='w' in2='m' operator='in'/>` +
+      `</filter>`,
+    `<rect width='100%' height='100%' fill='#000000'/>` +
+      `<rect width='100%' height='100%' filter='url(#grain)' opacity='0.4'/>`,
+  );
+
+export const glitterTexture = (seed: number): string => {
+  const { defs, body } = speckleField("gl", seed, [
+    { freq: 0.82, keep: 0.42, color: "#8f8f8f", opacity: 0.85 },
+    { freq: 0.7, keep: 0.22, color: "#dcdcdc", opacity: 1 },
+    { freq: 0.6, keep: 0.08, color: "#ffffff", opacity: 1 },
+  ]);
+  const rng = mulberry32(seed + 99);
+  const flares = brightStars(rng, 240, 240, 16, "#glow");
+  return svgDocument(
+    240,
+    240,
+    `${gaussianBlurFilter("glow", 1.5, "-200%", "500%")}${defs}`,
+    `<rect width='100%' height='100%' fill='#050505'/>${body}${flares}`,
+  );
+};
+
+const cosmosLayer = (
+  idBase: string,
+  seed: number,
+  layers: readonly SpeckleLayer[],
+  paint: (rng: () => number, body: string) => string,
+): string => {
+  const rng = mulberry32(seed);
+  const { defs, body } = speckleField(idBase, seed, layers, false);
+  return svgDocument(COSMOS_W, COSMOS_H, cosmosDefs(defs), paint(rng, body));
+};
+
+const cosmosBottom = (seed: number): string =>
+  cosmosLayer(
+    "csb",
+    seed,
+    [
+      { freq: 0.85, keep: 0.32, color: "#97a3c8", opacity: 0.8 },
+      { freq: 0.72, keep: 0.13, color: "#ffffff", opacity: 0.95 },
+      { freq: 0.76, keep: 0.05, color: "#9fb6ff", opacity: 0.85 },
+      { freq: 0.78, keep: 0.04, color: "#ffc2d8", opacity: 0.8 },
+    ],
+    (rng, body) => {
+      const clusters = clusterBlobs(
+        rng,
+        COSMOS_W,
+        COSMOS_H,
+        26,
+        ["#465777", "#6d6088", "#9a7790", "#aab3cc", "#566f9e"],
+        "#blur",
+        [5, 14],
+        [0.18, 0.4],
+      );
+      const stars = brightStars(rng, COSMOS_W, COSMOS_H, 24, "#glow");
+      return `<rect width='100%' height='100%' fill='#04030c'/>${clusters}${body}${stars}`;
+    },
+  );
+
+const cosmosMiddle = (seed: number): string =>
+  cosmosLayer(
+    "csm",
+    seed,
+    [
+      { freq: 0.66, keep: 0.2, color: "#241a4e", opacity: 0.95 },
+      { freq: 0.58, keep: 0.11, color: "#4a2168", opacity: 0.9 },
+      { freq: 0.52, keep: 0.055, color: "#7a1f6b", opacity: 0.85 },
+      { freq: 0.5, keep: 0.03, color: "#c87a3a", opacity: 0.85 },
+    ],
+    (rng, body) => {
+      const clusters = clusterBlobs(
+        rng,
+        COSMOS_W,
+        COSMOS_H,
+        16,
+        ["#241a4e", "#3a2168", "#1a1430"],
+        "#blur",
+        [7, 18],
+        [0.45, 0.8],
+      );
+      return `${clusters}${body}`;
+    },
+  );
+
+const cosmosTop = (seed: number): string =>
+  cosmosLayer(
+    "cst",
+    seed,
+    [
+      { freq: 0.62, keep: 0.06, color: "#6a6a76", opacity: 0.85 },
+      { freq: 0.52, keep: 0.035, color: "#42424c", opacity: 0.9 },
+    ],
+    (rng, body) => {
+      const rings = ringClusters(rng, COSMOS_W, COSMOS_H, 7, "#54545f");
+      return `${body}${rings}`;
+    },
+  );
+
+export const generateTextures = (options: TextureOptions = {}): Textures => {
+  const seed = options.seed ?? DEFAULT_TEXTURE_SEED;
+  return {
+    grain: grainTexture(seed),
+    glitter: glitterTexture(seed + 1),
+    cosmosBottom: cosmosBottom(seed + 2),
+    cosmosMiddle: cosmosMiddle(seed + 3),
+    cosmosTop: cosmosTop(seed + 4),
+  };
+};
+
+export const TEXTURE_VARIABLES = {
+  grain: "--hc-grain",
+  glitter: "--hc-glitter",
+  cosmosBottom: "--hc-cosmos-bottom",
+  cosmosMiddle: "--hc-cosmos-middle",
+  cosmosTop: "--hc-cosmos-top",
+} as const satisfies Record<keyof Textures, string>;
+
+export const texturesToCssVariables = (textures: Textures): Record<string, string> => {
+  const vars: Record<string, string> = {};
+  for (const key of Object.keys(TEXTURE_VARIABLES) as (keyof Textures)[]) {
+    vars[TEXTURE_VARIABLES[key]] = `url("${textures[key]}")`;
+  }
+  return vars;
+};

package/src/ticker.ts

@@ -0,0 +1,46 @@
+export const now = (): number => (typeof performance !== "undefined" ? performance.now() : Date.now());
+
+const raf: (cb: (time: number) => void) => void =
+  typeof requestAnimationFrame !== "undefined"
+    ? (cb) => requestAnimationFrame(cb)
+    : (cb) => setTimeout(() => cb(now()), 1000 / 60);
+
+interface Task {
+  c: (time: number) => boolean;
+  f: () => void;
+}
+
+export interface TaskHandle {
+  promise: Promise<void>;
+  abort: () => void;
+}
+
+const tasks = new Set<Task>();
+
+const runTasks = (time: number): void => {
+  tasks.forEach((task) => {
+    if (!task.c(time)) {
+      tasks.delete(task);
+      task.f();
+    }
+  });
+  if (tasks.size !== 0) {
+    raf(runTasks);
+  }
+};
+
+export const loop = (callback: (time: number) => boolean): TaskHandle => {
+  let task: Task;
+  if (tasks.size === 0) {
+    raf(runTasks);
+  }
+  return {
+    promise: new Promise<void>((fulfil) => {
+      task = { c: callback, f: fulfil };
+      tasks.add(task);
+    }),
+    abort: () => {
+      tasks.delete(task);
+    },
+  };
+};

package/src/types.ts

@@ -0,0 +1,22 @@
+export type HoloEffect = "none" | "holo" | "reverse" | "cosmos" | "glitter";
+
+export interface HoloCardOptions {
+  effect?: HoloEffect;
+  interactive?: boolean;
+  activateOnClick?: boolean;
+  gyroscope?: boolean;
+  showcase?: boolean;
+  glow?: string;
+  aspectRatio?: number;
+  textureSeed?: number;
+  mask?: string;
+  foil?: string;
+}
+
+export interface CreateHoloCardOptions extends HoloCardOptions {
+  image: string;
+  imageAlt?: string;
+  back?: string;
+  backAlt?: string;
+  className?: string;
+}