@lacspace/logo 1.1.0 → 1.2.0

package/README.md

@@ -87,6 +87,19 @@ const fav = generateFavicon({ name: "Nova", keywords: "tech" });
 
 > **v1.1.0** also grows the JSON brain to **67 icons**, **36 palettes**, **18 type pairings** and new industry moods (education, legal, real-estate, kids, fitness…).
 
+## 🆕 Animated logo reveal (v1.2.0)
+
+Turn any logo into a **self-contained animated SVG** that crafts itself on load (wipe + scale-in + a light shimmer) — pure CSS, no JS, works in any browser, README or site, and respects `prefers-reduced-motion`.
+
+```ts
+import { animateLogo } from "@lacspace/logo";
+
+const svg = animateLogo({ name: "Orbit Labs", keywords: "ai, network" }, { loop: true });
+// drop `svg` straight into a page or save as .svg — it animates itself
+```
+
+> **v1.2.0** also grows the brain to **79 icons** (insurance, dental, eyewear, audio, construction, HR, jewelry, marine, energy…).
+
 ## The five engines
 
 | Engine | What you get |

package/dist/index.cjs

@@ -130,7 +130,19 @@ var icons_default = [
   { key: "shirt", keywords: ["fashion", "clothing", "apparel", "boutique", "retail", "tshirt", "wear", "style"], svg: "<path d='M8 4 L4 7 L6 10 L8 9 V20 H16 V9 L18 10 L20 7 L16 4 C16 6 8 6 8 4 Z'/>" },
   { key: "balloon", keywords: ["kids", "party", "toy", "children", "fun", "celebration", "birthday", "playful"], svg: "<path d='M12 3 A5 6 0 0 0 12 15 A5 6 0 0 0 12 3 Z'/><path d='M12 15 V17 M11 17 C11 19 13 19 13 21'/>" },
   { key: "palette-art", keywords: ["art", "design", "paint", "creative", "color", "artist", "gallery", "illustration"], svg: "<path d='M12 3 A9 9 0 1 0 12 21 A2 2 0 0 0 12 17 A2 2 0 0 1 14 15 H16 A5 5 0 0 0 21 10 C21 6 17 3 12 3 Z'/><circle cx='8' cy='9' r='1'/><circle cx='12' cy='7' r='1'/><circle cx='16' cy='9' r='1'/>" },
-  { key: "wheat", keywords: ["agriculture", "farm", "organic", "grain", "harvest", "crop", "wheat", "rural"], svg: "<path d='M12 21 V9 M12 9 C10 9 9 7 9 5 C11 5 12 7 12 9 C12 7 13 5 15 5 C15 7 14 9 12 9 M12 13 C10 13 9 11 9 9 M12 13 C14 13 15 11 15 9 M12 17 C10 17 9 15 9 13 M12 17 C14 17 15 15 15 13'/>" }
+  { key: "wheat", keywords: ["agriculture", "farm", "organic", "grain", "harvest", "crop", "wheat", "rural"], svg: "<path d='M12 21 V9 M12 9 C10 9 9 7 9 5 C11 5 12 7 12 9 C12 7 13 5 15 5 C15 7 14 9 12 9 M12 13 C10 13 9 11 9 9 M12 13 C14 13 15 11 15 9 M12 17 C10 17 9 15 9 13 M12 17 C14 17 15 15 15 13'/>" },
+  { key: "umbrella", keywords: ["insurance", "protection", "weather", "umbrella", "coverage", "safe", "shelter"], svg: "<path d='M12 3 A9 6 0 0 1 21 9 H3 A9 6 0 0 1 12 3 Z'/><path d='M12 9 V19 A2 2 0 0 1 8 19'/>" },
+  { key: "tooth", keywords: ["dental", "dentist", "tooth", "orthodontics", "oral", "clinic", "smile"], svg: "<path d='M12 3 C8 3 6 5 6 8 C6 12 7 21 9 21 C10.5 21 10 15 12 15 C14 15 13.5 21 15 21 C17 21 18 12 18 8 C18 5 16 3 12 3 Z'/>" },
+  { key: "glasses", keywords: ["optometry", "eyewear", "glasses", "vision", "optical", "fashion", "sunglasses"], svg: "<circle cx='6' cy='13' r='3'/><circle cx='18' cy='13' r='3'/><path d='M9 13 H15 M3 11 L5 8 H8 M21 11 L19 8 H16'/>" },
+  { key: "headphones", keywords: ["audio", "dj", "music", "headphones", "support", "sound", "gaming", "helpdesk"], svg: "<path d='M4 14 V12 A8 8 0 0 1 20 12 V14'/><rect x='3' y='14' width='3' height='5' rx='1.2'/><rect x='18' y='14' width='3' height='5' rx='1.2'/>" },
+  { key: "microphone", keywords: ["podcast", "audio", "voice", "media", "microphone", "recording", "radio", "singer"], svg: "<rect x='9' y='3' width='6' height='11' rx='3'/><path d='M6 11 A6 6 0 0 0 18 11 M12 17 V21 M9 21 H15'/>" },
+  { key: "hardhat", keywords: ["construction", "build", "contractor", "hardhat", "engineering", "safety", "builder"], svg: "<path d='M4 16 A8 8 0 0 1 20 16 Z'/><path d='M10 8 V4 H14 V8 M2 16 H22'/>" },
+  { key: "people", keywords: ["team", "hr", "community", "people", "agency", "group", "social", "recruiting", "network"], svg: "<circle cx='8' cy='8' r='3'/><circle cx='16' cy='8' r='3'/><path d='M3 20 C3 15 6 14 8 14 C10 14 13 15 13 20 M11 20 C11 16 14 14 16 14 C18 14 21 15 21 20'/>" },
+  { key: "gem", keywords: ["jewelry", "luxury", "gem", "diamond", "premium", "beauty", "boutique", "crystal"], svg: "<path d='M6 3 H18 L22 9 L12 21 L2 9 Z'/><path d='M2 9 H22 M6 3 L9 9 M18 3 L15 9 M9 9 L12 21 L15 9'/>" },
+  { key: "anchor", keywords: ["marine", "nautical", "anchor", "travel", "boat", "sea", "harbor", "shipping"], svg: "<circle cx='12' cy='5' r='2'/><path d='M12 7 V21 M5 13 A7 7 0 0 0 19 13 M8 10 H16'/>" },
+  { key: "compass", keywords: ["travel", "navigation", "compass", "adventure", "explore", "direction", "outdoor", "guide"], svg: "<circle cx='12' cy='12' r='9'/><path d='M15 9 L11 11 L9 15 L13 13 Z'/>" },
+  { key: "spray", keywords: ["cleaning", "service", "spray", "hygiene", "sanitize", "laundry", "housekeeping"], svg: "<rect x='7' y='8' width='6' height='12' rx='1'/><path d='M8 8 V5 H12 V8 M13 6 H16 M13 4 H16 M13 8 H16'/>" },
+  { key: "battery", keywords: ["energy", "power", "battery", "ev", "charge", "electric", "tech", "solar"], svg: "<rect x='3' y='8' width='16' height='8' rx='2'/><path d='M21 11 V13 M6 11 V13 M9 11 V13 M12 11 V13'/>" }
 ];
 
 // src/data/moods.json
