@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/transitions/effects/shader/warps.js

@@ -0,0 +1,141 @@
+// Shader transitions that move pixels: displacement, stretchWarp, ripple,
+// chromaticShift, liquidMorph. Our own GLSL (WebGL1); see ../../shader/program.ts
+// for getFrom / getTo, u_progress and the helpers every fragment gets.
+import { defineShader, travel, within } from "./kit.js";
+export const DISPLACEMENT_FRAGMENT = `
+uniform float u_strength;
+uniform float u_scale;
+uniform sampler2D u_map;
+uniform float u_hasMap;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  float d = u_hasMap > 0.5 ? texture2D(u_map, uv).r : sx_fbm(uv * vec2(sx_aspect(), 1.0) * u_scale);
+  vec2 shift = vec2(d) * u_strength;
+  vec4 a = getFrom(uv + shift * p);
+  vec4 b = getTo(uv - shift * (1.0 - p));
+  return mix(a, b, smoothstep(0.0, 1.0, p));
+}
+`;
+/** Both pictures drift along a displacement map (noise, or yours) while they cross. */
+export function displacement(options = {}) {
+    return defineShader("displacement", DISPLACEMENT_FRAGMENT, {
+        uniforms: { u_strength: within(options.strength ?? 0.3, 0, 2), u_scale: within(options.scale ?? 2.5, 0.1, 40) },
+        map: options.map,
+        fallback: options.fallback,
+    });
+}
+export const STRETCH_WARP_FRAGMENT = `
+uniform vec2 u_dir;
+uniform float u_strength;
+uniform float u_repeat;
+float sx_mirror(float x) { return 1.0 - abs(1.0 - mod(x, 2.0)); }
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 dir = sx_dir(u_dir);
+  vec2 c = uv - 0.5;
+  float along = dot(c, dir);
+  vec2 side = c - dir * along;
+  // a: 0 at the edge the new picture enters from, 1 at the far edge
+  float a = along + 0.5;
+  float bend = 1.0 + sin(p * SX_PI) * u_strength * 2.0;
+  if (a < p) {
+    float t = 1.0 - pow(1.0 - a / max(p, 0.0001), bend);
+    t = sx_mirror(t * mix(u_repeat, 1.0, p));
+    return getTo(0.5 + dir * (t - 0.5) + side);
+  }
+  float f = pow((a - p) / max(1.0 - p, 0.0001), bend);
+  return getFrom(0.5 + dir * (f - 0.5) + side);
+}
+`;
+/** The new picture pushes in, stretched and repeated, squashing the old one ahead of it. */
+export function stretchWarp(options = {}) {
+    return defineShader("stretchWarp", STRETCH_WARP_FRAGMENT, {
+        uniforms: {
+            u_dir: travel(options.from ?? "start"),
+            u_strength: within(options.strength ?? 0.6, 0, 4),
+            u_repeat: within(options.repeat ?? 2, 1, 12),
+        },
+        fallback: options.fallback,
+    });
+}
+export const RIPPLE_FRAGMENT = `
+uniform vec2 u_point;
+uniform float u_fixed;
+uniform float u_amplitude;
+uniform float u_width;
+vec4 transition(vec2 uv) {
+  vec2 o = u_fixed > 0.5 ? vec2(u_rtl > 0.5 ? 1.0 - u_point.x : u_point.x, u_point.y) : u_origin;
+  vec2 aspect = vec2(sx_aspect(), 1.0);
+  vec2 d = (uv - o) * aspect;
+  float r = length(d);
+  float far = length(max(o, 1.0 - o) * aspect);
+  float front = mix(-u_width, far + u_width, u_progress);
+  float x = (r - front) / u_width;
+  float ring = exp(-x * x * 2.0);
+  vec2 off = (d / max(r, 0.0001)) * sin(x * 9.0) * u_amplitude * ring / aspect;
+  float inside = 1.0 - smoothstep(-0.5, 0.5, x);
+  return mix(getFrom(uv + off), getTo(uv + off), inside);
+}
+`;
+/** A water ring spreads from the tap point (or the centre) and leaves the new picture behind it. */
+export function ripple(options = {}) {
+    const origin = options.origin ?? "pointer";
+    // [x, y] counts y from the top, like iris(); the shader's y runs up
+    const point = origin === "pointer" || origin === "center" ? [0.5, 0.5] : [origin[0], 1 - origin[1]];
+    return defineShader("ripple", RIPPLE_FRAGMENT, {
+        uniforms: {
+            u_point: point,
+            u_fixed: origin === "pointer" ? 0 : 1,
+            u_amplitude: within(options.amplitude ?? 0.03, 0, 0.3),
+            u_width: within(options.width ?? 0.25, 0.02, 2),
+        },
+        fallback: options.fallback,
+    });
+}
+export const CHROMATIC_SHIFT_FRAGMENT = `
+uniform vec2 u_dir;
+uniform float u_strength;
+vec4 sx_splitFrom(vec2 uv, vec2 off) {
+  vec4 g = getFrom(uv);
+  return vec4(getFrom(uv - off).r, g.g, getFrom(uv + off).b, g.a);
+}
+vec4 sx_splitTo(vec2 uv, vec2 off) {
+  vec4 g = getTo(uv);
+  return vec4(getTo(uv - off).r, g.g, getTo(uv + off).b, g.a);
+}
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 dir = sx_dir(u_dir);
+  vec2 off = dir * sin(p * SX_PI) * u_strength;
+  vec4 a = sx_splitFrom(uv - dir * p * 0.06, off);
+  vec4 b = sx_splitTo(uv + dir * (1.0 - p) * 0.06, off);
+  return mix(a, b, smoothstep(0.25, 0.75, p));
+}
+`;
+/** The colour channels split apart while the pictures slide a little and cross. */
+export function chromaticShift(options = {}) {
+    return defineShader("chromaticShift", CHROMATIC_SHIFT_FRAGMENT, {
+        uniforms: { u_dir: travel(options.from ?? "start"), u_strength: within(options.strength ?? 0.04, 0, 0.5) },
+        fallback: options.fallback,
+    });
+}
+export const LIQUID_MORPH_FRAGMENT = `
+uniform float u_strength;
+uniform float u_scale;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 q = uv * vec2(sx_aspect(), 1.0) * u_scale;
+  vec2 flow = vec2(sx_fbm(q + vec2(0.0, p * 1.5)), sx_fbm(q + vec2(5.2, 1.3 - p * 1.5))) - 0.5;
+  vec2 off = flow * u_strength * sin(p * SX_PI);
+  float n = sx_fbm(q * 0.7 + 3.1);
+  float m = smoothstep(n - 0.25, n + 0.25, p * 1.5 - 0.25);
+  return mix(getFrom(uv + off * (1.0 + p)), getTo(uv - off * (2.0 - p)), m);
+}
+`;
+/** The pictures flow into each other along a liquid noise. */
+export function liquidMorph(options = {}) {
+    return defineShader("liquidMorph", LIQUID_MORPH_FRAGMENT, {
+        uniforms: { u_strength: within(options.strength ?? 0.12, 0, 1), u_scale: within(options.scale ?? 2, 0.1, 20) },
+        fallback: options.fallback,
+    });
+}

