@kongyo2/cards-css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kongyo2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# cards-css
+
+[![npm](https://img.shields.io/npm/v/@kongyo2/cards-css.svg)](https://www.npmjs.com/package/@kongyo2/cards-css)
+[![license](https://img.shields.io/npm/l/@kongyo2/cards-css.svg)](./LICENSE)
+
+Framework-agnostic holographic trading-card effect — tilt, shine, glare and four
+foils (`holo` / `reverse` / `cosmos` / `glitter`) that react to pointer and
+gyroscope, with procedurally code-generated textures. No runtime dependencies.
+
+[![cards-css — holographic trading cards showing the holo, reverse, cosmos and glitter foils](./assets/screenshot.jpg)](https://kongyo2.github.io/cards-css/)
+
+**[Live demo →](https://kongyo2.github.io/cards-css/)** — move the pointer across a card, or tilt your phone, to see the foil shift.
+
+## Install
+
+```sh
+npm install @kongyo2/cards-css
+```
+
+## Quick start
+
+```js
+import { createHoloCard } from "@kongyo2/cards-css";
+import "@kongyo2/cards-css/styles.css";
+
+const card = createHoloCard({
+  image: "/cards/phoenix.png",
+  imageAlt: "Phoenix",
+  effect: "holo",
+});
+
+document.querySelector("#stage").append(card.element);
+```
+
+`createHoloCard` builds the full element for you. To enhance markup you already
+have on the page (it must contain the `.holo-card__rotator` structure), use
+`attachHoloCard(element, options)` instead.
+
+## Effects
+
+Set via the `effect` option (or `card.setEffect(...)` at runtime):
+
+| Effect    | Description                                                       |
+| --------- | ---------------------------------------------------------------- |
+| `none`    | Tilt, shine and glare only — no foil                             |
+| `holo`    | Rainbow holographic foil                                         |
+| `reverse` | Reverse-line holographic foil                                    |
+| `cosmos`  | Galaxy / cosmos foil (procedural — needs `textureSeed`)      |
+| `glitter` | Glitter / sparkle foil (procedural — needs `textureSeed`)    |
+
+## Options
+
+| Option            | Type      | Default  | Notes                                              |
+| ----------------- | --------- | -------- | -------------------------------------------------- |
+| `image`           | `string`  | —        | Front image source (required for `createHoloCard`) |
+| `imageAlt`        | `string`  | `""`     | Alt text for the front image                       |
+| `back` / `backAlt`| `string`  | —        | Optional card-back image and its alt text          |
+| `className`       | `string`  | —        | Extra class names for the root element             |
+| `effect`          | `HoloEffect` | `"none"` | One of the effects above                        |
+| `interactive`     | `boolean` | `true`   | React to pointer move                              |
+| `activateOnClick` | `boolean` | `false`  | Click to pop the card into a centered showcase     |
+| `gyroscope`       | `boolean` | `true`   | Tilt to device orientation while active            |
+| `showcase`        | `boolean` | `false`  | Auto-animate once on mount                         |
+| `glow`            | `string`  | —        | CSS color for the card glow                        |
+| `aspectRatio`     | `number`  | —        | Card aspect ratio (width / height)                 |
+| `textureSeed`     | `number`  | —        | Seed for the generated `cosmos` / `glitter` textures; without it those two foils render without their procedural layers |
+| `mask` / `foil`   | `string`  | —        | URLs for a mask / custom foil overlay              |
+
+## API
+
+- `createHoloCard(options)` → `HoloCard` — builds the element (`image` required).
+- `attachHoloCard(element, options?)` → `HoloCard` — wraps existing markup.
+- `HoloCard`
+  - `element` — the root `HTMLElement` to mount.
+  - `active` / `interacting` — state getters.
+  - `activate()` / `deactivate()` — pop the card in / out of showcase.
+  - `setEffect(effect)` — swap the foil at runtime.
+  - `destroy()` — remove listeners and reset the element.
+
+On iOS, gyroscope access needs a one-time permission prompt triggered by a user
+gesture — call `requestOrientationPermission()` (exported) from a click/tap
+handler.
+
+## License
+
+[MIT](./LICENSE) © kongyo2

package/dist/active-registry.js

@@ -0,0 +1,10 @@
+import { Subscribers } from "./subscribers.js";
+let activeCard = null;
+const subscribers = new Subscribers(() => activeCard);
+export const getActiveCard = () => activeCard;
+export const setActiveCard = (card) => {
+    activeCard = card;
+    subscribers.emit(activeCard);
+};
+export const subscribeActiveCard = (fn) => subscribers.subscribe(fn);
+//# sourceMappingURL=active-registry.js.map

package/dist/active-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-registry.js","sourceRoot":"","sources":["../src/active-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI/C,IAAI,UAAU,GAAgB,IAAI,CAAC;AACnC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAc,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEnE,MAAM,CAAC,MAAM,aAAa,GAAG,GAAgB,EAAE,CAAC,UAAU,CAAC;AAE3D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAiB,EAAQ,EAAE;IACvD,UAAU,GAAG,IAAI,CAAC;IAClB,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAiC,EAAgB,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC"}

package/dist/dom.js

@@ -0,0 +1,66 @@
+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",
+};
+const requireDocument = () => {
+    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) => {
+    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;
+};
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}

package/dist/holo-card.js

@@ -0,0 +1,450 @@
+import { adjust, clamp, round } from "./math.js";
+import { Spring } from "./spring.js";
+import { CLASS } from "./dom.js";
+import { getActiveCard, setActiveCard, subscribeActiveCard } from "./active-registry.js";
+import { resetBaseOrientation, subscribeOrientation } from "./orientation.js";
+import { generateTextures, texturesToCssVariables } from "./textures.js";
+const requestFrame = (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : setTimeout(cb, 16);
+const cancelFrame = (id) => {
+    if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(id);
+    }
+    else {
+        clearTimeout(id);
+    }
+};
+const SPRING_INTERACT = { stiffness: 0.066, damping: 0.25 };
+const SPRING_POPOVER = { stiffness: 0.033, damping: 0.45 };
+const SNAP_STIFFNESS = 0.01;
+const SNAP_DAMPING = 0.06;
+export class HoloCard {
+    element;
+    rotator;
+    options;
+    springRotate = new Spring({ x: 0, y: 0 }, SPRING_INTERACT);
+    springGlare = new Spring({ x: 50, y: 50, o: 0 }, SPRING_INTERACT);
+    springBackground = new Spring({ x: 50, y: 50 }, SPRING_INTERACT);
+    springRotateDelta = new Spring({ x: 0, y: 0 }, SPRING_POPOVER);
+    springTranslate = new Spring({ x: 0, y: 0 }, SPRING_POPOVER);
+    springScale = new Spring(1, SPRING_POPOVER);
+    isInteracting = false;
+    firstPop = true;
+    isVisible = typeof document !== "undefined" ? document.visibilityState === "visible" : true;
+    destroyed = false;
+    renderScheduled = false;
+    interactRaf = null;
+    pendingUpdate = null;
+    repositionTimer = null;
+    endTimer = null;
+    showcaseStart = null;
+    showcaseEnd = null;
+    showcaseInterval = null;
+    showcaseRunning;
+    cleanups = [];
+    unsubscribeOrientation = null;
+    constructor(element, options = {}) {
+        this.element = element;
+        const rotator = element.querySelector(`.${CLASS.rotator}`);
+        if (!rotator) {
+            throw new Error("@kongyo2/cards-css: holo card element is missing its .holo-card__rotator child.");
+        }
+        this.rotator = rotator;
+        this.options = {
+            interactive: options.interactive ?? true,
+            activateOnClick: options.activateOnClick ?? false,
+            gyroscope: options.gyroscope ?? true,
+            showcase: options.showcase ?? false,
+        };
+        this.showcaseRunning = this.options.showcase;
+        if (options.effect) {
+            element.dataset.effect = options.effect;
+        }
+        else if (!element.dataset.effect) {
+            element.dataset.effect = "none";
+        }
+        if (options.glow) {
+            element.style.setProperty("--card-glow", options.glow);
+        }
+        if (typeof options.aspectRatio === "number") {
+            element.style.setProperty("--card-aspect", String(options.aspectRatio));
+        }
+        if (options.mask) {
+            element.style.setProperty("--mask", `url(${options.mask})`);
+            element.classList.add(CLASS.masked);
+        }
+        if (options.foil) {
+            element.style.setProperty("--foil", `url(${options.foil})`);
+        }
+        this.applyStaticStyles(options.textureSeed);
+        for (const spring of [
+            this.springRotate,
+            this.springGlare,
+            this.springBackground,
+            this.springRotateDelta,
+            this.springTranslate,
+            this.springScale,
+        ]) {
+            this.cleanups.push(spring.subscribe(() => this.scheduleRender()));
+        }
+        this.applyStyles();
+        if (this.options.interactive) {
+            this.enableInteractive();
+        }
+        this.cleanups.push(subscribeActiveCard(() => this.onActiveChange()));
+        if (typeof document !== "undefined") {
+            const onVisibility = () => this.onVisibilityChange();
+            document.addEventListener("visibilitychange", onVisibility);
+            this.cleanups.push(() => document.removeEventListener("visibilitychange", onVisibility));
+        }
+        if (this.options.showcase) {
+            this.startShowcase();
+        }
+    }
+    applyStaticStyles(seed) {
+        const seedX = Math.random();
+        const seedY = Math.random();
+        const cosmosX = Math.floor(seedX * 734);
+        const cosmosY = Math.floor(seedY * 1280);
+        this.element.style.setProperty("--seedx", String(seedX));
+        this.element.style.setProperty("--seedy", String(seedY));
+        this.element.style.setProperty("--cosmosbg", `${cosmosX}px ${cosmosY}px`);
+        if (typeof seed === "number") {
+            const vars = texturesToCssVariables(generateTextures({ seed }));
+            for (const [name, value] of Object.entries(vars)) {
+                this.element.style.setProperty(name, value);
+            }
+        }
+    }
+    enableInteractive() {
+        this.element.classList.add(CLASS.interactive);
+        const onPointerMove = (event) => this.interact(event);
+        const onPointerLeave = () => this.interactEnd();
+        this.rotator.addEventListener("pointermove", onPointerMove);
+        this.rotator.addEventListener("pointerleave", onPointerLeave);
+        this.cleanups.push(() => this.rotator.removeEventListener("pointermove", onPointerMove));
+        this.cleanups.push(() => this.rotator.removeEventListener("pointerleave", onPointerLeave));
+        if (this.options.activateOnClick) {
+            const onClick = () => this.toggleActive();
+            const onBlur = () => this.deactivate();
+            this.rotator.addEventListener("click", onClick);
+            this.rotator.addEventListener("blur", onBlur);
+            this.rotator.tabIndex = this.rotator.tabIndex >= 0 ? this.rotator.tabIndex : 0;
+            this.cleanups.push(() => this.rotator.removeEventListener("click", onClick));
+            this.cleanups.push(() => this.rotator.removeEventListener("blur", onBlur));
+            const onScroll = () => this.reposition();
+            window.addEventListener("scroll", onScroll, { passive: true });
+            window.addEventListener("resize", onScroll, { passive: true });
+            this.cleanups.push(() => window.removeEventListener("scroll", onScroll));
+            this.cleanups.push(() => window.removeEventListener("resize", onScroll));
+        }
+    }
+    interact(event) {
+        this.endShowcase();
+        if (!this.isVisible) {
+            this.setInteracting(false);
+            return;
+        }
+        const active = getActiveCard();
+        if (active && active !== this) {
+            this.setInteracting(false);
+            return;
+        }
+        this.setInteracting(true);
+        if (this.endTimer) {
+            clearTimeout(this.endTimer);
+            this.endTimer = null;
+        }
+        const rect = this.rotator.getBoundingClientRect();
+        const absolute = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+        const percent = {
+            x: clamp(round((100 / rect.width) * absolute.x)),
+            y: clamp(round((100 / rect.height) * absolute.y)),
+        };
+        const center = { x: percent.x - 50, y: percent.y - 50 };
+        this.pendingUpdate = {
+            background: { x: adjust(percent.x, 0, 100, 37, 63), y: adjust(percent.y, 0, 100, 33, 67) },
+            rotate: { x: round(-(center.x / 3.5)), y: round(center.y / 3.5) },
+            glare: { x: round(percent.x), y: round(percent.y), o: 1 },
+        };
+        if (this.interactRaf === null) {
+            this.interactRaf = requestFrame(() => {
+                if (this.pendingUpdate) {
+                    this.updateSprings(this.pendingUpdate.background, this.pendingUpdate.rotate, this.pendingUpdate.glare);
+                    this.pendingUpdate = null;
+                }
+                this.interactRaf = null;
+            });
+        }
+    }
+    interactEnd(delay = 500) {
+        if (this.interactRaf !== null) {
+            cancelFrame(this.interactRaf);
+            this.interactRaf = null;
+        }
+        this.pendingUpdate = null;
+        if (this.endTimer) {
+            clearTimeout(this.endTimer);
+        }
+        this.endTimer = setTimeout(() => {
+            this.setInteracting(false);
+            this.setSpringDynamics(SNAP_STIFFNESS, SNAP_DAMPING);
+            void this.springRotate.set({ x: 0, y: 0 }, { soft: 1 });
+            void this.springGlare.set({ x: 50, y: 50, o: 0 }, { soft: 1 });
+            void this.springBackground.set({ x: 50, y: 50 }, { soft: 1 });
+        }, delay);
+    }
+    setSpringDynamics(stiffness, damping) {
+        for (const spring of [this.springRotate, this.springGlare, this.springBackground]) {
+            spring.stiffness = stiffness;
+            spring.damping = damping;
+        }
+    }
+    settle(opts) {
+        void this.springScale.set(1, opts);
+        void this.springTranslate.set({ x: 0, y: 0 }, opts);
+        void this.springRotateDelta.set({ x: 0, y: 0 }, opts);
+    }
+    updateSprings(background, rotate, glare) {
+        this.setSpringDynamics(SPRING_INTERACT.stiffness, SPRING_INTERACT.damping);
+        void this.springBackground.set(background);
+        void this.springRotate.set(rotate);
+        void this.springGlare.set(glare);
+    }
+    setInteracting(value) {
+        this.isInteracting = value;
+        this.element.classList.toggle(CLASS.interacting, value);
+    }
+    get interacting() {
+        return this.isInteracting;
+    }
+    scheduleRender() {
+        if (this.renderScheduled) {
+            return;
+        }
+        this.renderScheduled = true;
+        requestFrame(() => {
+            this.renderScheduled = false;
+            this.applyStyles();
+        });
+    }
+    applyStyles() {
+        const glare = this.springGlare.current;
+        const rotate = this.springRotate.current;
+        const rotateDelta = this.springRotateDelta.current;
+        const background = this.springBackground.current;
+        const translate = this.springTranslate.current;
+        const scale = this.springScale.current;
+        const fromCenter = clamp(Math.sqrt((glare.y - 50) * (glare.y - 50) + (glare.x - 50) * (glare.x - 50)) / 50, 0, 1);
+        const style = this.element.style;
+        style.setProperty("--pointer-x", `${glare.x}%`);
+        style.setProperty("--pointer-y", `${glare.y}%`);
+        style.setProperty("--pointer-from-center", String(fromCenter));
+        style.setProperty("--pointer-from-top", String(glare.y / 100));
+        style.setProperty("--pointer-from-left", String(glare.x / 100));
+        style.setProperty("--card-opacity", String(glare.o));
+        style.setProperty("--rotate-x", `${rotate.x + rotateDelta.x}deg`);
+        style.setProperty("--rotate-y", `${rotate.y + rotateDelta.y}deg`);
+        style.setProperty("--background-x", `${background.x}%`);
+        style.setProperty("--background-y", `${background.y}%`);
+        style.setProperty("--card-scale", String(scale));
+        style.setProperty("--translate-x", `${translate.x}px`);
+        style.setProperty("--translate-y", `${translate.y}px`);
+    }
+    onActiveChange() {
+        if (getActiveCard() === this) {
+            this.popover();
+            this.element.classList.add(CLASS.active);
+            if (this.options.gyroscope) {
+                this.startGyroscope();
+            }
+        }
+        else {
+            this.retreat();
+            this.element.classList.remove(CLASS.active);
+            this.stopGyroscope();
+        }
+    }
+    popover() {
+        const rect = this.element.getBoundingClientRect();
+        let delay = 100;
+        const scaleW = (window.innerWidth / rect.width) * 0.9;
+        const scaleH = (window.innerHeight / rect.height) * 0.9;
+        const scaleF = 1.75;
+        this.setCenter();
+        if (this.firstPop) {
+            delay = 1000;
+            void this.springRotateDelta.set({ x: 360, y: 0 });
+        }
+        this.firstPop = false;
+        void this.springScale.set(Math.min(scaleW, scaleH, scaleF));
+        this.interactEnd(delay);
+    }
+    retreat() {
+        this.settle({ soft: true });
+        this.interactEnd(100);
+    }
+    reset() {
+        this.interactEnd(0);
+        this.settle({ hard: true });
+        void this.springRotate.set({ x: 0, y: 0 }, { hard: true });
+    }
+    setCenter() {
+        const rect = this.element.getBoundingClientRect();
+        const view = document.documentElement;
+        void this.springTranslate.set({
+            x: round(view.clientWidth / 2 - rect.x - rect.width / 2),
+            y: round(view.clientHeight / 2 - rect.y - rect.height / 2),
+        });
+    }
+    reposition() {
+        if (this.repositionTimer) {
+            clearTimeout(this.repositionTimer);
+        }
+        this.repositionTimer = setTimeout(() => {
+            if (getActiveCard() === this) {
+                this.setCenter();
+            }
+        }, 300);
+    }
+    startGyroscope() {
+        if (this.unsubscribeOrientation) {
+            return;
+        }
+        this.unsubscribeOrientation = subscribeOrientation((orientation) => this.orientate(orientation));
+    }
+    stopGyroscope() {
+        if (this.unsubscribeOrientation) {
+            this.unsubscribeOrientation();
+            this.unsubscribeOrientation = null;
+        }
+    }
+    orientate(orientation) {
+        if (getActiveCard() !== this) {
+            return;
+        }
+        const limit = { x: 16, y: 18 };
+        const degrees = {
+            x: clamp(orientation.relative.gamma, -limit.x, limit.x),
+            y: clamp(orientation.relative.beta, -limit.y, limit.y),
+        };
+        this.setInteracting(true);
+        this.updateSprings({ x: adjust(degrees.x, -limit.x, limit.x, 37, 63), y: adjust(degrees.y, -limit.y, limit.y, 33, 67) }, { x: round(degrees.x * -1), y: round(degrees.y) }, { x: adjust(degrees.x, -limit.x, limit.x, 0, 100), y: adjust(degrees.y, -limit.y, limit.y, 0, 100), o: 1 });
+    }
+    onVisibilityChange() {
+        this.isVisible = document.visibilityState === "visible";
+        this.endShowcase();
+        this.reset();
+    }
+    startShowcase() {
+        if (!this.isVisible) {
+            return;
+        }
+        const s = 0.02;
+        const d = 0.5;
+        let r = 0;
+        this.showcaseStart = setTimeout(() => {
+            this.setInteracting(true);
+            this.setSpringDynamics(s, d);
+            if (!this.isVisible) {
+                this.setInteracting(false);
+                return;
+            }
+            this.showcaseInterval = setInterval(() => {
+                r += 0.05;
+                void this.springRotate.set({ x: Math.sin(r) * 25, y: Math.cos(r) * 25 });
+                void this.springGlare.set({ x: 55 + Math.sin(r) * 55, y: 55 + Math.cos(r) * 55, o: 0.8 });
+                void this.springBackground.set({ x: 20 + Math.sin(r) * 20, y: 20 + Math.cos(r) * 20 });
+            }, 20);
+            this.showcaseEnd = setTimeout(() => {
+                if (this.showcaseInterval) {
+                    clearInterval(this.showcaseInterval);
+                    this.showcaseInterval = null;
+                }
+                this.interactEnd(0);
+            }, 4000);
+        }, 2000);
+    }
+    endShowcase() {
+        if (!this.showcaseRunning) {
+            return;
+        }
+        if (this.showcaseEnd) {
+            clearTimeout(this.showcaseEnd);
+            this.showcaseEnd = null;
+        }
+        if (this.showcaseStart) {
+            clearTimeout(this.showcaseStart);
+            this.showcaseStart = null;
+        }
+        if (this.showcaseInterval) {
+            clearInterval(this.showcaseInterval);
+            this.showcaseInterval = null;
+        }
+        this.showcaseRunning = false;
+    }
+    toggleActive() {
+        if (getActiveCard() === this) {
+            setActiveCard(null);
+        }
+        else {
+            this.endShowcase();
+            resetBaseOrientation();
+            setActiveCard(this);
+        }
+    }
+    activate() {
+        if (getActiveCard() !== this) {
+            this.endShowcase();
+            resetBaseOrientation();
+            setActiveCard(this);
+        }
+    }
+    deactivate() {
+        this.interactEnd();
+        if (getActiveCard() === this) {
+            setActiveCard(null);
+        }
+    }
+    setEffect(effect) {
+        this.element.dataset.effect = effect ?? "none";
+    }
+    get active() {
+        return getActiveCard() === this;
+    }
+    destroy() {
+        if (this.destroyed) {
+            return;
+        }
+        this.destroyed = true;
+        this.endShowcase();
+        this.stopGyroscope();
+        if (getActiveCard() === this) {
+            setActiveCard(null);
+        }
+        for (const timer of [this.repositionTimer, this.endTimer]) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        }
+        if (this.interactRaf !== null) {
+            cancelFrame(this.interactRaf);
+            this.interactRaf = null;
+        }
+        for (const cleanup of this.cleanups) {
+            cleanup();
+        }
+        this.cleanups.length = 0;
+        for (const spring of [
+            this.springRotate,
+            this.springGlare,
+            this.springBackground,
+            this.springRotateDelta,
+            this.springTranslate,
+            this.springScale,
+        ]) {
+            spring.destroy();
+        }
+        this.element.classList.remove(CLASS.interactive, CLASS.interacting, CLASS.active);
+    }
+}
+//# sourceMappingURL=holo-card.js.map