@kongyo2/cards-css 0.2.1 → 0.3.0

package/src/styles/base.css

@@ -123,7 +123,7 @@
 .holo-card__translater,
 .holo-card__rotator {
   display: grid;
-  perspective: 600px;
+  perspective: var(--card-perspective, 600px);
   will-change: transform, box-shadow;
   transform-origin: center;
   transform-style: preserve-3d;
@@ -270,14 +270,21 @@ button.holo-card__rotator {
 .holo-card__glare {
   transform: translateZ(1.41px);
   overflow: hidden;
-  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.65) 20%,
-    hsla(0, 0%, 0%, 0.5) 90%
+  background-image: var(
+    --glare-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.65) 20%,
+      hsla(0, 0%, 0%, 0.5) 90%
+    )
   );
   opacity: calc(var(--card-opacity) * var(--hc-glare-opacity));
-  mix-blend-mode: overlay;
+  mix-blend-mode: var(--glare-blend, overlay);
+}
+
+.holo-card--custom-glare .holo-card__glare::after {
+  display: none !important;
 }
 
 .holo-card--masked .holo-card__shine,
@@ -349,3 +356,36 @@ button.holo-card__rotator {
 .holo-card__overlay--interactive * {
   pointer-events: auto;
 }
+
+.holo-card--depth .holo-card__shine {
+  transform: translateZ(calc(1px + var(--hc-depth, 0px)));
+}
+
+.holo-card--depth .holo-card__glare {
+  transform: translateZ(calc(1.41px + var(--hc-depth, 0px)));
+}
+
+.holo-card--depth .holo-card__overlay {
+  transform: translateZ(calc(2px + var(--hc-depth, 0px)));
+}
+
+.holo-card--depth .holo-card__layer {
+  transform: translate3d(
+    calc(var(--pointer-dx) * var(--layer-parallax) * 1px),
+    calc(var(--pointer-dy) * var(--layer-parallax) * 1px),
+    calc(0.02px + var(--layer-parallax) * var(--hc-depth-layer-scale, 1) * 1px)
+  );
+}
+
+.holo-card--depth .holo-card__translater::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: var(--card-radius);
+  background: transparent;
+  transform: translateZ(-1px);
+  pointer-events: none;
+  box-shadow: calc(var(--tilt-x, 0) * -0.6px) calc(var(--hc-depth, 0px) * 0.5 + var(--tilt-y, 0) * 0.6px)
+    calc(var(--hc-depth, 0px) * 1.2 + 14px) calc(var(--hc-depth, 0px) * 0.2) rgba(0, 0, 0, var(--hc-depth-shadow, 0));
+}

package/src/styles/effects/cosmos.css