package/dist/transitions/effects/stage/cardStack.d.ts

@@ -0,0 +1,26 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+export interface CardStackOptions {
+    /** Cards visible behind the top one. Default `3`. */
+    readonly depth?: number;
+    /** Pixels each card behind peeks out past the one in front (towards the top on a horizontal carousel). Default `16`. */
+    readonly offset?: number;
+    /** How much smaller each card behind is. Default `0.06`. */
+    readonly shrink?: number;
+    /** Size of the top card relative to the stage, leaving room for the pile to show. Default `0.86`. */
+    readonly fit?: number;
+    /**
+     * How the top card leaves. `"slide"`: straight off, flat. `"throw"`: it
+     * turns as it goes (by `turn` degrees once it has left) and fades out, like
+     * a card swiped off a deck. Default `"slide"`.
+     */
+    readonly exit?: "slide" | "throw";
+    /** Degrees a thrown card has turned once it has left. Only with `exit: "throw"`. Default `12`. */
+    readonly turn?: number;
+}
+/**
+ * A neat pile: the cards behind peek out above the top one, each a little
+ * smaller and darker. The top card slides straight off (or, with
+ * `exit: "throw"`, turns and fades as it goes) and the pile moves up one
+ * place. (The "cards stack" look, rebuilt; no rotation by default, unlike `cards`.)
+ */
+export declare function cardStack(options?: CardStackOptions): CarouselLayout;

package/dist/transitions/effects/stage/cardStack.js

