@kongyo2/cards-css 0.1.0

package/dist-types/spring.d.ts

@@ -0,0 +1,32 @@
+export type SpringValue = number | Record<string, number>;
+export interface SpringOpts {
+    stiffness?: number;
+    damping?: number;
+    precision?: number;
+}
+export interface SpringSetOpts {
+    hard?: boolean;
+    soft?: boolean | number;
+}
+export declare class Spring<T extends SpringValue> {
+    stiffness: number;
+    damping: number;
+    precision: number;
+    private value;
+    private lastValue;
+    private targetValue;
+    private invMass;
+    private invMassRecoveryRate;
+    private cancelTask;
+    private task;
+    private lastTime;
+    private currentToken;
+    private readonly subscribers;
+    constructor(value: T, opts?: SpringOpts);
+    get current(): T;
+    subscribe(fn: (value: T) => void): () => void;
+    private notify;
+    set(newValue: T, opts?: SpringSetOpts): Promise<void>;
+    destroy(): void;
+}
+//# sourceMappingURL=spring.d.ts.map

package/dist-types/spring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAwCD,qBAAa,MAAM,CAAC,CAAC,SAAS,WAAW;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,KAAK,CAAI;IACjB,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAwC;gBAExD,KAAK,EAAE,CAAC,EAAE,IAAI,GAAE,UAAe;IAS3C,IAAI,OAAO,IAAI,CAAC,CAEf;IAED,SAAS,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;IAI7C,OAAO,CAAC,MAAM;IAId,GAAG,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,GAAE,aAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IA4DzD,OAAO,IAAI,IAAI;CAMhB"}

package/dist-types/subscribers.d.ts

@@ -0,0 +1,10 @@
+export declare class Subscribers<T> {
+    private readonly fns;
+    private readonly getCurrent;
+    constructor(getCurrent: () => T);
+    subscribe(fn: (value: T) => void): () => void;
+    emit(value: T): void;
+    get size(): number;
+    clear(): void;
+}
+//# sourceMappingURL=subscribers.d.ts.map

package/dist-types/subscribers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscribers.d.ts","sourceRoot":"","sources":["../src/subscribers.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAW,CAAC,CAAC;IACxB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAiC;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAU;gBAEzB,UAAU,EAAE,MAAM,CAAC;IAI/B,SAAS,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;IAQ7C,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAMpB,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,KAAK,IAAI,IAAI;CAGd"}

package/dist-types/textures.d.ts

@@ -0,0 +1,23 @@
+export interface TextureOptions {
+    seed?: number;
+}
+export interface Textures {
+    grain: string;
+    glitter: string;
+    cosmosBottom: string;
+    cosmosMiddle: string;
+    cosmosTop: string;
+}
+export declare const DEFAULT_TEXTURE_SEED = 2654435769;
+export declare const grainTexture: (seed: number) => string;
+export declare const glitterTexture: (seed: number) => string;
+export declare const generateTextures: (options?: TextureOptions) => Textures;
+export declare const TEXTURE_VARIABLES: {
+    readonly grain: "--hc-grain";
+    readonly glitter: "--hc-glitter";
+    readonly cosmosBottom: "--hc-cosmos-bottom";
+    readonly cosmosMiddle: "--hc-cosmos-middle";
+    readonly cosmosTop: "--hc-cosmos-top";
+};
+export declare const texturesToCssVariables: (textures: Textures) => Record<string, string>;
+//# sourceMappingURL=textures.d.ts.map

package/dist-types/textures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textures.d.ts","sourceRoot":"","sources":["../src/textures.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,aAAa,CAAC;AAqK/C,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,MAazC,CAAC;AAEJ,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAc7C,CAAC;AA8EF,eAAO,MAAM,gBAAgB,GAAI,UAAS,cAAmB,KAAG,QAS/D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAMqB,CAAC;AAEpD,eAAO,MAAM,sBAAsB,GAAI,UAAU,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAMhF,CAAC"}

package/dist-types/ticker.d.ts

@@ -0,0 +1,7 @@
+export declare const now: () => number;
+export interface TaskHandle {
+    promise: Promise<void>;
+    abort: () => void;
+}
+export declare const loop: (callback: (time: number) => boolean) => TaskHandle;
+//# sourceMappingURL=ticker.d.ts.map

package/dist-types/ticker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.d.ts","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG,QAAO,MAA+E,CAAC;AAYvG,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAgBD,eAAO,MAAM,IAAI,GAAI,UAAU,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,KAAG,UAc1D,CAAC"}

package/dist-types/types.d.ts