@@ -1,6 +1,13 @@
 .holo-card[data-effect="cosmos"] {
   --space: 4%;
   --angle: 82deg;
+
+  --cosmos-clr-1: hsl(53, 65%, 60%);
+  --cosmos-clr-2: hsl(93, 56%, 50%);
+  --cosmos-clr-3: hsl(176, 54%, 49%);
+  --cosmos-clr-4: hsl(228, 59%, 55%);
+  --cosmos-clr-5: hsl(283, 60%, 55%);
+  --cosmos-clr-6: hsl(326, 59%, 51%);
 }
 
 .holo-card[data-effect="cosmos"] .holo-card__shine {
@@ -8,18 +15,18 @@
     var(--hc-cosmos-bottom),
     repeating-linear-gradient(
       var(--angle),
-      hsl(53, 65%, 60%) calc(var(--space) * 1),
-      hsl(93, 56%, 50%) calc(var(--space) * 2),
-      hsl(176, 54%, 49%) calc(var(--space) * 3),
-      hsl(228, 59%, 55%) calc(var(--space) * 4),
-      hsl(283, 60%, 55%) calc(var(--space) * 5),
-      hsl(326, 59%, 51%) calc(var(--space) * 6),
-      hsl(326, 59%, 51%) calc(var(--space) * 7),
-      hsl(283, 60%, 55%) calc(var(--space) * 8),
-      hsl(228, 59%, 55%) calc(var(--space) * 9),
-      hsl(176, 54%, 49%) calc(var(--space) * 10),
-      hsl(93, 56%, 50%) calc(var(--space) * 11),
-      hsl(53, 65%, 60%) calc(var(--space) * 12)
+      var(--cosmos-clr-1) calc(var(--space) * 1),
+      var(--cosmos-clr-2) calc(var(--space) * 2),
+      var(--cosmos-clr-3) calc(var(--space) * 3),
+      var(--cosmos-clr-4) calc(var(--space) * 4),
+      var(--cosmos-clr-5) calc(var(--space) * 5),
+      var(--cosmos-clr-6) calc(var(--space) * 6),
+      var(--cosmos-clr-6) calc(var(--space) * 7),
+      var(--cosmos-clr-5) calc(var(--space) * 8),
+      var(--cosmos-clr-4) calc(var(--space) * 9),
+      var(--cosmos-clr-3) calc(var(--space) * 10),
+      var(--cosmos-clr-2) calc(var(--space) * 11),
+      var(--cosmos-clr-1) calc(var(--space) * 12)
     ),
     radial-gradient(
       farthest-corner circle at var(--pointer-x) var(--pointer-y),
@@ -52,18 +59,18 @@
     var(--hc-cosmos-middle),
     repeating-linear-gradient(
       var(--angle),
-      hsl(53, 65%, 60%) calc(var(--space) * 1),
-      hsl(93, 56%, 50%) calc(var(--space) * 2),
-      hsl(176, 54%, 49%) calc(var(--space) * 3),
-      hsl(228, 59%, 55%) calc(var(--space) * 4),
-      hsl(283, 60%, 55%) calc(var(--space) * 5),
-      hsl(326, 59%, 51%) calc(var(--space) * 6),
-      hsl(326, 59%, 51%) calc(var(--space) * 7),
-      hsl(283, 60%, 55%) calc(var(--space) * 8),
-      hsl(228, 59%, 55%) calc(var(--space) * 9),
-      hsl(176, 54%, 49%) calc(var(--space) * 10),
-      hsl(93, 56%, 50%) calc(var(--space) * 11),
-      hsl(53, 65%, 60%) calc(var(--space) * 12)
+      var(--cosmos-clr-1) calc(var(--space) * 1),
+      var(--cosmos-clr-2) calc(var(--space) * 2),
+      var(--cosmos-clr-3) calc(var(--space) * 3),
+      var(--cosmos-clr-4) calc(var(--space) * 4),
+      var(--cosmos-clr-5) calc(var(--space) * 5),
+      var(--cosmos-clr-6) calc(var(--space) * 6),
+      var(--cosmos-clr-6) calc(var(--space) * 7),
+      var(--cosmos-clr-5) calc(var(--space) * 8),
+      var(--cosmos-clr-4) calc(var(--space) * 9),
+      var(--cosmos-clr-3) calc(var(--space) * 10),
+      var(--cosmos-clr-2) calc(var(--space) * 11),
+      var(--cosmos-clr-1) calc(var(--space) * 12)
     );
 
   background-blend-mode: lighten, multiply;
@@ -90,18 +97,18 @@
     var(--hc-cosmos-top),
     repeating-linear-gradient(
       var(--angle),
-      hsl(53, 65%, 60%) calc(var(--space) * 1),
-      hsl(93, 56%, 50%) calc(var(--space) * 2),
-      hsl(176, 54%, 49%) calc(var(--space) * 3),
-      hsl(228, 59%, 55%) calc(var(--space) * 4),
-      hsl(283, 60%, 55%) calc(var(--space) * 5),
-      hsl(326, 59%, 51%) calc(var(--space) * 6),
-      hsl(326, 59%, 51%) calc(var(--space) * 7),
-      hsl(283, 60%, 55%) calc(var(--space) * 8),
-      hsl(228, 59%, 55%) calc(var(--space) * 9),
-      hsl(176, 54%, 49%) calc(var(--space) * 10),
-      hsl(93, 56%, 50%) calc(var(--space) * 11),
-      hsl(53, 65%, 60%) calc(var(--space) * 12)
+      var(--cosmos-clr-1) calc(var(--space) * 1),
+      var(--cosmos-clr-2) calc(var(--space) * 2),
+      var(--cosmos-clr-3) calc(var(--space) * 3),
+      var(--cosmos-clr-4) calc(var(--space) * 4),
+      var(--cosmos-clr-5) calc(var(--space) * 5),
+      var(--cosmos-clr-6) calc(var(--space) * 6),
+      var(--cosmos-clr-6) calc(var(--space) * 7),
+      var(--cosmos-clr-5) calc(var(--space) * 8),
+      var(--cosmos-clr-4) calc(var(--space) * 9),
+      var(--cosmos-clr-3) calc(var(--space) * 10),
+      var(--cosmos-clr-2) calc(var(--space) * 11),
+      var(--cosmos-clr-1) calc(var(--space) * 12)
     );
 
   background-blend-mode: multiply, multiply;
@@ -121,13 +128,16 @@
 }
 
 .holo-card[data-effect="cosmos"] .holo-card__glare {
-  background-image: radial-gradient(
-    farthest-corner circle at var(--pointer-x) var(--pointer-y),
-    hsla(204, 100%, 95%, 0.8) 5%,
-    hsla(250, 15%, 20%, 1) 150%
+  background-image: var(
+    --glare-image,
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(204, 100%, 95%, 0.8) 5%,
+      hsla(250, 15%, 20%, 1) 150%
+    )
   );
   filter: brightness(0.75) contrast(2) saturate(2);
-  mix-blend-mode: overlay;
+  mix-blend-mode: var(--glare-blend, overlay);
   opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)) * var(--hc-glare-opacity));
 }
 