@@ -0,0 +1,46 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+import { addCross, addMain, clamp01, dim, spin } from "./kit.js";
+/**
+ * A neat pile: the cards behind peek out above the top one, each a little
+ * smaller and darker. The top card slides straight off (or, with
+ * `exit: "throw"`, turns and fades as it goes) and the pile moves up one
+ * place. (The "cards stack" look, rebuilt; no rotation by default, unlike `cards`.)
+ */
+export function cardStack(options = {}) {
+    const depth = options.depth ?? 3;
+    const offset = options.offset ?? 16;
+    const shrink = options.shrink ?? 0.06;
+    const fit = options.fit ?? 0.86;
+    const thrown = options.exit === "throw";
+    const turnBy = options.turn ?? 12;
+    return {
+        ...composeLayout("cardStack", stack({ order: "outgoing", ahead: depth }), (buf, slot, frame) => {
+            if (buf.opacity === 0)
+                return;
+            const d = slot.distance;
+            // the whole pile (top card + the peeks above it) sits centred on the stage
+            const centre = (depth * offset) / 2;
+            if (d >= 0) {
+                const k = 1 - Math.min(d, depth) * shrink;
+                // peek out past the card in front by `offset`, measured from its top edge
+                const lift = (frame.slotCross * fit * (1 - k)) / 2 + d * offset;
+                addCross(buf, frame, centre - lift);
+                buf.scaleX = buf.scaleY = fit * k;
+                dim(buf, Math.min(d, depth) * 0.12);
+                if (d > depth)
+                    buf.opacity = clamp01(depth + 1 - d);
+            }
+            else {
+                addCross(buf, frame, centre);
+                addMain(buf, frame, d * frame.slotMain * 1.1);
+                buf.scaleX = buf.scaleY = fit;
+                if (thrown) {
+                    spin(buf, frame, d * turnBy);
+                    buf.opacity = clamp01(1 + d);
+                }
+            }
+        }),
+        reach: depth + 1,
+    };
+}

package/dist/transitions/effects/stage/cardStack.schema.d.ts

@@ -0,0 +1 @@
+export declare const CARD_STACK_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/cardStack.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CARD_STACK_SCHEMA = defineSchema()({
+    id: "cardStack",
+    family: "transition",
+    factory: "cardStack",
+    fields: {
+        depth: { kind: "integer", label: "Cards behind", min: 1, max: 6, default: 3 },
+        offset: { kind: "number", label: "Peek", min: 0, max: 48, step: 1, unit: "px", default: 16 },
+        shrink: { kind: "number", label: "Shrink each", min: 0, max: 0.2, step: 0.01, default: 0.06 },
+        fit: { kind: "number", label: "Card size", min: 0.6, max: 1, step: 0.01, default: 0.86 },
+        exit: { kind: "choice", label: "Exit", values: ["slide", "throw"], labels: { slide: "Slide off", throw: "Throw (turn and fade)" }, default: "slide" },
+        turn: { kind: "number", label: "Throw turn", min: 0, max: 45, step: 1, unit: "°", default: 12, help: "With exit: throw." },
+    },
+});

package/dist/transitions/effects/stage/cards.d.ts

@@ -0,0 +1,22 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+export interface CardsOptions {
+    /** Cards visible in the deck behind the top one. Default `3`. */
+    readonly depth?: number;
+    /** Pixels each card in the deck sits further along. Default `14`. */
+    readonly offset?: number;
+    /** Degrees each card in the deck is turned. Default `3`. */
+    readonly rotate?: number;
+    /** Degrees the swiped card tilts on its way out. Default `10`. */
+    readonly angle?: number;
+    /** Size of the top card relative to the stage, leaving room for the deck to show. Default `0.86`. */
+    readonly fit?: number;
+}
+/**
+ * A hand of cards: the top card is swiped aside and slips under the deck while
+ * the next one rises to the front. The deck behind fans out a little, each card
+ * nudged along and turned a few degrees.
+ *
+ * `order: "nearest"` decides who is on top: the swiped card while it is still
+ * the closer one, then the rising card, so the swiped card ends up under the deck.
+ */
+export declare function cards(options?: CardsOptions): CarouselLayout;

package/dist/transitions/effects/stage/cards.js

