@kongyo2/cards-css 0.1.0

package/src/spring.ts

@@ -0,0 +1,158 @@
+import { loop, now, type TaskHandle } from "./ticker.js";
+import { Subscribers } from "./subscribers.js";
+
+export type SpringValue = number | Record<string, number>;
+
+export interface SpringOpts {
+  stiffness?: number;
+  damping?: number;
+  precision?: number;
+}
+
+export interface SpringSetOpts {
+  hard?: boolean;
+  soft?: boolean | number;
+}
+
+interface TickContext {
+  invMass: number;
+  stiffness: number;
+  damping: number;
+  precision: number;
+  settled: boolean;
+  dt: number;
+}
+
+const tickScalar = (ctx: TickContext, lastValue: number, currentValue: number, targetValue: number): number => {
+  const delta = targetValue - currentValue;
+  const velocity = (currentValue - lastValue) / (ctx.dt || 1 / 60);
+  const spring = ctx.stiffness * delta;
+  const damper = ctx.damping * velocity;
+  const acceleration = (spring - damper) * ctx.invMass;
+  const d = (velocity + acceleration) * ctx.dt;
+  if (Math.abs(d) < ctx.precision && Math.abs(delta) < ctx.precision) {
+    return targetValue;
+  }
+  ctx.settled = false;
+  return currentValue + d;
+};
+
+const tick = <T extends SpringValue>(ctx: TickContext, last: T, current: T, target: T): T => {
+  if (typeof current === "number") {
+    return tickScalar(ctx, last as number, current, target as number) as T;
+  }
+  const cur = current as Record<string, number>;
+  const lst = last as Record<string, number>;
+  const tgt = target as Record<string, number>;
+  const result: Record<string, number> = {};
+  for (const key in cur) {
+    const c = cur[key] ?? 0;
+    result[key] = tickScalar(ctx, lst[key] ?? c, c, tgt[key] ?? c);
+  }
+  return result as T;
+};
+
+export class Spring<T extends SpringValue> {
+  stiffness: number;
+  damping: number;
+  precision: number;
+
+  private value: T;
+  private lastValue: T;
+  private targetValue: T;
+  private invMass = 1;
+  private invMassRecoveryRate = 0;
+  private cancelTask = false;
+  private task: TaskHandle | null = null;
+  private lastTime = 0;
+  private currentToken: object | null = null;
+  private readonly subscribers = new Subscribers<T>(() => this.value);
+
+  constructor(value: T, opts: SpringOpts = {}) {
+    this.value = value;
+    this.lastValue = value;
+    this.targetValue = value;
+    this.stiffness = opts.stiffness ?? 0.15;
+    this.damping = opts.damping ?? 0.8;
+    this.precision = opts.precision ?? 0.01;
+  }
+
+  get current(): T {
+    return this.value;
+  }
+
+  subscribe(fn: (value: T) => void): () => void {
+    return this.subscribers.subscribe(fn);
+  }
+
+  private notify(): void {
+    this.subscribers.emit(this.value);
+  }
+
+  set(newValue: T, opts: SpringSetOpts = {}): Promise<void> {
+    this.targetValue = newValue;
+    const token = (this.currentToken = {});
+
+    if (opts.hard || (this.stiffness >= 1 && this.damping >= 1)) {
+      this.cancelTask = true;
+      if (this.task) {
+        this.task.abort();
+        this.task = null;
+      }
+      this.lastTime = now();
+      this.lastValue = newValue;
+      this.value = newValue;
+      this.notify();
+      return Promise.resolve();
+    }
+
+    if (opts.soft) {
+      const rate = opts.soft === true ? 0.5 : opts.soft;
+      this.invMassRecoveryRate = 1 / (rate * 60);
+      this.invMass = 0;
+    }
+
+    let handle = this.task;
+    if (!handle) {
+      this.lastTime = now();
+      this.cancelTask = false;
+      handle = loop((time) => {
+        if (this.cancelTask) {
+          this.cancelTask = false;
+          this.task = null;
+          return false;
+        }
+        this.invMass = Math.min(this.invMass + this.invMassRecoveryRate, 1);
+        const ctx: TickContext = {
+          invMass: this.invMass,
+          stiffness: this.stiffness,
+          damping: this.damping,
+          precision: this.precision,
+          settled: true,
+          dt: ((time - this.lastTime) * 60) / 1000,
+        };
+        const next = tick(ctx, this.lastValue, this.value, this.targetValue);
+        this.lastTime = time;
+        this.lastValue = this.value;
+        this.value = next;
+        this.notify();
+        if (ctx.settled) {
+          this.task = null;
+        }
+        return !ctx.settled;
+      });
+      this.task = handle;
+    }
+
+    return new Promise<void>((fulfil) => {
+      void handle.promise.then(() => (token === this.currentToken ? fulfil() : undefined));
+    });
+  }
+
+  destroy(): void {
+    this.cancelTask = true;
+    this.task?.abort();
+    this.task = null;
+    this.subscribers.clear();
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,262 @@
+:root {
+  --card-aspect: 0.718;
+  --card-radius: 4.55% / 3.5%;
+  --card-edge: hsl(47, 100%, 78%);
+  --card-back: hsl(205, 100%, 25%);
+  --card-glow: hsl(175, 100%, 90%);
+
+  --sunpillar-1: hsl(2, 100%, 73%);
+  --sunpillar-2: hsl(53, 100%, 69%);
+  --sunpillar-3: hsl(93, 100%, 69%);
+  --sunpillar-4: hsl(176, 100%, 76%);
+  --sunpillar-5: hsl(228, 100%, 74%);
+  --sunpillar-6: hsl(283, 100%, 73%);
+
+  --sunpillar-clr-1: var(--sunpillar-1);
+  --sunpillar-clr-2: var(--sunpillar-2);
+  --sunpillar-clr-3: var(--sunpillar-3);
+  --sunpillar-clr-4: var(--sunpillar-4);
+  --sunpillar-clr-5: var(--sunpillar-5);
+  --sunpillar-clr-6: var(--sunpillar-6);
+
+  --pointer-x: 50%;
+  --pointer-y: 50%;
+  --card-scale: 1;
+  --card-opacity: 0;
+  --translate-x: 0px;
+  --translate-y: 0px;
+  --rotate-x: 0deg;
+  --rotate-y: 0deg;
+  --background-x: var(--pointer-x);
+  --background-y: var(--pointer-y);
+  --pointer-from-center: 0;
+  --pointer-from-top: var(--pointer-from-center);
+  --pointer-from-left: var(--pointer-from-center);
+}
+
+.holo-card {
+  --grain: var(--hc-grain, none);
+  --glitter: var(--hc-glitter, none);
+  --glittersize: 25%;
+
+  --space: 5%;
+  --angle: 133deg;
+  --imgsize: cover;
+
+  --red: #f80e35;
+  --yellow: #eedf10;
+  --green: #21e985;
+  --blue: #0dbde9;
+  --violet: #c929f1;
+
+  transform: translate3d(0px, 0px, 0.01px);
+  pointer-events: none;
+  z-index: calc(var(--card-scale) * 2);
+  will-change: transform, visibility, z-index;
+  transform-style: preserve-3d;
+}
+
+.holo-card,
+.holo-card * {
+  outline: 1px solid transparent;
+}
+
+.holo-card:not(.holo-card--interactive) .holo-card__translater,
+.holo-card:not(.holo-card--interactive) .holo-card__rotator,
+.holo-card:not(.holo-card--interactive) .holo-card__shine,
+.holo-card:not(.holo-card--interactive) .holo-card__glare {
+  transition: all 0.3s ease;
+}
+
+.holo-card:not(.holo-card--interactive):hover {
+  --pointer-x: 25%;
+  --pointer-y: 10%;
+  --card-scale: 1.1;
+  --card-opacity: 1;
+  --translate-x: 0px;
+  --translate-y: -10px;
+  --rotate-x: 7deg;
+  --rotate-y: -19deg;
+  --background-x: 44%;
+  --background-y: 36%;
+  --pointer-from-center: 0.9;
+  --pointer-from-top: 0.11;
+  --pointer-from-left: 0.25;
+}
+
+.holo-card,
+.holo-card__rotator {
+  aspect-ratio: var(--card-aspect);
+  border-radius: var(--card-radius);
+}
+
+.holo-card--interacting {
+  z-index: calc(var(--card-scale) * 120);
+}
+
+.holo-card--active .holo-card__translater,
+.holo-card--active .holo-card__rotator {
+  touch-action: none;
+}
+
+.holo-card__translater,
+.holo-card__rotator {
+  display: grid;
+  perspective: 600px;
+  will-change: transform, box-shadow;
+  transform-origin: center;
+  transform-style: preserve-3d;
+}
+
+.holo-card__translater {
+  width: auto;
+  position: relative;
+  --translate-z: calc(var(--card-scale) * 150px + 0.01px);
+  transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
+}
+
+.holo-card__rotator {
+  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
+  transform-style: preserve-3d;
+  pointer-events: auto;
+}
+
+button.holo-card__rotator {
+  border: none;
+  background: transparent;
+  padding: 0;
+  appearance: none;
+}
+
+.holo-card__rotator,
+.holo-card--active .holo-card__rotator:focus {
+  transition:
+    box-shadow 0.4s ease,
+    opacity 0.33s ease-out;
+  box-shadow:
+    0 0 3px -1px transparent,
+    0 0 2px 1px transparent,
+    0 0 5px 0px transparent,
+    0px 10px 20px -5px black,
+    0 2px 15px -5px black,
+    0 0 20px 0px transparent;
+}
+
+.holo-card--active .holo-card__rotator,
+.holo-card__rotator:focus {
+  box-shadow:
+    0 0 3px -1px white,
+    0 0 3px 1px var(--card-edge),
+    0 0 12px 2px var(--card-glow),
+    0px 10px 20px -5px black,
+    0 0 40px -30px var(--card-glow),
+    0 0 50px -20px var(--card-glow);
+}
+
+.holo-card__rotator * {
+  width: 100%;
+  display: grid;
+  grid-area: 1/1;
+  aspect-ratio: var(--card-aspect);
+  border-radius: var(--card-radius);
+  image-rendering: optimizeQuality;
+  transform-style: preserve-3d;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.holo-card__rotator img {
+  height: auto;
+}
+
+.holo-card__rotator img:not(.holo-card__back) {
+  transform: translate3d(0px, 0px, 0.01px);
+}
+
+.holo-card__back {
+  background-color: var(--card-back);
+  transform: rotateY(180deg) translateZ(1px);
+  backface-visibility: visible;
+}
+
+.holo-card__front,
+.holo-card__front * {
+  backface-visibility: hidden;
+}
+
+.holo-card__front {
+  opacity: 1;
+  transition: opacity 0.33s ease-out;
+  transform: translate3d(0px, 0px, 0.01px);
+}
+
+.holo-card--loading .holo-card__front {
+  opacity: 0;
+}
+
+.holo-card--loading .holo-card__back {
+  transform: rotateY(0deg);
+}
+
+.holo-card__shine,
+.holo-card__glare {
+  will-change:
+    transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;
+}
+
+.holo-card__shine {
+  display: grid;
+  transform: translateZ(1px);
+  overflow: hidden;
+  z-index: 3;
+  background: transparent;
+  background-size: cover;
+  background-position: center;
+  filter: brightness(0.85) contrast(2.75) saturate(0.65);
+  mix-blend-mode: color-dodge;
+  opacity: var(--card-opacity);
+}
+
+.holo-card__shine::before,
+.holo-card__shine::after {
+  --sunpillar-clr-1: var(--sunpillar-5);
+  --sunpillar-clr-2: var(--sunpillar-6);
+  --sunpillar-clr-3: var(--sunpillar-1);
+  --sunpillar-clr-4: var(--sunpillar-2);
+  --sunpillar-clr-5: var(--sunpillar-3);
+  --sunpillar-clr-6: var(--sunpillar-4);
+  grid-area: 1/1;
+  transform: translateZ(1px);
+  border-radius: var(--card-radius);
+}
+
+.holo-card__shine::after {
+  --sunpillar-clr-1: var(--sunpillar-6);
+  --sunpillar-clr-2: var(--sunpillar-1);
+  --sunpillar-clr-3: var(--sunpillar-2);
+  --sunpillar-clr-4: var(--sunpillar-3);
+  --sunpillar-clr-5: var(--sunpillar-4);
+  --sunpillar-clr-6: var(--sunpillar-5);
+  transform: translateZ(1.2px);
+}
+
+.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%
+  );
+  opacity: var(--card-opacity);
+  mix-blend-mode: overlay;
+}
+
+.holo-card--masked .holo-card__shine,
+.holo-card--masked .holo-card__shine::before,
+.holo-card--masked .holo-card__shine::after {
+  mask-image: var(--mask);
+  mask-size: cover;
+  mask-position: center center;
+}

package/src/styles/effects/cosmos.css

@@ -0,0 +1,143 @@
+.holo-card[data-effect="cosmos"] .holo-card__shine {
+  --space: 4%;
+
+  background-image:
+    var(--hc-cosmos-bottom),
+    repeating-linear-gradient(
+      82deg,
+      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)
+    ),
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(180, 100%, 89%, 0.5) 5%,
+      hsla(180, 14%, 57%, 0.3) 40%,
+      hsl(0, 0%, 0%) 130%
+    );
+
+  background-blend-mode: color-burn, multiply;
+
+  background-position:
+    var(--cosmosbg, center center),
+    calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
+    center center;
+
+  background-size:
+    cover,
+    400% 900%,
+    cover;
+
+  filter: brightness(1) contrast(1) saturate(0.8);
+  mix-blend-mode: color-dodge;
+}
+
+.holo-card[data-effect="cosmos"] .holo-card__shine::before {
+  content: "";
+  z-index: 2;
+
+  background-image:
+    var(--hc-cosmos-middle),
+    repeating-linear-gradient(
+      82deg,
+      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)
+    );
+
+  background-blend-mode: lighten, multiply;
+
+  background-position:
+    var(--cosmosbg, center center),
+    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
+    center center;
+
+  background-size:
+    cover,
+    400% 900%,
+    cover;
+
+  filter: brightness(1.25) contrast(1.75) saturate(0.8);
+  mix-blend-mode: overlay;
+}
+
+.holo-card[data-effect="cosmos"] .holo-card__shine::after {
+  content: "";
+  z-index: 3;
+
+  background-image:
+    var(--hc-cosmos-top),
+    repeating-linear-gradient(
+      82deg,
+      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)
+    );
+
+  background-blend-mode: multiply, multiply;
+
+  background-position:
+    var(--cosmosbg, center center),
+    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
+    center center;
+
+  background-size:
+    cover,
+    400% 900%,
+    cover;
+
+  filter: brightness(1.25) contrast(1.75) saturate(0.8);
+  mix-blend-mode: multiply;
+}
+
+.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%
+  );
+  filter: brightness(0.75) contrast(2) saturate(2);
+  mix-blend-mode: overlay;
+  opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)));
+}
+
+.holo-card[data-effect="cosmos"] .holo-card__glare::after {
+  content: "";
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsl(280, 100%, 96%) 5%,
+    hsl(0, 0%, 10%) 60%
+  );
+
+  filter: brightness(0.75) contrast(2.5) saturate(2);
+  mix-blend-mode: soft-light;
+  opacity: calc(1 - var(--pointer-from-top) * 0.75);
+}