package/src/styles/effects/glitter.css

@@ -66,21 +66,27 @@
 }
 
 .holo-card[data-effect="glitter"]:not(.holo-card--masked) .holo-card__glare {
-  background-image: radial-gradient(
-    farthest-corner circle at var(--pointer-x) var(--pointer-y),
-    hsla(0, 0%, 100%, 1) 10%,
-    hsla(0, 0%, 100%, 0.85) 20%,
-    hsla(0, 0%, 0%, 0.35) 90%
+  background-image: var(
+    --glare-image,
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(0, 0%, 100%, 1) 10%,
+      hsla(0, 0%, 100%, 0.85) 20%,
+      hsla(0, 0%, 0%, 0.35) 90%
+    )
   );
-  mix-blend-mode: multiply;
+  mix-blend-mode: var(--glare-blend, multiply);
 }
 
 .holo-card--masked[data-effect="glitter"] .holo-card__glare {
-  background-image: radial-gradient(
-    farthest-corner circle at var(--pointer-x) var(--pointer-y),
-    hsla(50, 20%, 90%, 0.45) 0%,
-    hsla(150, 20%, 30%, 0.45) 45%,
-    hsla(0, 0%, 0%, 0.9) 120%
+  background-image: var(
+    --glare-image,
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(50, 20%, 90%, 0.45) 0%,
+      hsla(150, 20%, 30%, 0.45) 45%,
+      hsla(0, 0%, 0%, 0.9) 120%
+    )
   );
   filter: brightness(0.9) contrast(2);
 }

package/src/styles/effects/holo.css