@@ -846,10 +858,28 @@ function generateBrandKit(brief) {
   };
 }
 
+// src/animate.ts
+function animateLogo(input, opts = {}) {
+  const result = "svg" in input ? input : generateLogo(input);
+  const w = result.width;
+  const h = result.height;
+  const dur = opts.duration ?? 1500;
+  const iter = opts.loop ? "infinite" : "1";
+  const shimmer = opts.shimmer !== false;
+  const style = `<style>@keyframes lac-in{0%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}@keyframes lac-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes lac-shim{0%{transform:translateX(${(-w * 0.6).toFixed(0)}px) skewX(-16deg)}55%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}100%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}}.lac-root{transform-origin:50% 50%;animation:lac-in ${dur}ms cubic-bezier(.2,.75,.2,1) ${iter} both,lac-wipe ${Math.round(dur * 0.7)}ms cubic-bezier(.4,0,.2,1) ${iter} both}.lac-shim{animation:lac-shim ${Math.round(dur * 1.25)}ms ease ${iter} both;mix-blend-mode:overlay}@media(prefers-reduced-motion:reduce){.lac-root{animation:none;clip-path:none}.lac-shim{display:none}}</style>`;
+  const shimDefs = shimmer ? `<linearGradient id="lac-shim-g" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".55"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>` : "";
+  const shimRect = shimmer ? `<rect class="lac-shim" x="0" y="0" width="${(w * 0.4).toFixed(0)}" height="${h}" fill="url(#lac-shim-g)"/>` : "";
+  let svg = result.svg.replace(/^<svg /, `<svg class="lac-root" `);
+  svg = svg.replace(/(<svg\b[^>]*>)/, `$1${style}<defs>${shimDefs}</defs>`);
+  svg = svg.replace(/<\/svg>\s*$/, `${shimRect}</svg>`);
+  return svg;
+}
+
 exports.FONTS = FONTS;
 exports.ICONS = ICONS;
 exports.MOODS = MOODS;
 exports.PALETTES = PALETTES;
+exports.animateLogo = animateLogo;
 exports.generateBrandKit = generateBrandKit;
 exports.generateFavicon = generateFavicon;
 exports.generateLogo = generateLogo;