package/src/styles/effects/glitter.css

@@ -0,0 +1,103 @@
+.holo-card[data-effect="glitter"] .holo-card__shine {
+  background-image:
+    var(--glitter), var(--glitter),
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(150, 20%, 10%, 1) 10%,
+      hsla(177, 22%, 80%, 0.1) 50%,
+      hsla(0, 0%, 95%, 0.98) 90%
+    );
+
+  background-size:
+    var(--glittersize) var(--glittersize),
+    var(--glittersize) var(--glittersize),
+    cover;
+  background-position:
+    40% 45%,
+    55% 55%,
+    center center;
+  background-blend-mode: soft-light, color-burn;
+  filter: brightness(1) contrast(1) saturate(0.9);
+}
+
+.holo-card[data-effect="glitter"] .holo-card__shine::before {
+  content: "";
+  mask-image: none !important;
+
+  background-image:
+    var(--foil),
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(50, 20%, 90%, 0.95) 10%,
+      rgba(181, 139, 164, 0.5) 50%,
+      hsl(0, 0%, 0%) 60%
+    );
+
+  background-size: cover, cover;
+  background-position:
+    center center,
+    center center;
+  background-blend-mode: color-burn;
+
+  mix-blend-mode: lighten;
+  filter: brightness(1) contrast(1) saturate(1);
+  opacity: 0.5;
+}
+
+.holo-card[data-effect="glitter"] .holo-card__shine::after {
+  content: "";
+  mask-image: none !important;
+
+  background-image: repeating-linear-gradient(
+    calc(var(--angle)),
+    var(--sunpillar-clr-1) calc(var(--space) * 1),
+    var(--sunpillar-clr-2) calc(var(--space) * 2),
+    var(--sunpillar-clr-3) calc(var(--space) * 3),
+    var(--sunpillar-clr-4) calc(var(--space) * 4),
+    var(--sunpillar-clr-5) calc(var(--space) * 5),
+    var(--sunpillar-clr-6) calc(var(--space) * 6),
+    var(--sunpillar-clr-1) calc(var(--space) * 7)
+  );
+
+  background-size: 400% 800%;
+  background-position: calc(50% + (50% - var(--background-x)) * 3) calc(50% + (50% - var(--background-y)) * 3);
+  filter: brightness(calc(0.75 - (var(--pointer-from-center) * 0.5))) contrast(1) saturate(1);
+  mix-blend-mode: saturation;
+}
+
+.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%
+  );
+  mix-blend-mode: 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%
+  );
+  filter: brightness(0.9) contrast(2);
+}
+
+.holo-card--masked[data-effect="glitter"] .holo-card__glare::after {
+  content: "";
+  mask-image: var(--mask);
+  mask-size: cover;
+
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsla(50, 20%, 90%, 0.75) 0%,
+    hsla(150, 20%, 30%, 0.65) 45%,
+    hsla(0, 0%, 0%, 1) 90%
+  );
+
+  filter: brightness(1) contrast(1.5);
+  mix-blend-mode: overlay;
+  opacity: 1;
+}