create-cogenta 0.5.3 → 0.7.0

package/dist/demo-art/compositions.js

@@ -1,690 +0,0 @@
-import { companionTones, oklchToRgb, rgbToOklch, withChroma, withLightness } from './oklch.js';
-import { mulberry32 } from './render.js';
-// ---------------------------------------------------------------- colour helpers
-function hexToRgb(hex) {
-    const clean = hex.replace('#', '');
-    const r = Number.parseInt(clean.slice(0, 2), 16) / 255;
-    const g = Number.parseInt(clean.slice(2, 4), 16) / 255;
-    const b = Number.parseInt(clean.slice(4, 6), 16) / 255;
-    return { r, g, b };
-}
-function mix(a, b, t) {
-    return { r: a.r + (b.r - a.r) * t, g: a.g + (b.g - a.g) * t, b: a.b + (b.b - a.b) * t };
-}
-const WHITE = { r: 1, g: 1, b: 1 };
-const BLACK = { r: 0, g: 0, b: 0 };
-function lighten(color, amount) {
-    return mix(color, WHITE, amount);
-}
-function darken(color, amount) {
-    return mix(color, BLACK, amount);
-}
-function toRgb(palette) {
-    return {
-        bg: hexToRgb(palette.bg),
-        fg: hexToRgb(palette.fg),
-        accent: hexToRgb(palette.accent),
-        accentFg: hexToRgb(palette.accentFg),
-        muted: hexToRgb(palette.muted),
-        mutedFg: hexToRgb(palette.mutedFg),
-        border: hexToRgb(palette.border),
-    };
-}
-/**
- * Pulls a hue (degrees) into the amber/terracotta arc used for "warm"
- * compositions, leaving it alone if it's already there. A small rotation of
- * the accent's *own* hue (as `rotateHue` alone would do) keeps a cool accent
- * — a store's teal, say — cool; the "arch & sun"/"warm" family needs its
- * backdrop to read as warm regardless of the palette it was built from, so
- * this clamps to the nearer edge of the warm arc instead of rotating by a
- * fixed offset.
- */
-function clampHueToWarmArc(hueDegrees) {
-    const warmLow = 25;
-    const warmHigh = 70;
-    if (hueDegrees >= warmLow && hueDegrees <= warmHigh)
-        return hueDegrees;
-    const circularDistance = (a, b) => Math.min(Math.abs(a - b), 360 - Math.abs(a - b));
-    return circularDistance(hueDegrees, warmLow) <= circularDistance(hueDegrees, warmHigh)
-        ? warmLow
-        : warmHigh;
-}
-function buildTones(c) {
-    const spread = companionTones(c.accent, 2);
-    const hue1 = spread[0] ?? c.accent;
-    const hue2 = spread[1] ?? c.accent;
-    const accentOklch = rgbToOklch(c.accent);
-    const warmHue = clampHueToWarmArc(accentOklch.h);
-    return {
-        hue1,
-        hue2,
-        deep: darken(c.accent, 0.22),
-        pale: lighten(c.muted, 0.06),
-        warm: oklchToRgb({ l: 0.86, c: Math.max(accentOklch.c, 0.08), h: warmHue }),
-        ink: withLightness(withChroma(c.accent, 0.4), 0.15),
-    };
-}
-/**
- * A straight, hairline-thin flat segment between two fractional points —
- * used for grid connectors, editorial rules, and floor lines. `render.ts`
- * only offers a length+rotation `LineLayer`, so this does the point-to-point
- * trigonometry once, in one place, for every composition below.
- */
-function segment(from, to, canvasWidth, canvasHeight, thickness, color, alpha = 1) {
-    const shorter = Math.min(canvasWidth, canvasHeight);
-    const x1 = from[0] * canvasWidth;
-    const y1 = from[1] * canvasHeight;
-    const x2 = to[0] * canvasWidth;
-    const y2 = to[1] * canvasHeight;
-    const dx = x2 - x1;
-    const dy = y2 - y1;
-    const lengthPx = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
-    const rotation = (Math.atan2(dy, dx) * 180) / Math.PI;
-    const center = [(x1 + x2) / 2 / canvasWidth, (y1 + y2) / 2 / canvasHeight];
-    return {
-        kind: 'line',
-        center,
-        length: lengthPx / shorter,
-        thickness,
-        rotation,
-        color,
-        alpha,
-    };
-}
-const HERO_FAMILY = {
-    mesh: 'grid',
-    grid: 'grid',
-    geometric: 'blocks',
-    blocks: 'blocks',
-    diagonal: 'bands',
-    bands: 'bands',
-    radial: 'rings',
-    rings: 'rings',
-    dark: 'ink',
-    ink: 'ink',
-    warm: 'sun',
-    sun: 'sun',
-};
-const HERO_WIDTH = 1600;
-const HERO_HEIGHT = 1000;
-/**
- * A 1600×1000 hero visual. Every theme frames the hero's media beside the
- * title — a picture next to the text, never a backdrop under it — so the
- * composition fills the whole canvas like a poster: an early version kept
- * the left half a single flat colour "for the title" and rendered as a
- * mostly blank frame on every home page. `variant` names one of the flat
- * poster families (the same builders `coverArt` picks from, at hero size);
- * the older names (`mesh`, `geometric`, `diagonal`, `radial`, `dark`, `warm`)
- * stay as aliases so no blueprint needs to change.
- */
-export function heroArt(palette, variant = 'mesh', seed = 1) {
-    const c = toRgb(palette);
-    const tones = buildTones(c);
-    const rng = mulberry32(seed);
-    const family = HERO_FAMILY[variant];
-    let layers;
-    switch (family) {
-        case 'grid':
-            layers = gridNodeCover(c, tones, rng);
-            break;
-        case 'blocks':
-            layers = colourBlockCover(c, tones, rng);
-            break;
-        case 'bands':
-            layers = stripeBandCover(c, tones, rng);
-            break;
-        case 'rings':
-            layers = concentricCover(c, tones, rng);
-            break;
-        case 'ink':
-            layers = editorialMarkCover(c, tones, rng);
-            break;
-        default:
-            layers = archSunCover(c, tones, rng);
-    }
-    return { width: HERO_WIDTH, height: HERO_HEIGHT, seed, layers };
-}
-// ---------------------------------------------------------------- cover art
-const COVER_WIDTH = 1200;
-const COVER_HEIGHT = 800;
-function colourBlockCover(c, tones, rng) {
-    const angle = rng() < 0.5 ? 0 : 90;
-    const threeTone = rng() < 0.5;
-    const colors = threeTone ? [tones.pale, c.accent, tones.hue2] : [tones.pale, c.accent];
-    const accentCenter = [0.24 + rng() * 0.1, 0.72 + rng() * 0.06];
-    const accentIsDisc = rng() < 0.5;
-    return [
-        { kind: 'bands', angle, colors, count: colors.length },
-        accentIsDisc
-            ? { kind: 'disc', center: accentCenter, radius: 0.09, color: tones.deep, alpha: 1 }
-            : {
-                kind: 'rect',
-                center: accentCenter,
-                width: 0.16,
-                height: 0.16,
-                radius: 0.02,
-                color: tones.deep,
-                alpha: 1,
-            },
-    ];
-}
-function gridNodeCover(c, tones, rng) {
-    const a = [0.28 + rng() * 0.08, 0.32 + rng() * 0.08];
-    const b = [0.6 + rng() * 0.08, 0.5];
-    const d = [0.46 + rng() * 0.08, 0.76 + rng() * 0.06];
-    return [
-        { kind: 'fill', color: c.bg },
-        { kind: 'dots', spacing: 0.05, radius: 0.006, color: c.border, alpha: 0.55 },
-        segment(a, b, COVER_WIDTH, COVER_HEIGHT, 0.004, c.mutedFg, 0.45),
-        segment(b, d, COVER_WIDTH, COVER_HEIGHT, 0.004, c.mutedFg, 0.45),
-        { kind: 'disc', center: b, radius: 0.045, color: c.accent, alpha: 1 },
-        { kind: 'disc', center: a, radius: 0.02, color: tones.hue1, alpha: 1 },
-        { kind: 'disc', center: d, radius: 0.02, color: tones.deep, alpha: 1 },
-    ];
-}
-function stripeBandCover(_c, tones, rng) {
-    const angles = [0, 45, 90, 135];
-    const angle = angles[Math.floor(rng() * angles.length) % angles.length] ?? 0;
-    return [
-        {
-            kind: 'bands',
-            angle,
-            colors: [tones.hue2, tones.hue1, tones.deep],
-            count: 3 + Math.floor(rng() * 2),
-        },
-    ];
-}
-function concentricCover(_c, tones, rng) {
-    const center = [0.62 + rng() * 0.08, 0.42 + rng() * 0.08];
-    return [
-        { kind: 'fill', color: tones.pale },
-        { kind: 'ring', center, innerRadius: 0.16, outerRadius: 0.176, color: tones.deep, alpha: 1 },
-        { kind: 'ring', center, innerRadius: 0.23, outerRadius: 0.242, color: tones.hue1, alpha: 1 },
-        {
-            kind: 'disc',
-            center: [0.24 + rng() * 0.08, 0.74],
-            radius: 0.07,
-            color: tones.deep,
-            alpha: 1,
-        },
-    ];
-}
-function editorialMarkCover(c, _tones, rng) {
-    const markKind = Math.floor(rng() * 3) % 3;
-    let mark;
-    if (markKind === 0) {
-        mark = {
-            kind: 'polygon',
-            center: [0.7, 0.62],
-            radius: 0.18,
-            sides: 3,
-            rotation: 0,
-            color: c.accent,
-            alpha: 1,
-        };
-    }
-    else if (markKind === 1) {
-        // Centred exactly on the bottom edge: only the top half of the disc is on-canvas — a semicircle for free.
-        mark = { kind: 'disc', center: [0.72, 1], radius: 0.32, color: c.accent, alpha: 1 };
-    }
-    else {
-        // Centred exactly on a corner: only one quarter of the disc is on-canvas.
-        mark = { kind: 'disc', center: [1, 1], radius: 0.4, color: c.accent, alpha: 1 };
-    }
-    return [
-        { kind: 'fill', color: c.bg },
-        segment([0.12, 0.18], [0.5, 0.18], COVER_WIDTH, COVER_HEIGHT, 0.004, c.fg, 0.8),
-        mark,
-    ];
-}
-function isometricStackCover(c, tones, rng) {
-    const shadow = mix(c.fg, tones.pale, 0.7);
-    const originX = 0.4 + rng() * 0.06;
-    const originY = 0.4 + rng() * 0.06;
-    const step = 0.12 + rng() * 0.03;
-    const tilt = rng() < 0.5 ? 1 : -1;
-    const positions = [
-        [originX, originY],
-        [originX + step, originY + step * 0.85],
-        [originX + step * 2, originY + step * 1.7],
-    ];
-    const palette = [tones.hue2, c.accent, tones.deep];
-    // A seed-driven rotation of which colour lands on which card, so two
-    // seeds landing on this family don't just shift position — they read as
-    // genuinely different stacks.
-    const shift = Math.floor(rng() * palette.length);
-    const colors = palette.map((_, i) => palette[(i + shift) % palette.length] ?? c.accent);
-    const layers = [{ kind: 'fill', color: tones.pale }];
-    positions.forEach((pos, i) => {
-        const rotation = tilt * (i - 1) * (4 + rng() * 4);
-        layers.push({
-            kind: 'rect',
-            center: [pos[0] + 0.015, pos[1] + 0.02],
-            width: 0.34,
-            height: 0.22,
-            radius: 0.02,
-            rotation,
-            color: shadow,
-            alpha: 0.3,
-        }, {
-            kind: 'rect',
-            center: pos,
-            width: 0.34,
-            height: 0.22,
-            radius: 0.02,
-            rotation,
-            color: colors[i] ?? c.accent,
-            alpha: 1,
-        });
-    });
-    return layers;
-}
-function archSunCover(c, tones, rng) {
-    const center = [0.42 + rng() * 0.16, 0.5 + rng() * 0.12];
-    const radius = 0.18 + rng() * 0.08;
-    const sunColor = rng() < 0.5 ? c.accent : tones.hue1;
-    const layers = [
-        { kind: 'fill', color: tones.warm },
-        { kind: 'disc', center, radius, color: sunColor, alpha: 1 },
-    ];
-    if (rng() < 0.7) {
-        layers.push({
-            kind: 'ring',
-            center,
-            innerRadius: radius + 0.04,
-            outerRadius: radius + 0.05,
-            color: tones.deep,
-            alpha: 0.6,
-        });
-    }
-    // The ground band crops the sun at ~60% of its radius below centre —
-    // enough of an arch to read as sunrise/sunset, never the full disc.
-    const groundHeight = 0.5;
-    const horizonY = center[1] + radius * 0.6;
-    layers.push({
-        kind: 'rect',
-        center: [0.5, horizonY + groundHeight / 2],
-        width: 1.6,
-        height: groundHeight,
-        color: tones.deep,
-        alpha: 1,
-    });
-    return layers;
-}
-function checkerCover(c, rng) {
-    return [
-        { kind: 'fill', color: c.bg },
-        {
-            kind: 'checker',
-            center: [0.66, 0.5],
-            width: 0.9,
-            height: 1.05,
-            cell: 0.045,
-            rotation: rng() < 0.5 ? 0 : 8,
-            color: c.accent,
-            alpha: 0.85,
-        },
-    ];
-}
-function duotoneBlobCover(tones, rng) {
-    const jitter = () => (rng() - 0.5) * 0.05;
-    return [
-        { kind: 'fill', color: tones.pale },
-        {
-            kind: 'blob',
-            points: [
-                { at: [0.32 + jitter(), 0.38 + jitter()], radius: 0.28 },
-                { at: [0.5 + jitter(), 0.3 + jitter()], radius: 0.22 },
-                { at: [0.4 + jitter(), 0.55 + jitter()], radius: 0.2 },
-            ],
-            smoothing: 0.09,
-            color: tones.hue1,
-            alpha: 1,
-        },
-        {
-            kind: 'blob',
-            points: [
-                { at: [0.68 + jitter(), 0.62 + jitter()], radius: 0.26 },
-                { at: [0.82 + jitter(), 0.7 + jitter()], radius: 0.2 },
-            ],
-            smoothing: 0.08,
-            color: tones.deep,
-            alpha: 1,
-        },
-    ];
-}
-const COVER_FAMILIES = [
-    colourBlockCover,
-    gridNodeCover,
-    stripeBandCover,
-    concentricCover,
-    editorialMarkCover,
-    isometricStackCover,
-    archSunCover,
-    (c, _tones, rng) => checkerCover(c, rng),
-    (_c, tones, rng) => duotoneBlobCover(tones, rng),
-];
-/** A family of ≥8 visibly different, flat layouts from one palette, picked deterministically by `seed` (D5: colour blocks, grid & node, stripe bands, concentric rings, editorial marks, isometric stacks, arch & sun, checker/half-tone, duotone blobs). */
-export function coverArt(palette, seed = 1) {
-    const c = toRgb(palette);
-    const tones = buildTones(c);
-    const rng = mulberry32(seed);
-    // The family is picked by the seed itself, not by the first random draw:
-    // a blueprint seeds its covers with consecutive seeds (1, 2, 3…), and a
-    // random pick sent three of eight blog posts to the same "arch & sun"
-    // frame. Consecutive seeds now walk the families in order — eight
-    // covers, eight different layouts — while `rng` still varies each one.
-    const familyIndex = ((Math.floor(seed) % COVER_FAMILIES.length) + COVER_FAMILIES.length) % COVER_FAMILIES.length;
-    const build = COVER_FAMILIES[familyIndex];
-    const layers = build(c, tones, rng);
-    return { width: COVER_WIDTH, height: COVER_HEIGHT, seed, layers };
-}
-// ---------------------------------------------------------------- avatar
-const AVATAR_SIZE = 600;
-/** A 600×600 abstract "person" mark: a disc (head) over a disc (shoulders, cropped by the frame edge) on a flat companion-tone field — never a real photo of a person. */
-export function avatarArt(palette, seed = 1) {
-    const c = toRgb(palette);
-    const tones = buildTones(c);
-    const rng = mulberry32(seed);
-    const field = rng() < 0.5 ? tones.pale : mix(c.muted, tones.hue2, 0.25);
-    const mark = rng() < 0.5 ? c.accent : tones.deep;
-    const layers = [
-        { kind: 'fill', color: field },
-        { kind: 'disc', center: [0.5, 1.08], radius: 0.52, color: mark, alpha: 1 },
-        { kind: 'disc', center: [0.5, 0.4], radius: 0.2, color: mark, alpha: 1 },
-    ];
-    if (rng() < 0.5) {
-        layers.push({
-            kind: 'ring',
-            center: [0.5, 0.5],
-            innerRadius: 0.42,
-            outerRadius: 0.432,
-            color: c.border,
-            alpha: 0.7,
-        });
-    }
-    return { width: AVATAR_SIZE, height: AVATAR_SIZE, seed, layers };
-}
-// ---------------------------------------------------------------- logo
-const LOGO_WIDTH = 400;
-const LOGO_HEIGHT = 160;
-/** A 400×160 neutral, abstract wordmark stand-in — a geometric mark plus two bars, always in flat mid-grey so it reads as a client logo in a logo strip, never a real brand. 8 distinct marks across seeds. */
-export function logoArt(seed = 1) {
-    const rng = mulberry32(seed);
-    const grey = { r: 0.42, g: 0.44, b: 0.47 };
-    const markKind = Math.floor(rng() * 8) % 8;
-    const center = [0.16, 0.5];
-    let mark;
-    switch (markKind) {
-        case 0:
-            mark = {
-                kind: 'polygon',
-                center,
-                radius: 0.24,
-                sides: 3,
-                rotation: 0,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        case 1:
-            mark = {
-                kind: 'ring',
-                center,
-                innerRadius: 0.16,
-                outerRadius: 0.24,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        case 2:
-            mark = {
-                kind: 'rect',
-                center,
-                width: 0.32,
-                height: 0.32,
-                radius: 0.06,
-                rotation: 8,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        case 3:
-            mark = {
-                kind: 'polygon',
-                center,
-                radius: 0.24,
-                sides: 6,
-                rotation: 0,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        case 4:
-            mark = {
-                kind: 'rect',
-                center,
-                width: 0.3,
-                height: 0.3,
-                radius: 0.02,
-                rotation: 45,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        case 5:
-            mark = { kind: 'disc', center, radius: 0.22, color: grey, alpha: 0.85 };
-            break;
-        case 6:
-            mark = {
-                kind: 'polygon',
-                center,
-                radius: 0.24,
-                sides: 3,
-                rotation: 90,
-                color: grey,
-                alpha: 0.85,
-            };
-            break;
-        default:
-            mark = { kind: 'disc', center, radius: 0.22, color: grey, alpha: 0.85 };
-    }
-    const layers = [{ kind: 'fill', color: WHITE }, mark];
-    if (markKind === 7) {
-        // A white bar crops the disc into a "circle + bar" mark distinct from case 5's plain disc.
-        layers.push({
-            kind: 'rect',
-            center,
-            width: 0.07,
-            height: 0.32,
-            color: WHITE,
-            alpha: 1,
-        });
-    }
-    layers.push({
-        kind: 'rect',
-        center: [0.52, 0.42],
-        width: 0.5,
-        height: 0.14,
-        radius: 0.02,
-        color: grey,
-        alpha: 0.55,
-    }, {
-        kind: 'rect',
-        center: [0.46, 0.62],
-        width: 0.36,
-        height: 0.1,
-        radius: 0.02,
-        color: grey,
-        alpha: 0.35,
-    });
-    return { width: LOGO_WIDTH, height: LOGO_HEIGHT, seed, layers };
-}
-// ---------------------------------------------------------------- product
-const PRODUCT_SIZE = 1000;
-/** A 1000×1000 centred, flat stylised object — a store's demo catalogue. Hard offset shadows (a darker solid shape, never blurred), a solid or two-tone backdrop, a floor line, one flat highlight shape per object. 6 shapes across seeds. */
-export function productArt(palette, seed = 1) {
-    const c = toRgb(palette);
-    const tones = buildTones(c);
-    const rng = mulberry32(seed);
-    const objectColor = rng() < 0.5 ? c.accent : tones.deep;
-    const shape = Math.floor(rng() * 6) % 6;
-    const backdrop = rng() < 0.5 ? c.muted : tones.pale;
-    const twoTone = rng() < 0.5;
-    const shadowColor = mix(c.fg, backdrop, 0.55);
-    const layers = twoTone
-        ? [{ kind: 'bands', angle: 90, colors: [backdrop, darken(backdrop, 0.06)], count: 2 }]
-        : [{ kind: 'fill', color: backdrop }];
-    layers.push(segment([0.14, 0.78], [0.86, 0.78], PRODUCT_SIZE, PRODUCT_SIZE, 0.004, c.border, 0.8));
-    switch (shape) {
-        case 0: {
-            // Bottle/capsule.
-            layers.push({
-                kind: 'rect',
-                center: [0.52, 0.55],
-                width: 0.22,
-                height: 0.58,
-                radius: 0.11,
-                color: shadowColor,
-                alpha: 0.3,
-            }, {
-                kind: 'rect',
-                center: [0.5, 0.53],
-                width: 0.22,
-                height: 0.58,
-                radius: 0.11,
-                color: objectColor,
-                alpha: 1,
-            }, {
-                kind: 'rect',
-                center: [0.5, 0.22],
-                width: 0.09,
-                height: 0.1,
-                radius: 0.02,
-                color: objectColor,
-                alpha: 1,
-            });
-            break;
-        }
-        case 1: {
-            // Box.
-            layers.push({
-                kind: 'rect',
-                center: [0.53, 0.55],
-                width: 0.42,
-                height: 0.42,
-                radius: 0.03,
-                color: shadowColor,
-                alpha: 0.3,
-            }, {
-                kind: 'rect',
-                center: [0.5, 0.52],
-                width: 0.42,
-                height: 0.42,
-                radius: 0.03,
-                color: objectColor,
-                alpha: 1,
-            }, segment([0.5, 0.31], [0.5, 0.73], PRODUCT_SIZE, PRODUCT_SIZE, 0.006, lighten(objectColor, 0.3), 0.6));
-            break;
-        }
-        case 2: {
-            // Sphere, flattened, with a crescent highlight (a lighter disc partly re-covered by an object-coloured disc).
-            const radius = 0.28;
-            layers.push({ kind: 'disc', center: [0.53, 0.55], radius, color: shadowColor, alpha: 0.3 }, { kind: 'disc', center: [0.5, 0.52], radius, color: objectColor, alpha: 1 }, {
-                kind: 'disc',
-                center: [0.5 - radius * 0.35, 0.52 - radius * 0.35],
-                radius: radius * 0.36,
-                color: lighten(objectColor, 0.4),
-                alpha: 1,
-            }, {
-                kind: 'disc',
-                center: [0.5 - radius * 0.22, 0.52 - radius * 0.22],
-                radius: radius * 0.3,
-                color: objectColor,
-                alpha: 1,
-            });
-            break;
-        }
-        case 3: {
-            // Ring.
-            layers.push({
-                kind: 'ring',
-                center: [0.53, 0.55],
-                innerRadius: 0.2,
-                outerRadius: 0.3,
-                color: shadowColor,
-                alpha: 0.3,
-            }, {
-                kind: 'ring',
-                center: [0.5, 0.52],
-                innerRadius: 0.2,
-                outerRadius: 0.3,
-                color: objectColor,
-                alpha: 1,
-            });
-            break;
-        }
-        case 4: {
-            // Stacked cards.
-            const positions = [
-                [0.44, 0.62],
-                [0.5, 0.52],
-                [0.56, 0.42],
-            ];
-            const colors = [tones.hue2, tones.hue1, objectColor];
-            positions.forEach((pos, i) => {
-                const rotation = (i - 1) * 6;
-                layers.push({
-                    kind: 'rect',
-                    center: [pos[0] + 0.02, pos[1] + 0.03],
-                    width: 0.34,
-                    height: 0.22,
-                    radius: 0.02,
-                    rotation,
-                    color: shadowColor,
-                    alpha: 0.25,
-                }, {
-                    kind: 'rect',
-                    center: pos,
-                    width: 0.34,
-                    height: 0.22,
-                    radius: 0.02,
-                    rotation,
-                    color: colors[i] ?? objectColor,
-                    alpha: 1,
-                });
-            });
-            break;
-        }
-        default: {
-            // Hexagonal tile.
-            layers.push({
-                kind: 'polygon',
-                center: [0.53, 0.55],
-                radius: 0.28,
-                sides: 6,
-                rotation: 0,
-                color: shadowColor,
-                alpha: 0.3,
-            }, {
-                kind: 'polygon',
-                center: [0.5, 0.52],
-                radius: 0.28,
-                sides: 6,
-                rotation: 0,
-                color: objectColor,
-                alpha: 1,
-            }, {
-                kind: 'polygon',
-                center: [0.5, 0.52],
-                radius: 0.12,
-                sides: 6,
-                rotation: 0,
-                color: lighten(objectColor, 0.3),
-                alpha: 1,
-            });
-        }
-    }
-    return { width: PRODUCT_SIZE, height: PRODUCT_SIZE, seed, layers };
-}
-//# sourceMappingURL=compositions.js.map