@@ -0,0 +1,38 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+import { addMain, clamp01, spin } from "./kit.js";
+/**
+ * A hand of cards: the top card is swiped aside and slips under the deck while
+ * the next one rises to the front. The deck behind fans out a little, each card
+ * nudged along and turned a few degrees.
+ *
+ * `order: "nearest"` decides who is on top: the swiped card while it is still
+ * the closer one, then the rising card, so the swiped card ends up under the deck.
+ */
+export function cards(options = {}) {
+    const depth = options.depth ?? 3;
+    const offset = options.offset ?? 14;
+    const rotate = options.rotate ?? 3;
+    const angle = options.angle ?? 10;
+    const fit = options.fit ?? 0.86;
+    return {
+        ...composeLayout("cards", stack({ order: "nearest", ahead: depth }), (buf, slot, frame) => {
+            if (buf.opacity === 0)
+                return;
+            const d = slot.distance;
+            if (d >= 0) {
+                addMain(buf, frame, d * offset);
+                spin(buf, frame, d * rotate);
+                buf.scaleX = buf.scaleY = fit * (1 - d * 0.04);
+                if (d > depth)
+                    buf.opacity = clamp01(depth + 1 - d);
+            }
+            else {
+                addMain(buf, frame, d * frame.slotMain * 1.1);
+                spin(buf, frame, d * angle);
+                buf.scaleX = buf.scaleY = fit;
+            }
+        }),
+        reach: depth + 1,
+    };
+}

package/dist/transitions/effects/stage/cards.schema.d.ts

@@ -0,0 +1 @@
+export declare const CARDS_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/cards.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CARDS_SCHEMA = defineSchema()({
+    id: "cards",
+    family: "transition",
+    factory: "cards",
+    fields: {
+        depth: { kind: "integer", label: "Cards behind", min: 1, max: 6, default: 3 },
+        offset: { kind: "number", label: "Offset", min: 0, max: 60, step: 1, unit: "px", default: 14, help: "How far each card in the deck sits along." },
+        rotate: { kind: "number", label: "Fan", min: 0, max: 15, step: 0.5, unit: "°", default: 3, help: "How far each card in the deck is turned." },
+        angle: { kind: "number", label: "Swipe tilt", min: 0, max: 45, step: 1, unit: "°", default: 10 },
+        fit: { kind: "number", label: "Card size", min: 0.6, max: 1, step: 0.01, default: 0.86, help: "The top card's size against the stage; the rest shows the deck." },
+    },
+});

package/dist/transitions/effects/stage/creative.d.ts

@@ -0,0 +1,36 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+import { type StackOptions } from "../../../carousel/layout/modifiers/stack.js";
+/** A length: px as a number, or a percentage of the card's size along that axis (`"-20%"`). */
+export type CreativeLength = number | `${number}%`;
+/** Where a card sits once it has fully left (`prev`) or before it comes in (`next`). */
+export interface CreativeState {
+    /** `[x, y, z]`. x and z percentages are of the card width, y of its height. */
+    readonly translate?: readonly [CreativeLength, CreativeLength, CreativeLength];
+    /** `[x, y, z]` in degrees. */
+    readonly rotate?: readonly [number, number, number];
+    readonly scale?: number;
+    readonly opacity?: number;
+}
+export interface CreativeOptions {
+    /** The leaving card's end state. Default: 20% back the other way, 200 px deep, faded to 0.6. */
+    readonly prev?: CreativeState;
+    /** The coming card's start state. Default: one card width along. */
+    readonly next?: CreativeState;
+    /** Per-slot perspective when a state uses z or a 3D turn, px. Default: twice the card size. */
+    readonly perspective?: number;
+    /** Which card paints on top. Default `"nearest"`. */
+    readonly order?: StackOptions["order"];
+}
+/**
+ * You define the motion: where the leaving card ends up (`prev`) and where the
+ * coming card starts (`next`), as a translate / rotate / scale / opacity state.
+ * Each card moves from its state to rest in a straight line as the carousel moves.
+ *
+ * ```ts
+ * stage(creative({
+ *   prev: { translate: ["-120%", 0, -500], rotate: [0, 0, -15] },
+ *   next: { translate: ["120%", 0, -500], rotate: [0, 0, 15] },
+ * }))
+ * ```
+ */
+export declare function creative(options?: CreativeOptions): CarouselLayout;

package/dist/transitions/effects/stage/creative.js