@@ -0,0 +1,21 @@
+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;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist-types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@kongyo2/cards-css",
+  "version": "0.1.0",
+  "description": "Framework-agnostic holographic trading-card effect (tilt, shine, glare, holo / reverse / cosmos / glitter) with procedurally code-generated textures.",
+  "type": "module",
+  "license": "MIT",
+  "author": "kongyo2",
+  "keywords": [
+    "holographic",
+    "holo",
+    "foil",
+    "trading-card",
+    "card",
+    "css",
+    "3d",
+    "tilt",
+    "shine",
+    "glare",
+    "effect"
+  ],
+  "homepage": "https://github.com/kongyo2/cards-css#readme",
+  "bugs": {
+    "url": "https://github.com/kongyo2/cards-css/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kongyo2/cards-css.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist-types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/holo-cards.css",
+    "./holo-cards.css": "./dist/holo-cards.css"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist-types/index.d.ts",
+  "files": [
+    "dist",
+    "dist-types",
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:watch": "tsc --noEmit --watch",
+    "build:js": "tsc",
+    "build:css": "node scripts/build-css.mjs",
+    "build": "tsc && node scripts/build-css.mjs",
+    "demo": "node scripts/build-demo.mjs",
+    "clean": "node -e \"const fs=require('node:fs');for(const p of ['dist','dist-types','tsconfig.tsbuildinfo'])fs.rmSync(p,{recursive:true,force:true})\"",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "oxlint --format agent",
+    "lint:fix": "oxlint --fix",
+    "lint:strict": "oxlint --deny-warnings",
+    "prepare": "npm run build"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0",
+    "oxlint": "^1.0.0",
+    "prettier": "^3.4.0",
+    "typescript": "^5.7.0"
+  }
+}

package/src/active-registry.ts

@@ -0,0 +1,15 @@
+import { Subscribers } from "./subscribers.js";
+
+type ActiveToken = object | null;
+
+let activeCard: ActiveToken = null;
+const subscribers = new Subscribers<ActiveToken>(() => activeCard);
+
+export const getActiveCard = (): ActiveToken => activeCard;
+
+export const setActiveCard = (card: ActiveToken): void => {
+  activeCard = card;
+  subscribers.emit(activeCard);
+};
+
+export const subscribeActiveCard = (fn: (active: ActiveToken) => void): (() => void) => subscribers.subscribe(fn);

package/src/dom.ts

@@ -0,0 +1,79 @@
+import type { CreateHoloCardOptions } from "./types.js";
+
+export const CLASS = {
+  root: "holo-card",
+  translater: "holo-card__translater",
+  rotator: "holo-card__rotator",
+  front: "holo-card__front",
+  back: "holo-card__back",
+  image: "holo-card__image",
+  shine: "holo-card__shine",
+  glare: "holo-card__glare",
+  interactive: "holo-card--interactive",
+  active: "holo-card--active",
+  interacting: "holo-card--interacting",
+  loading: "holo-card--loading",
+  masked: "holo-card--masked",
+} as const;
+
+const requireDocument = (): Document => {
+  if (typeof document === "undefined") {
+    throw new Error("@kongyo2/cards-css: a DOM document is required to build a holo card element.");
+  }
+  return document;
+};
+
+export const buildHoloCardElement = (options: CreateHoloCardOptions): HTMLElement => {
+  const doc = requireDocument();
+
+  const root = doc.createElement("div");
+  root.className = CLASS.root;
+  if (options.className) {
+    for (const name of options.className.split(/\s+/).filter(Boolean)) {
+      root.classList.add(name);
+    }
+  }
+  root.dataset.effect = options.effect ?? "none";
+  if (options.mask) {
+    root.classList.add(CLASS.masked);
+  }
+
+  const translater = doc.createElement("div");
+  translater.className = CLASS.translater;
+
+  const rotator = doc.createElement("div");
+  rotator.className = CLASS.rotator;
+
+  if (options.back) {
+    const back = doc.createElement("img");
+    back.className = CLASS.back;
+    back.src = options.back;
+    back.alt = options.backAlt ?? "";
+    back.loading = "lazy";
+    rotator.appendChild(back);
+  }
+
+  const front = doc.createElement("div");
+  front.className = CLASS.front;
+
+  const image = doc.createElement("img");
+  image.className = CLASS.image;
+  image.src = options.image;
+  image.alt = options.imageAlt ?? "";
+  image.loading = "lazy";
+  front.appendChild(image);
+
+  const shine = doc.createElement("div");
+  shine.className = CLASS.shine;
+
+  const glare = doc.createElement("div");
+  glare.className = CLASS.glare;
+
+  front.appendChild(shine);
+  front.appendChild(glare);
+  rotator.appendChild(front);
+  translater.appendChild(rotator);
+  root.appendChild(translater);
+
+  return root;
+};