@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/card/index.tsx

@@ -1,13 +1,25 @@
 // @ts-nocheck
-import {
-  type Accessor,
-  type JSX,
-  createContext,
-  createMemo,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Card.tsx
+
+// Port of packages/@react-spectrum/s2/src/Card.tsx.
+
+import { Show, createContext, createMemo, useContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   GridListItem as HeadlessGridListItem,
   GridListSelectionCheckbox,
@@ -31,9 +43,12 @@ import { useProviderProps } from "../provider";
 import type { StyleString } from "../style";
 import { color, focusRing, lightDark, space, style } from "../style" with { type: "macro" };
 import { meshStrip } from "../style/meshStrip";
+import { createMeshField } from "./mesh-field";
+import { css } from "../style/style-macro" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import type { UnsafeClassName } from "../s2-internal/style-utils";
 import { getAllowedOverrides } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -65,8 +80,8 @@ export interface CardProps extends Omit<
   variant?: CardVariant;
   /**
    * The register's woven hex-mesh weave, painted behind the glass fill —
-   * `ambient` is the quiet mixed gray/blue/orange weave, `signal` the warm
-   * single-hue amber one. Only the filled variants take it; `tertiary` and
+   * `ambient` is the quiet mixed slate/blue/fuchsia weave, `signal` the
+   * single-hue detail-yellow one. Only the filled variants take it; `tertiary` and
    * `quiet` have no fill for a weave to sit under.
    */
   mesh?: CardMeshVariant;
@@ -99,6 +114,16 @@ export interface CardPreviewProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * full-bleed header bar reads sunk into the card rather than flush with it.
    */
   background?: "inset";
+  /**
+   * Local addition — no S2 counterpart. A corner tag pinned over the top-start of
+   * the media, drawn on the register's glass scrim: the media card's category
+   * stamp (TerminalGlassLab.tsx, §06). It cannot be a plain child because the
+   * preview clips its content to the card radius and the tag has to float above
+   * that clip; and it cannot be a context-styled `Badge`, because
+   * `getAllowedOverrides()` admits only positioning properties, so the scrim fill
+   * could not ride a `styles` override.
+   */
+  tag?: JSX.Element;
   /** Spectrum-defined generated classes. */
   styles?: StyleString;
   /** Additional CSS class name. Use only as a last resort. */
@@ -134,8 +159,100 @@ type CardStyleState = Partial<GridListItemRenderProps | LinkRenderProps> & {
   variant: CardVariant;
   isCardView?: boolean;
   isLink?: boolean;
+  /* The weave variant, so the signal card can take its own edge. Only the paint
+   * layers read `data-mesh`; the border is a real declared property, so it has to
+   * come through the style call rather than off the attribute. */
+  mesh?: CardMeshVariant;
 };
 
+/* Film grain, 180×180. The hover spotlight is seen through it, so the weave
+ * lights up as grains rather than as a clean radial wash. Verbatim from the
+ * handoff's `GRAIN` (glasselated.js). */
+const GRAIN = `url("data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'>" +
+    "<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>" +
+    "<feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -0.3'/></filter>" +
+    "<rect width='100%' height='100%' filter='url(#n)' fill='#fff'/></svg>",
+)}")`;
+
+/* The mesh card's two signature layers, a port of the handoff's `.mesh-card`
+ * rules. They are `css()` and not `style()` because both are pseudo-elements
+ * with multi-layer masks and an animated registered property — none of which
+ * the style macro can express.
+ *   ::after  — the cursor spotlight: an accent pool plus a brighter copy of the
+ *              card's own weave (`--gl-weave`), masked by the film grain so the
+ *              light reads as pixels. `z-index: -1` keeps it under the content,
+ *              which is why the root needs `isolation: isolate`.
+ *   ::before — the border ring, a radial mask on the padding box whose diameter
+ *              (`--bd`) steps outward from the cursor on hover.
+ * Both hover rules exclude a card that contains a hovered card, so nesting one
+ * mesh card inside another lights only the innermost one. */
+const meshField = css(`
+  position: relative;
+  isolation: isolate;
+  --ring-c: color-mix(in srgb, var(--accent-primary) 70%, transparent);
+  --scan-c: var(--accent-primary);
+
+  &[data-mesh="signal"] {
+    --ring-c: color-mix(in srgb, var(--yellow-500) 70%, transparent);
+    --scan-c: var(--yellow-500);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    background:
+      radial-gradient(circle var(--spot-r, 160px) at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--scan-c) 22%, transparent), transparent 100%),
+      var(--gl-weave, none);
+    background-position: 0 0, var(--gl-pos, 0 0);
+    mask-image:
+      var(--gl-grain, linear-gradient(#000, #000)),
+      radial-gradient(circle var(--spot-m, 150px) at var(--mx, 50%) var(--my, 50%), #000, transparent);
+    mask-size: 180px 180px, 100% 100%;
+    mask-composite: intersect;
+  }
+
+  &:hover:not(:has([data-mesh]:hover))::after {
+    opacity: 1;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: calc(var(--ring-w, 1px) + 1px);
+    pointer-events: none;
+    background: var(--ring-c);
+    transition:
+      --bd 0.6s steps(10, end),
+      padding 0.15s ease;
+    mask:
+      radial-gradient(ellipse var(--bd) var(--bd) at var(--mx, 50%) var(--my, 50%), #000 0% 66%, rgba(0, 0, 0, 0.55) 66% 84%, rgba(0, 0, 0, 0.25) 84% 94%, transparent 94%),
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: intersect, exclude;
+  }
+
+  &:hover:not(:has([data-mesh]:hover))::before {
+    --bd: 175%;
+    --ring-w: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after,
+    &::before {
+      transition: none;
+    }
+  }
+`);
+
 const card = style<CardStyleState>(
   {
     display: "flex",
@@ -182,6 +299,15 @@ const card = style<CardStyleState>(
     borderWidth: 1,
     borderColor: {
       default: "border-subtle",
+      /* The signal card is the register's one "look here" surface: the yellow detail
+       * weave behind the glass, and the edge tinted to match it so the card reads as a
+       * single yellow object rather than a neutral card with a yellow interior
+       * (TerminalGlassLab.tsx:248, the `ring-signal` card in §06). `detail-soft` is the
+       * 14%-alpha yellow the handoff draws — a tint of the edge, not a second border
+       * weight. Yellow, never fuchsia: fuchsia is reserved for the filled ask. */
+      mesh: {
+        signal: "detail-soft",
+      },
       variant: {
         tertiary: "transparent",
         quiet: "transparent",
@@ -499,6 +625,31 @@ const previewClip = style({
   overflow: "clip",
 });
 
+/* The media card's corner stamp. Pinned 10px in from the top-start corner over a
+ * blurred black scrim so it stays legible on any cover art, in the same micro-mono
+ * track the badge takes (`badge/index.tsx`): the theme's tracking scale stops at
+ * 0.1em, which is the rung it declares for this mono micro role, so the tag takes it
+ * rather than minting a rung for the drawn 0.12em. White ink on
+ * `transparent-black-700` (rgba(0,0,0,.69)) clears AA on any underlying image and
+ * does not flip by scheme — the scrim, not the page, is the ground. */
+const previewTag = style({
+  position: "absolute",
+  top: "[10px]",
+  insetStart: "[10px]",
+  zIndex: 1,
+  fontFamily: "code",
+  fontSize: "ui-xs",
+  fontWeight: "bold",
+  letterSpacing: "0.1em",
+  color: "white",
+  backgroundColor: "transparent-black-700",
+  backdropFilter: "blur(6px)",
+  borderRadius: "control",
+  paddingX: "[8px]",
+  paddingY: "[3px]",
+  pointerEvents: "none",
+});
+
 const collection = style({
   display: "grid",
   gridTemplateColumns: "repeat(3, 1fr)",
@@ -525,14 +676,14 @@ const collectionImage = style({
   userSelect: "none",
 });
 
+/* The register draws the asset card as a media card: a fixed 110px cover band with
+ * the art cropped to fill it (TerminalGlassLab.tsx, §06), not S2's square
+ * letterboxed thumbnail. The height is the same in both card-view layouts because
+ * the band is a property of the card, not of the layout that packs it. */
 const assetImage = style({
   width: "full",
-  aspectRatio: {
-    layout: {
-      grid: "square",
-    },
-  },
-  objectFit: "contain",
+  height: "[110px]",
+  objectFit: "cover",
   pointerEvents: "none",
   userSelect: "none",
 });
@@ -542,7 +693,7 @@ const assetIllustrationWrapper = style({
   alignItems: "center",
   justifyContent: "center",
   backgroundColor: "gray-100",
-  aspectRatio: "square",
+  height: "[110px]",
 });
 
 const assetIllustration = style({
@@ -687,8 +838,8 @@ function CardProviders(props: {
   children: JSX.Element;
 }): JSX.Element {
   return (
-    <ImageContext.Provider value={{ alt: "", styles: image({ layout: props.layout }) }}>
-      <TextContext.Provider
+    <ImageContext value={{ alt: "", styles: image({ layout: props.layout }) }}>
+      <TextContext
         value={{
           slots: {
             default: {},
@@ -697,10 +848,10 @@ function CardProviders(props: {
           },
         }}
       >
-        <ContentContext.Provider value={{ styles: content({ size: props.size }) }}>
-          <DividerContext.Provider value={{ size: "S" }}>
-            <FooterContext.Provider value={{ styles: footer }}>
-              <ActionMenuContext.Provider
+        <ContentContext value={{ styles: content({ size: props.size }) }}>
+          <DividerContext value={{ size: "S" }}>
+            <FooterContext value={{ styles: footer }}>
+              <ActionMenuContext
                 value={{
                   isQuiet: true,
                   size: actionButtonSize[props.size],
@@ -709,15 +860,15 @@ function CardProviders(props: {
                   styles: actionMenu,
                 }}
               >
-                <SkeletonContext.Provider value={props.isSkeleton}>
+                <SkeletonContext value={props.isSkeleton}>
                   <ImageCoordinator>{props.children}</ImageCoordinator>
-                </SkeletonContext.Provider>
-              </ActionMenuContext.Provider>
-            </FooterContext.Provider>
-          </DividerContext.Provider>
-        </ContentContext.Provider>
-      </TextContext.Provider>
-    </ImageContext.Provider>
+                </SkeletonContext>
+              </ActionMenuContext>
+            </FooterContext>
+          </DividerContext>
+        </ContentContext>
+      </TextContext>
+    </ImageContext>
   );
 }
 
@@ -765,9 +916,16 @@ function cardClassName(
     variant: CardVariant;
     isCardView?: boolean;
     isLink?: boolean;
+    mesh?: CardMeshVariant;
+    hasMesh?: boolean;
   },
 ): string {
-  return [local.UNSAFE_className, local.class, card(renderProps, local.styles)]
+  return [
+    renderProps.hasMesh === true ? meshField : undefined,
+    local.UNSAFE_className,
+    local.class,
+    card(renderProps, local.styles),
+  ]
     .filter(Boolean)
     .join(" ");
 }
@@ -799,10 +957,18 @@ function toInternalCardContext(input: {
  */
 export function Card(props: CardProps): JSX.Element {
   const providerProps = useProviderProps(props);
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(CardContext), props.slot);
   const merged = mergeProps(
     { size: "M" as CardSize, density: "regular" as CardDensity, variant: "primary" as CardVariant },
-    providerProps,
+    flags,
     contextProps ?? {},
     props,
   ) as CardProps;
@@ -859,12 +1025,33 @@ export function Card(props: CardProps): JSX.Element {
     return `var(--lightningcss-light, ${light}) var(--lightningcss-dark, ${dark})`;
   });
   const meshVariant = () => (meshBackground() != null ? local.mesh : undefined);
+  /* The spotlight paints a brighter copy of the same weave, so it has to be the
+   * same seeded string boosted — a second, unrelated weave would shear against
+   * the resting one under the cursor. Both ride the space-toggle atoms, like
+   * meshBackground(), and both are deterministic so SSR and hydration agree. */
+  const meshSpotlight = createMemo(() => {
+    const mesh = meshVariant();
+    if (mesh == null) return undefined;
+    const options = { variant: mesh, seed: local.meshSeed, boost: 2.4 } as const;
+    const light = meshStrip({ dark: false, ...options });
+    const dark = meshStrip({ dark: true, ...options });
+    return `var(--lightningcss-light, ${light}) var(--lightningcss-dark, ${dark})`;
+  });
   const rootStyle = () => {
     const backgroundImage = meshBackground();
     return backgroundImage == null
       ? local.UNSAFE_style
-      : { "background-image": backgroundImage, ...local.UNSAFE_style };
+      : {
+          "background-image": backgroundImage,
+          "--gl-weave": meshSpotlight(),
+          "--gl-grain": GRAIN,
+          ...local.UNSAFE_style,
+        };
   };
+  createMeshField(
+    () => rootElement,
+    () => meshVariant() != null,
+  );
   const children = () => (
     <CardProviders size={size()} layout={layout} isSkeleton={isSkeleton}>
       {renderCardChildren(local.children, { size: size() })}
@@ -890,6 +1077,8 @@ export function Card(props: CardProps): JSX.Element {
             variant: variant(),
             isCardView: false,
             isLink: true,
+            mesh: meshVariant(),
+            hasMesh: meshVariant() != null,
           })
         }
         style={(renderProps) => (isQuiet() ? (local.UNSAFE_style ?? {}) : press()(renderProps))}
@@ -899,7 +1088,7 @@ export function Card(props: CardProps): JSX.Element {
         data-mesh={meshVariant()}
       >
         {(renderProps: LinkRenderProps) => (
-          <InternalCardContext.Provider
+          <InternalCardContext
             value={toInternalCardContext({
               size: size(),
               itemKey: itemKey(),
@@ -910,7 +1099,7 @@ export function Card(props: CardProps): JSX.Element {
             })}
           >
             {children()}
-          </InternalCardContext.Provider>
+          </InternalCardContext>
         )}
       </HeadlessLink>
     );
@@ -927,6 +1116,8 @@ export function Card(props: CardProps): JSX.Element {
           density: density(),
           variant: variant(),
           isCardView: ElementType !== "div",
+          mesh: meshVariant(),
+          hasMesh: meshVariant() != null,
         })}
         style={rootStyle()}
         data-size={size()}
@@ -934,7 +1125,7 @@ export function Card(props: CardProps): JSX.Element {
         data-variant={variant()}
         data-mesh={meshVariant()}
       >
-        <InternalCardContext.Provider
+        <InternalCardContext
           value={toInternalCardContext({
             size: size(),
             itemKey: itemKey(),
@@ -942,7 +1133,7 @@ export function Card(props: CardProps): JSX.Element {
           })}
         >
           {children()}
-        </InternalCardContext.Provider>
+        </InternalCardContext>
       </div>
     );
   }
@@ -961,6 +1152,8 @@ export function Card(props: CardProps): JSX.Element {
           variant: variant(),
           isCardView: true,
           isLink: !!local.href,
+          mesh: meshVariant(),
+          hasMesh: meshVariant() != null,
         })
       }
       style={(renderProps) => (isQuiet() ? (local.UNSAFE_style ?? {}) : press()(renderProps))}
@@ -973,7 +1166,7 @@ export function Card(props: CardProps): JSX.Element {
         const isCheckboxSelection =
           renderProps.selectionMode !== "none" && renderProps.selectionBehavior === "toggle";
         return (
-          <InternalCardContext.Provider
+          <InternalCardContext
             value={toInternalCardContext({
               size: size(),
               itemKey: itemKey(),
@@ -988,7 +1181,7 @@ export function Card(props: CardProps): JSX.Element {
             {!isQuiet() && <SelectionIndicator />}
             {!isQuiet() && isCheckboxSelection && <CardCheckbox />}
             <div class={displayContents}>{children()}</div>
-          </InternalCardContext.Provider>
+          </InternalCardContext>
         );
       }}
     </HeadlessGridListItem>
@@ -1001,6 +1194,7 @@ export function CardPreview(props: CardPreviewProps): JSX.Element {
   const [local, domProps] = splitProps(props, [
     "children",
     "background",
+    "tag",
     "styles",
     "UNSAFE_className",
     "UNSAFE_style",
@@ -1044,9 +1238,10 @@ export function CardPreview(props: CardPreviewProps): JSX.Element {
     >
       {context.isQuiet && <SelectionIndicator />}
       {context.isQuiet && context.isCheckboxSelection && <CardCheckbox />}
+      <Show when={local.tag}>{(tag) => <div class={previewTag}>{tag()}</div>}</Show>
       <div class={previewClip}>
         {isAssetPreview ? (
-          <IconContext.Provider
+          <IconContext
             value={{
               render: (icon) => (
                 <SkeletonWrapper>
@@ -1057,7 +1252,7 @@ export function CardPreview(props: CardPreviewProps): JSX.Element {
             }}
           >
             {local.children}
-          </IconContext.Provider>
+          </IconContext>
         ) : (
           local.children
         )}
@@ -1074,21 +1269,22 @@ export function CollectionCardPreview(props: CardPreviewProps): JSX.Element {
         {/* `collectionImage` takes no size condition, so the macro bakes it to a class string,
             not a selector function — passing `size` here threw at render. Inherited from the
             port; unnoticed because nothing rendered a collection preview until now. */}
-        <ImageContext.Provider value={{ styles: collectionImage }}>
-          {props.children}
-        </ImageContext.Provider>
+        <ImageContext value={{ styles: collectionImage }}>{props.children}</ImageContext>
       </div>
     </CardPreview>
   );
 }
 
 export function AssetCard(props: AssetCardProps): JSX.Element {
-  const { layout } = useContext(InternalCardViewContext);
   return (
     <Card {...props} density="regular">
       {(renderProps) => (
-        <ImageContext.Provider value={{ alt: "", styles: assetImage({ layout }) }}>
-          <IllustrationContext.Provider
+        /* `assetImage` no longer takes a `layout` condition — the register's cover band
+           is one height in both card-view layouts — so the macro bakes it to a class
+           string rather than a selector function, and calling it would throw. Same trap
+           `collectionImage` documents a few components up. */
+        <ImageContext value={{ alt: "", styles: assetImage }}>
+          <IllustrationContext
             value={{
               render: (icon) => (
                 <SkeletonWrapper>
@@ -1098,11 +1294,11 @@ export function AssetCard(props: AssetCardProps): JSX.Element {
               styles: assetIllustration,
             }}
           >
-            <InternalAssetPreviewContext.Provider value={true}>
+            <InternalAssetPreviewContext value={true}>
               {renderCardChildren(props.children, renderProps)}
-            </InternalAssetPreviewContext.Provider>
-          </IllustrationContext.Provider>
-        </ImageContext.Provider>
+            </InternalAssetPreviewContext>
+          </IllustrationContext>
+        </ImageContext>
       )}
     </Card>
   );
@@ -1112,8 +1308,8 @@ export function UserCard(props: UserCardProps): JSX.Element {
   return (
     <Card {...props} density="spacious">
       {(renderProps) => (
-        <ImageContext.Provider value={{ alt: "", styles: userImage }}>
-          <AvatarContext.Provider
+        <ImageContext value={{ alt: "", styles: userImage }}>
+          <AvatarContext
             value={{
               size: avatarSize[renderProps.size],
               UNSAFE_style: {
@@ -1124,8 +1320,8 @@ export function UserCard(props: UserCardProps): JSX.Element {
             }}
           >
             {renderCardChildren(props.children, renderProps)}
-          </AvatarContext.Provider>
-        </ImageContext.Provider>
+          </AvatarContext>
+        </ImageContext>
       )}
     </Card>
   );
@@ -1135,7 +1331,7 @@ export function ProductCard(props: ProductCardProps): JSX.Element {
   return (
     <Card {...props} density="spacious">
       {(renderProps) => (
-        <ImageContext.Provider
+        <ImageContext
           value={{
             slots: {
               preview: {
@@ -1149,14 +1345,14 @@ export function ProductCard(props: ProductCardProps): JSX.Element {
             },
           }}
         >
-          <FooterContext.Provider value={{ styles: mergeStyles(footer, productFooter) }}>
-            <ButtonContext.Provider value={{ size: buttonSize[renderProps.size] }}>
-              <LinkButtonContext.Provider value={{ size: buttonSize[renderProps.size] }}>
+          <FooterContext value={{ styles: mergeStyles(footer, productFooter) }}>
+            <ButtonContext value={{ size: buttonSize[renderProps.size] }}>
+              <LinkButtonContext value={{ size: buttonSize[renderProps.size] }}>
                 {renderCardChildren(props.children, renderProps)}
-              </LinkButtonContext.Provider>
-            </ButtonContext.Provider>
-          </FooterContext.Provider>
-        </ImageContext.Provider>
+              </LinkButtonContext>
+            </ButtonContext>
+          </FooterContext>
+        </ImageContext>
       )}
     </Card>
   );

package/src/card/mesh-field.ts

@@ -0,0 +1,64 @@
+/* The mesh card's cursor field. Ported from the frozen external design
+ * repository's framework-neutral `glasselated.js` (`onMove` + `align`; see
+ * CREDITS.md, "Glasselated design lane"), which drove it off a document-wide
+ * `.mesh-card` query; here each Card owns its own listener so the primitive
+ * needs no registry and cleans up with the component.
+ *
+ * Two jobs, both pure paint:
+ *   • `--mx` / `--my` — the cursor position in the card's own coordinates, which
+ *     positions the hover spotlight and the spreading border ring.
+ *   • `background-position` / `--gl-pos` — the weave is anchored to the page,
+ *     not to the card, so neighbouring cards read as windows onto one continuous
+ *     mesh rather than as tiles that each restart the pattern. That alignment
+ *     has to be re-run whenever layout moves the card.
+ *
+ * Nothing here runs on the server: the resting values are the CSS fallbacks
+ * (`50%`, `0 0`), so a server render and its hydration pass agree. */
+import { createEffect, onCleanup, createTrackedEffect } from "solid-js";
+
+export function createMeshField(
+  getElement: () => HTMLElement | undefined,
+  isEnabled: () => boolean,
+): void {
+  const align = (): void => {
+    const element = getElement();
+    if (!element) return;
+    const rect = element.getBoundingClientRect();
+    const position = `${String(-(rect.left + window.scrollX))}px ${String(-(rect.top + window.scrollY))}px`;
+    element.style.backgroundPosition = position;
+    element.style.setProperty("--gl-pos", position);
+  };
+
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
+    if (!isEnabled()) return;
+    let frame = 0;
+    const onMove = (event: MouseEvent): void => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        const element = getElement();
+        if (!element) return;
+        const rect = element.getBoundingClientRect();
+        element.style.setProperty("--mx", `${String(event.clientX - rect.left)}px`);
+        element.style.setProperty("--my", `${String(event.clientY - rect.top)}px`);
+      });
+    };
+    document.addEventListener("mousemove", onMove);
+    window.addEventListener("resize", align);
+    align();
+    // Fonts and images settle after first paint and move the card under the weave.
+    const settle = window.setTimeout(align, 400);
+    _s2Cleanups.push(() => {
+      document.removeEventListener("mousemove", onMove);
+      window.removeEventListener("resize", align);
+      window.clearTimeout(settle);
+      if (frame) cancelAnimationFrame(frame);
+    });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
+  });
+}