@@ -0,0 +1,54 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+function resolve(state) {
+    const parts = (state.translate ?? [0, 0, 0]).map((v) => typeof v === "number" ? { n: v, pct: false } : { n: Number.parseFloat(v), pct: true });
+    const n = (i) => parts[i]?.n ?? 0;
+    const pct = (i) => parts[i]?.pct ?? false;
+    const r = state.rotate ?? [0, 0, 0];
+    return {
+        t: [n(0), n(1), n(2)],
+        pct: [pct(0), pct(1), pct(2)],
+        r: [r[0], r[1], r[2]],
+        scale: state.scale ?? 1,
+        opacity: state.opacity ?? 1,
+        is3d: n(2) !== 0 || r[0] !== 0 || r[1] !== 0,
+    };
+}
+const DEFAULT_PREV = { translate: ["-20%", 0, -200], opacity: 0.6 };
+const DEFAULT_NEXT = { translate: ["100%", 0, 0] };
+/**
+ * You define the motion: where the leaving card ends up (`prev`) and where the
+ * coming card starts (`next`), as a translate / rotate / scale / opacity state.
+ * Each card moves from its state to rest in a straight line as the carousel moves.
+ *
+ * ```ts
+ * stage(creative({
+ *   prev: { translate: ["-120%", 0, -500], rotate: [0, 0, -15] },
+ *   next: { translate: ["120%", 0, -500], rotate: [0, 0, 15] },
+ * }))
+ * ```
+ */
+export function creative(options = {}) {
+    const prev = resolve(options.prev ?? DEFAULT_PREV);
+    const next = resolve(options.next ?? DEFAULT_NEXT);
+    return composeLayout("creative", stack({ order: options.order ?? "nearest" }), (buf, slot, frame) => {
+        if (buf.opacity === 0)
+            return;
+        const d = slot.distance;
+        const s = d > 0 ? next : prev;
+        const k = Math.min(Math.abs(d), 1);
+        const width = frame.axis === "x" ? frame.slotMain : frame.slotCross;
+        const height = frame.axis === "x" ? frame.slotCross : frame.slotMain;
+        const len = (i, size) => (s.pct[i] ? (s.t[i] / 100) * size : s.t[i]);
+        buf.x += len(0, width) * k;
+        buf.y += len(1, height) * k;
+        buf.z = len(2, width) * k;
+        buf.rotateX = s.r[0] * k;
+        buf.rotateY = s.r[1] * k;
+        buf.rotateZ = s.r[2] * k;
+        buf.scaleX = buf.scaleY = 1 + (s.scale - 1) * k;
+        buf.opacity = 1 + (s.opacity - 1) * k;
+        if (s.is3d)
+            buf.perspective = options.perspective ?? frame.slotMain * 2;
+    });
+}

package/dist/transitions/effects/stage/creative.schema.d.ts

@@ -0,0 +1 @@
+export declare const CREATIVE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/creative.schema.js

@@ -0,0 +1,34 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CREATIVE_SCHEMA = defineSchema()({
+    id: "creative",
+    family: "transition",
+    factory: "creative",
+    fields: {
+        prev: {
+            kind: "group",
+            label: "Leaving card",
+            help: "Where the leaving card ends up.",
+            default: { translate: ["-20%", 0, -200], opacity: 0.6 },
+            fields: {
+                translate: { kind: "vector", label: "Move", labels: ["x", "y", "z"], min: -2000, max: 2000, step: 1, unit: "px", percent: true, default: [0, 0, 0], help: "px, or a percentage of the card (\"-20%\")." },
+                rotate: { kind: "vector", label: "Turn", labels: ["x", "y", "z"], min: -180, max: 180, step: 1, unit: "°", default: [0, 0, 0] },
+                scale: { kind: "number", label: "Scale", min: 0, max: 2, step: 0.01, default: 1 },
+                opacity: { kind: "number", label: "Opacity", min: 0, max: 1, step: 0.01, default: 1 },
+            },
+        },
+        next: {
+            kind: "group",
+            label: "Coming card",
+            help: "Where the coming card starts.",
+            default: { translate: ["100%", 0, 0] },
+            fields: {
+                translate: { kind: "vector", label: "Move", labels: ["x", "y", "z"], min: -2000, max: 2000, step: 1, unit: "px", percent: true, default: [0, 0, 0], help: "px, or a percentage of the card (\"-20%\")." },
+                rotate: { kind: "vector", label: "Turn", labels: ["x", "y", "z"], min: -180, max: 180, step: 1, unit: "°", default: [0, 0, 0] },
+                scale: { kind: "number", label: "Scale", min: 0, max: 2, step: 0.01, default: 1 },
+                opacity: { kind: "number", label: "Opacity", min: 0, max: 1, step: 0.01, default: 1 },
+            },
+        },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 4000, step: 50, unit: "px", autoValue: 1200, autoNote: "twice the card size", advanced: true },
+        order: { kind: "choice", label: "On top", values: ["nearest", "incoming", "outgoing"], labels: { nearest: "The nearer card", incoming: "The coming card", outgoing: "The leaving card" }, default: "nearest" },
+    },
+});