@@ -110,7 +110,7 @@
 .holo-card[data-effect="holo"] .holo-card__glare {
   opacity: calc(var(--card-opacity) * 0.8 * var(--hc-glare-opacity));
   filter: brightness(0.8) contrast(1.5);
-  mix-blend-mode: overlay;
+  mix-blend-mode: var(--glare-blend, overlay);
 }
 
 .holo-card[data-effect="holo"] .holo-card__glare::after {

package/src/styles/effects/reverse.css

@@ -27,11 +27,14 @@
 .holo-card[data-effect="reverse"] .holo-card__glare {
   opacity: calc(var(--card-opacity) * var(--hc-glare-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%
+  background-image: var(
+    --glare-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);

package/src/types.ts

@@ -65,6 +65,93 @@ export interface ShowcaseOptions {
   spring?: SpringTuning;
 }
 
+/** Built-in foil colour schemes for {@link PaletteOptions.preset}. */
+export type PalettePreset = "rainbow" | "gold" | "aurora" | "ruby" | "sapphire" | "mono";
+
+/**
+ * Foil colour-palette / theming. Every field maps onto the foil CSS custom
+ * properties, so a palette can be supplied up front or swapped at runtime with
+ * `card.setPalette(...)`. Colours accept any CSS colour string.
+ */
+export interface PaletteOptions {
+  /** A built-in scheme used as the base; the explicit fields below override it. */
+  preset?: PalettePreset;
+  /** Holographic spectrum stops (`--sunpillar-1…6`). 1–6 colours; fewer are cycled to fill the ramp. */
+  sunpillars?: string[];
+  /** Rainbow stops for the `holo` foil sweep (`--red` / `--yellow` / `--green` / `--blue` / `--violet`). 1–5 colours, cycled. */
+  spectrum?: string[];
+  /** Ramp stops for the `cosmos` foil (`--cosmos-clr-1…6`). 1–6 colours, cycled. */
+  cosmos?: string[];
+  /** Card edge highlight colour (`--card-edge`). */
+  edge?: string;
+  /** Card back fill colour (`--card-back`). */
+  back?: string;
+  /** Card glow colour (`--card-glow`); equivalent to the top-level `glow` option. */
+  glow?: string;
+}
+
+/**
+ * Custom dynamic glare (reflected light). Supply a full `image` for total
+ * control, or compose the built-in pointer-tracking radial gradient from
+ * `shape` / `extent` / `size` / `stops`. Applies across every effect and can be
+ * updated at runtime with `card.setGlare(...)`.
+ */
+export interface GlareOptions {
+  /**
+   * Full `background-image` for the glare layer, overriding the built-in
+   * gradient on every effect. `var(--pointer-x)` / `var(--pointer-y)` are
+   * available for pointer tracking.
+   */
+  image?: string;
+  /** Radial-gradient shape when composing the gradient (default `circle`). */
+  shape?: "circle" | "ellipse";
+  /** Radial-gradient extent keyword, e.g. `farthest-corner` / `closest-side` (default `farthest-corner`). */
+  extent?: string;
+  /** Explicit gradient size — two values imply an ellipse (e.g. `60% 40%`), a single value a circle radius (e.g. `120px`); overrides `extent` when set. */
+  size?: string;
+  /** Colour stops, e.g. `["hsla(0,0%,100%,.8) 10%", "hsla(0,0%,0%,.5) 90%"]`. */
+  stops?: string[];
+  /** `mix-blend-mode` for the glare layer. */
+  blend?: string;
+  /** Glare opacity multiplier (mirrors `visual.glareOpacity`). */
+  opacity?: number;
+}
+
+/**
+ * Physical-behaviour tuning for the device-orientation (gyroscope) response.
+ * Passing `true` keeps the defaults; `false` disables gyroscope tilt.
+ */
+export interface GyroscopeOptions {
+  /** Master switch (default true); `false` matches `gyroscope: false`. */
+  enabled?: boolean;
+  /** Device tilt (deg) on the X axis (gamma) that reaches the full effect (default 16). Lower is more sensitive. */
+  rangeX?: number;
+  /** Device tilt (deg) on the Y axis (beta) that reaches the full effect (default 18). */
+  rangeY?: number;
+  /** Sensitivity multiplier applied to the raw tilt before clamping (default 1). */
+  sensitivity?: number;
+  /** Flip the horizontal response. */
+  invertX?: boolean;
+  /** Flip the vertical response. */
+  invertY?: boolean;
+}
+
+/**
+ * Foil 3D depth / extrusion simulation. Lifts the foil stack above the artwork
+ * in true 3D so it parallaxes as the card tilts, with a tilt-reactive contact
+ * shadow. Passing `true` enables it with the defaults.
+ */
+export interface DepthOptions {
+  /** Foil extrusion height in px — how far the foil floats above the artwork (default 14). */
+  strength?: number;
+  /** Perspective in px for the card's 3D space; lower exaggerates the depth (default 600). */
+  perspective?: number;
+  /** Contact-shadow opacity beneath the lifted card, 0–1 (default 0.35). */
+  shadow?: number;
+  /** Multiplier turning each extra layer's `parallax` into Z-lift, so stacked layers extrude in depth (default 1). */
+  layerScale?: number;
+}
+
 /** Fine-grained visual / effect control. Numeric fields are multipliers (1 = unchanged). */
 export interface VisualOptions {
   /** Foil brightness multiplier. */
@@ -133,13 +220,20 @@ export interface HoloCardOptions {
   effect?: HoloEffect;
   interactive?: boolean;
   activateOnClick?: boolean;
-  gyroscope?: boolean;
+  /** Device-orientation tilt: `true`/`false`, or an object for physical-behaviour tuning. */
+  gyroscope?: boolean | GyroscopeOptions;
   showcase?: boolean | ShowcaseOptions;
   glow?: string;
   aspectRatio?: number;
   textureSeed?: number;
   mask?: string | MaskOptions;
   foil?: string;
+  /** Foil colour palette / theming. */
+  palette?: PaletteOptions;
+  /** Custom dynamic glare (reflected light). */
+  glare?: GlareOptions;
+  /** Foil 3D depth / extrusion: `true` for the defaults, or an object to tune it. */
+  depth?: boolean | DepthOptions;
   /** Interaction & physics adjustments. */
   physics?: PhysicsOptions;
   /** Fine-grained visual control. */