@kongyo2/cards-css 0.2.1 → 0.3.1

package/src/palette.ts

@@ -0,0 +1,195 @@
+import type { PaletteOptions, PalettePreset } from "./types.js";
+
+/** Built-in foil colour schemes, keyed by {@link PalettePreset}. */
+export const PALETTES: Record<PalettePreset, PaletteOptions> = {
+  rainbow: {
+    sunpillars: [
+      "hsl(2, 100%, 73%)",
+      "hsl(53, 100%, 69%)",
+      "hsl(93, 100%, 69%)",
+      "hsl(176, 100%, 76%)",
+      "hsl(228, 100%, 74%)",
+      "hsl(283, 100%, 73%)",
+    ],
+    spectrum: ["#f80e35", "#eedf10", "#21e985", "#0dbde9", "#c929f1"],
+    cosmos: [
+      "hsl(53, 65%, 60%)",
+      "hsl(93, 56%, 50%)",
+      "hsl(176, 54%, 49%)",
+      "hsl(228, 59%, 55%)",
+      "hsl(283, 60%, 55%)",
+      "hsl(326, 59%, 51%)",
+    ],
+  },
+  gold: {
+    sunpillars: [
+      "hsl(45, 100%, 80%)",
+      "hsl(38, 100%, 68%)",
+      "hsl(50, 100%, 78%)",
+      "hsl(33, 95%, 62%)",
+      "hsl(48, 100%, 85%)",
+      "hsl(40, 100%, 70%)",
+    ],
+    spectrum: ["#8c5a12", "#ffd24a", "#fff0b0", "#e0962a", "#6b3f06"],
+    cosmos: [
+      "hsl(45, 80%, 65%)",
+      "hsl(40, 75%, 58%)",
+      "hsl(36, 70%, 52%)",
+      "hsl(50, 85%, 70%)",
+      "hsl(33, 65%, 48%)",
+      "hsl(28, 70%, 55%)",
+    ],
+    edge: "hsl(45, 100%, 78%)",
+    glow: "hsl(45, 100%, 80%)",
+  },
+  aurora: {
+    sunpillars: [
+      "hsl(150, 90%, 72%)",
+      "hsl(170, 85%, 68%)",
+      "hsl(190, 90%, 72%)",
+      "hsl(260, 85%, 78%)",
+      "hsl(140, 80%, 70%)",
+      "hsl(200, 90%, 74%)",
+    ],
+    spectrum: ["#10b981", "#34d399", "#a7f3d0", "#22d3ee", "#8b5cf6"],
+    cosmos: [
+      "hsl(160, 60%, 55%)",
+      "hsl(180, 55%, 50%)",
+      "hsl(200, 60%, 55%)",
+      "hsl(260, 55%, 58%)",
+      "hsl(150, 55%, 52%)",
+      "hsl(290, 50%, 55%)",
+    ],
+    edge: "hsl(160, 90%, 80%)",
+    glow: "hsl(170, 100%, 85%)",
+  },
+  ruby: {
+    sunpillars: [
+      "hsl(350, 100%, 75%)",
+      "hsl(330, 100%, 72%)",
+      "hsl(10, 100%, 72%)",
+      "hsl(300, 90%, 72%)",
+      "hsl(355, 100%, 80%)",
+      "hsl(20, 100%, 70%)",
+    ],
+    spectrum: ["#e11d48", "#fb7185", "#fecdd3", "#f43f5e", "#9f1239"],
+    cosmos: [
+      "hsl(350, 65%, 58%)",
+      "hsl(330, 60%, 55%)",
+      "hsl(10, 65%, 58%)",
+      "hsl(300, 55%, 55%)",
+      "hsl(355, 60%, 52%)",
+      "hsl(20, 60%, 55%)",
+    ],
+    edge: "hsl(350, 100%, 82%)",
+    glow: "hsl(345, 100%, 85%)",
+  },
+  sapphire: {
+    sunpillars: [
+      "hsl(210, 100%, 75%)",
+      "hsl(190, 100%, 72%)",
+      "hsl(230, 100%, 76%)",
+      "hsl(170, 90%, 70%)",
+      "hsl(250, 90%, 78%)",
+      "hsl(200, 100%, 74%)",
+    ],
+    spectrum: ["#1d4ed8", "#3b82f6", "#bfdbfe", "#06b6d4", "#4338ca"],
+    cosmos: [
+      "hsl(210, 65%, 58%)",
+      "hsl(190, 60%, 55%)",
+      "hsl(230, 60%, 58%)",
+      "hsl(170, 55%, 52%)",
+      "hsl(250, 55%, 58%)",
+      "hsl(200, 60%, 55%)",
+    ],
+    edge: "hsl(205, 100%, 80%)",
+    glow: "hsl(200, 100%, 85%)",
+  },
+  mono: {
+    sunpillars: [
+      "hsl(0, 0%, 92%)",
+      "hsl(0, 0%, 82%)",
+      "hsl(0, 0%, 96%)",
+      "hsl(0, 0%, 78%)",
+      "hsl(0, 0%, 88%)",
+      "hsl(0, 0%, 84%)",
+    ],
+    spectrum: ["#9ca3af", "#e5e7eb", "#ffffff", "#d1d5db", "#6b7280"],
+    cosmos: [
+      "hsl(0, 0%, 75%)",
+      "hsl(0, 0%, 68%)",
+      "hsl(0, 0%, 82%)",
+      "hsl(0, 0%, 62%)",
+      "hsl(0, 0%, 78%)",
+      "hsl(0, 0%, 70%)",
+    ],
+    edge: "hsl(0, 0%, 90%)",
+    glow: "hsl(0, 0%, 92%)",
+  },
+};
+
+/** Merge a palette's `preset` base with its explicit overrides into a flat scheme. */
+export const resolvePalette = (palette: PaletteOptions): PaletteOptions => {
+  const base = palette.preset ? PALETTES[palette.preset] : undefined;
+  const merged: PaletteOptions = { ...base, ...palette };
+  delete merged.preset;
+  return merged;
+};
+
+const SPECTRUM_VARS = ["--red", "--yellow", "--green", "--blue", "--violet"] as const;
+
+/** Every CSS custom property the palette can own — used to clear stale values when swapping palettes. */
+export const PALETTE_VARIABLES: string[] = [
+  "--sunpillar-1",
+  "--sunpillar-2",
+  "--sunpillar-3",
+  "--sunpillar-4",
+  "--sunpillar-5",
+  "--sunpillar-6",
+  ...SPECTRUM_VARS,
+  "--cosmos-clr-1",
+  "--cosmos-clr-2",
+  "--cosmos-clr-3",
+  "--cosmos-clr-4",
+  "--cosmos-clr-5",
+  "--cosmos-clr-6",
+  "--card-edge",
+  "--card-back",
+  "--card-glow",
+];
+
+const cycleInto = (vars: Record<string, string>, prefix: string, count: number, colors: string[]): void => {
+  if (colors.length === 0) {
+    return;
+  }
+  for (let i = 0; i < count; i += 1) {
+    vars[`${prefix}${i + 1}`] = colors[i % colors.length] as string;
+  }
+};
+
+/** Convert a (resolved or raw) palette into the CSS custom properties it drives. */
+export const paletteToCssVariables = (palette: PaletteOptions): Record<string, string> => {
+  const resolved = resolvePalette(palette);
+  const vars: Record<string, string> = {};
+  if (resolved.sunpillars) {
+    cycleInto(vars, "--sunpillar-", 6, resolved.sunpillars);
+  }
+  if (resolved.spectrum && resolved.spectrum.length > 0) {
+    SPECTRUM_VARS.forEach((name, i) => {
+      vars[name] = resolved.spectrum![i % resolved.spectrum!.length] as string;
+    });
+  }
+  if (resolved.cosmos) {
+    cycleInto(vars, "--cosmos-clr-", 6, resolved.cosmos);
+  }
+  if (resolved.edge) {
+    vars["--card-edge"] = resolved.edge;
+  }
+  if (resolved.back) {
+    vars["--card-back"] = resolved.back;
+  }
+  if (resolved.glow) {
+    vars["--card-glow"] = resolved.glow;
+  }
+  return vars;
+};