package/dist/transitions/effects/stage/cube.d.ts

@@ -0,0 +1,28 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+export interface CubeOptions {
+    /** Darken each face as it turns away. Default `true`. */
+    readonly shadows?: boolean;
+    /** Per-slot perspective, px. Default: twice the card size. */
+    readonly perspective?: number;
+    /** How far the cube sinks back mid-turn, as a fraction of the card size, so its corner stays inside the frame. Default `0.2`. */
+    readonly depth?: number;
+}
+/**
+ * Whether a cube face shows its front to the viewer: the viewer sits
+ * `perspective` px in front of the stage centre, the face's centre is at
+ * (`main`, `z`) and its normal points along (sin θ, cos θ). Pure; tested.
+ */
+export declare function faceVisible(main: number, z: number, theta: number, perspective: number): boolean;
+/**
+ * The cards are the faces of a cube that turns to show the next one.
+ *
+ * Each face is placed where it sits on the cube (centre half a card behind the
+ * front face) and turned by `distance × 90°`. Every slot shares one box under
+ * `stack()`, so the per-slot perspectives share one vanishing point.
+ *
+ * A face turned past edge-on shows its back, and slots paint in z-index order,
+ * not by depth: at the start of a turn the coming face (higher z-index) would
+ * be drawn over the front face as a dark sliver. So a face whose back is
+ * towards the viewer is hidden, which is what `backface-visibility` would do.
+ */
+export declare function cube(options?: CubeOptions): CarouselLayout;

package/dist/transitions/effects/stage/cube.js

@@ -0,0 +1,49 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+import { addMain, dim, turn } from "./kit.js";
+/**
+ * Whether a cube face shows its front to the viewer: the viewer sits
+ * `perspective` px in front of the stage centre, the face's centre is at
+ * (`main`, `z`) and its normal points along (sin θ, cos θ). Pure; tested.
+ */
+export function faceVisible(main, z, theta, perspective) {
+    return -Math.sin(theta) * main + Math.cos(theta) * (perspective - z) > 0;
+}
+/**
+ * The cards are the faces of a cube that turns to show the next one.
+ *
+ * Each face is placed where it sits on the cube (centre half a card behind the
+ * front face) and turned by `distance × 90°`. Every slot shares one box under
+ * `stack()`, so the per-slot perspectives share one vanishing point.
+ *
+ * A face turned past edge-on shows its back, and slots paint in z-index order,
+ * not by depth: at the start of a turn the coming face (higher z-index) would
+ * be drawn over the front face as a dark sliver. So a face whose back is
+ * towards the viewer is hidden, which is what `backface-visibility` would do.
+ */
+export function cube(options = {}) {
+    const shadows = options.shadows ?? true;
+    const depth = options.depth ?? 0.2;
+    return composeLayout("cube", stack(), (buf, slot, frame) => {
+        if (buf.opacity === 0)
+            return;
+        const d = slot.distance;
+        const size = frame.slotMain;
+        const half = size / 2;
+        const theta = (d * Math.PI) / 2;
+        const main = half * Math.sin(theta);
+        const z = half * (Math.cos(theta) - 1) - size * depth * Math.sin(Math.PI * Math.abs(d));
+        const perspective = options.perspective ?? size * 2;
+        if (!faceVisible(main, z, theta, perspective)) {
+            buf.opacity = 0;
+            buf.pointerEvents = "none";
+            return;
+        }
+        addMain(buf, frame, main);
+        buf.z = z;
+        turn(buf, frame, d * 90);
+        buf.perspective = perspective;
+        if (shadows)
+            dim(buf, Math.abs(d) * 0.55);
+    });
+}

package/dist/transitions/effects/stage/cube.schema.d.ts