package/src/spring.ts

@@ -39,6 +39,10 @@ interface AxisDynamics {
   precision: number;
 }
 
+const MAX_FRAME_DELTA = 2;
+
+const clampFrameDelta = (dt: number): number => Math.max(0, Math.min(dt, MAX_FRAME_DELTA));
+
 const tickScalar = (
   ctx: FrameContext,
   axis: AxisDynamics,
@@ -100,7 +104,8 @@ export class Spring<T extends SpringValue> {
   private cancelTask = false;
   private task: TaskHandle | null = null;
   private lastTime = 0;
-  private currentToken: object | null = null;
+  private settlePromise: Promise<void> | null = null;
+  private settleResolve: (() => void) | null = null;
   private readonly subscribers = new Subscribers<T>(() => this.value);
 
   constructor(value: T, opts: SpringOpts = {}) {
@@ -127,7 +132,6 @@ export class Spring<T extends SpringValue> {
 
   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;
@@ -139,6 +143,7 @@ export class Spring<T extends SpringValue> {
       this.lastValue = newValue;
       this.value = newValue;
       this.notify();
+      this.resolveSettle();
       return Promise.resolve();
     }
 
@@ -148,11 +153,10 @@ export class Spring<T extends SpringValue> {
       this.invMass = 0;
     }
 
-    let handle = this.task;
-    if (!handle) {
+    if (!this.task) {
       this.lastTime = now();
       this.cancelTask = false;
-      handle = loop((time) => {
+      this.task = loop((time) => {
         if (this.cancelTask) {
           this.cancelTask = false;
           this.task = null;
@@ -166,7 +170,7 @@ export class Spring<T extends SpringValue> {
           precision: this.precision,
           axes: this.axes,
           settled: true,
-          dt: ((time - this.lastTime) * 60) / 1000,
+          dt: clampFrameDelta(((time - this.lastTime) * 60) / 1000),
         };
         const next = tick(ctx, this.lastValue, this.value, this.targetValue);
         this.lastTime = time;
@@ -175,21 +179,32 @@ export class Spring<T extends SpringValue> {
         this.notify();
         if (ctx.settled) {
           this.task = null;
+          this.resolveSettle();
         }
         return !ctx.settled;
       });
-      this.task = handle;
     }
 
-    return new Promise<void>((fulfil) => {
-      void handle.promise.then(() => (token === this.currentToken ? fulfil() : undefined));
-    });
+    if (!this.settlePromise) {
+      this.settlePromise = new Promise<void>((resolve) => {
+        this.settleResolve = resolve;
+      });
+    }
+    return this.settlePromise;
+  }
+
+  private resolveSettle(): void {
+    const resolve = this.settleResolve;
+    this.settlePromise = null;
+    this.settleResolve = null;
+    resolve?.();
   }
 
   destroy(): void {
     this.cancelTask = true;
     this.task?.abort();
     this.task = null;
+    this.resolveSettle();
     this.subscribers.clear();
   }
 }

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/ticker.ts

@@ -5,13 +5,9 @@ const raf: (cb: (time: number) => void) => void =
     ? (cb) => requestAnimationFrame(cb)
     : (cb) => setTimeout(() => cb(now()), 1000 / 60);
 
-interface Task {
-  c: (time: number) => boolean;
-  f: () => void;
-}
+type Task = (time: number) => boolean;
 
 export interface TaskHandle {
-  promise: Promise<void>;
   abort: () => void;
 }
 
@@ -19,9 +15,8 @@ const tasks = new Set<Task>();
 
 const runTasks = (time: number): void => {
   tasks.forEach((task) => {
-    if (!task.c(time)) {
+    if (!task(time)) {
       tasks.delete(task);
-      task.f();
     }
   });
   if (tasks.size !== 0) {
@@ -29,18 +24,14 @@ const runTasks = (time: number): void => {
   }
 };
 
-export const loop = (callback: (time: number) => boolean): TaskHandle => {
-  let task: Task;
+export const loop = (callback: Task): TaskHandle => {
   if (tasks.size === 0) {
     raf(runTasks);
   }
+  tasks.add(callback);
   return {
-    promise: new Promise<void>((fulfil) => {
-      task = { c: callback, f: fulfil };
-      tasks.add(task);
-    }),
     abort: () => {
-      tasks.delete(task);
+      tasks.delete(callback);
     },
   };
 };