@@ -0,0 +1 @@
+export declare const CUBE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/cube.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CUBE_SCHEMA = defineSchema()({
+    id: "cube",
+    family: "transition",
+    factory: "cube",
+    fields: {
+        shadows: { kind: "boolean", label: "Shadows", default: true },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 4000, step: 50, unit: "px", autoValue: 1200, autoNote: "twice the card size", advanced: true },
+        depth: { kind: "number", label: "Sink", min: 0, max: 0.5, step: 0.01, default: 0.2, help: "How far the cube sinks back mid-turn, as a share of the card." },
+    },
+});

package/dist/transitions/effects/stage/fade.d.ts

@@ -0,0 +1,11 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+export interface FadeOptions {
+    /**
+     * Also fade the leaving card out. Off by default: the incoming card fades in
+     * over a solid one, which never shows the page through two half-transparent
+     * cards. Turn it on for cards with transparent backgrounds.
+     */
+    readonly crossFade?: boolean;
+}
+/** The incoming card fades in on top of the current one. Also the reduced-motion stand-in for every stage look. */
+export declare function fade(options?: FadeOptions): CarouselLayout;

package/dist/transitions/effects/stage/fade.js

@@ -0,0 +1,15 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+/** The incoming card fades in on top of the current one. Also the reduced-motion stand-in for every stage look. */
+export function fade(options = {}) {
+    const crossFade = options.crossFade ?? false;
+    return composeLayout("fade", stack(), (buf, slot) => {
+        if (buf.opacity === 0)
+            return;
+        const d = slot.distance;
+        if (d > 0)
+            buf.opacity = 1 - d;
+        else if (crossFade)
+            buf.opacity = 1 + d;
+    });
+}

package/dist/transitions/effects/stage/fade.schema.d.ts

@@ -0,0 +1 @@
+export declare const FADE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/fade.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FADE_SCHEMA = defineSchema()({
+    id: "fade",
+    family: "transition",
+    factory: "fade",
+    fields: {
+        crossFade: { kind: "boolean", label: "Cross-fade", default: false, help: "Also fade the leaving card out: for cards with transparent backgrounds." },
+    },
+});

package/dist/transitions/effects/stage/flip.d.ts

@@ -0,0 +1,15 @@
+import { type CarouselLayout } from "../../../carousel/layout/types.js";
+export interface FlipOptions {
+    /** Darken the card as it turns edge-on. Default `true`. */
+    readonly shadows?: boolean;
+    /** Per-slot perspective, px. Default: twice the card size. */
+    readonly perspective?: number;
+}
+/**
+ * The card flips over like a playing card and the next one is on its back.
+ *
+ * Both cards turn by `distance × 180°`, so they stay exactly half a turn apart;
+ * whichever is turned more than 90° (its back towards you) is hidden. That
+ * replaces `backface-visibility`, which is not a buffer field.
+ */
+export declare function flip(options?: FlipOptions): CarouselLayout;

package/dist/transitions/effects/stage/flip.js

@@ -0,0 +1,30 @@
+import { composeLayout } from "../../../carousel/layout/types.js";
+import { stack } from "../../../carousel/layout/modifiers/stack.js";
+import { dim, turn } from "./kit.js";
+/**
+ * The card flips over like a playing card and the next one is on its back.
+ *
+ * Both cards turn by `distance × 180°`, so they stay exactly half a turn apart;
+ * whichever is turned more than 90° (its back towards you) is hidden. That
+ * replaces `backface-visibility`, which is not a buffer field.
+ */
+export function flip(options = {}) {
+    const shadows = options.shadows ?? true;
+    return composeLayout("flip", stack(), (buf, slot, frame) => {
+        if (buf.opacity === 0)
+            return;
+        const d = slot.distance;
+        const a = Math.abs(d);
+        if (a > 0.5) {
+            buf.opacity = 0;
+            buf.pointerEvents = "none";
+            return;
+        }
+        const size = frame.slotMain;
+        turn(buf, frame, d * 180);
+        buf.z = -size * 0.15 * Math.sin(Math.PI * a);
+        buf.perspective = options.perspective ?? size * 2;
+        if (shadows)
+            dim(buf, a * 0.8);
+    });
+}

package/dist/transitions/effects/stage/flip.schema.d.ts

@@ -0,0 +1 @@
+export declare const FLIP_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/transitions/effects/stage/flip.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FLIP_SCHEMA = defineSchema()({
+    id: "flip",
+    family: "transition",
+    factory: "flip",
+    fields: {
+        shadows: { kind: "boolean", label: "Shadows", default: true },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 4000, step: 50, unit: "px", autoValue: 1200, autoNote: "twice the card size", advanced: true },
+    },
+});