{"_id":"@eliosai/branding","_rev":"2-516dcfec0c33684a07a43e1c0c925846","name":"@eliosai/branding","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@eliosai/branding","version":"0.0.1","license":"MIT","_id":"@eliosai/branding@0.0.1","maintainers":[{"name":"jsmey7","email":"dev@elios.ai"}],"homepage":"https://github.com/eliosai/design/tree/main/packages/branding#readme","bugs":{"url":"https://github.com/eliosai/design/issues"},"dist":{"shasum":"df1ecea1a274df1c2eef7abcb79b48fd3b8e3a18","tarball":"https://registry.npmjs.org/@eliosai/branding/-/branding-0.0.1.tgz","fileCount":40,"integrity":"sha512-w9Zaswv2vVrRfaQCeafU4ndkqswTchqhZZFv1sNoGXTCPM9dXkcf3C2gsZ/QVoaaUX37Y8f4eeaCD3vEpYrq2w==","signatures":[{"sig":"MEYCIQCCzf+lb9QGR3+sBesr5oyJBQNvuIE1TkGVE4OQV1tLhQIhAKC8hgAubDj26GjKpNOCAJuHa2bLFdM69uHyzZfZXWTG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":204557},"type":"module","exports":{".":{"types":"./index.ts","default":"./index.ts"},"./assets/*":"./assets/*"},"gitHead":"57cb32c7704eecb195542051dde0cfb65ecec500","scripts":{"check":"tsc --noEmit -p tsconfig.json","pack:check":"publint && npm pack --dry-run --ignore-scripts --silent"},"_npmUser":{"name":"jsmey7","email":"dev@elios.ai"},"repository":{"url":"git+https://github.com/eliosai/design.git","type":"git","directory":"packages/branding"},"_npmVersion":"11.16.0","description":"Elios brand marks, lockups, and machine-readable logo data.","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/branding_0.0.1_1787745875145_0.7155010439344973","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@eliosai/branding","version":"0.0.2","description":"Elios brand marks, lockups, and machine-readable logo data.","license":"MIT","homepage":"https://github.com/eliosai/design/tree/main/packages/branding#readme","repository":{"type":"git","url":"git+https://github.com/eliosai/design.git","directory":"packages/branding"},"bugs":{"url":"https://github.com/eliosai/design/issues"},"type":"module","sideEffects":false,"exports":{".":{"types":"./index.ts","default":"./index.ts"},"./assets/*":"./assets/*"},"publishConfig":{"access":"public"},"scripts":{"check":"tsc --noEmit -p tsconfig.json","pack:check":"publint && npm pack --dry-run --ignore-scripts --silent"},"gitHead":"5e49a28b55aa7b007503df435724d5cb3c37a2b9","_id":"@eliosai/branding@0.0.2","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-WiaN4ba9vuPHWjGbF30oBbf9GUh+NuvLjY7vy3cSfBfhyg+R1zuwbuF21h3GUTgdi50+k9CrIf2k3MjzVDAxAQ==","shasum":"8face7c4669b0f23b896c4c7f6cd14314a37ba2c","tarball":"https://registry.npmjs.org/@eliosai/branding/-/branding-0.0.2.tgz","fileCount":40,"unpackedSize":204513,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCHbOg3vfQAmFAZQjBJsfsNHb5U3gmUkOegtMWUOX2LGgIhAI+oTvT6wLg+OY6kCilvcdxcIIxgsY8dfKWHfsEjOqDb"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:5cd4da7a-b347-468d-8171-e942009327df"}},"directories":{},"maintainers":[{"name":"jsmey7","email":"dev@elios.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/branding_0.0.2_1787747774346_0.09137204185019354"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-26T12:04:34.904Z","modified":"2026-08-26T12:36:14.654Z","0.0.1":"2026-08-26T12:04:35.317Z","0.0.2":"2026-08-26T12:36:14.490Z"},"bugs":{"url":"https://github.com/eliosai/design/issues"},"license":"MIT","homepage":"https://github.com/eliosai/design/tree/main/packages/branding#readme","repository":{"type":"git","url":"git+https://github.com/eliosai/design.git","directory":"packages/branding"},"description":"Elios brand marks, lockups, and machine-readable logo data.","maintainers":[{"name":"jsmey7","email":"dev@elios.ai"}],"readme":"# @eliosai/branding\n\nThe Elios logo mark - a hand-drawn 12-petal flower - as production SVG assets,\nsplit petals for animation, and animation demos.\n\n## Assets\n\n| File                                                  | Use                                                                                                                                                                                                              |\n| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `assets/elios-logo-mark.svg`                          | **The logo.** Tight crop (`viewBox=\"145 63 814 814\"`), `fill=\"currentColor\"` - recolors via CSS `color`. Inline it.                                                                                              |\n| `assets/elios-logo-mark-yellow.svg`                   | Same shape, hardcoded `#FACC15` - for `<img>` tags where CSS can't reach inside.                                                                                                                                 |\n| `assets/elios-logo-mark-1024.svg`                     | Archive: 1:1 with the canonical PNG framing (`viewBox=\"0 0 1024 1024\"`), white fill. Base for the petal split.                                                                                                   |\n| `assets/petals/petal-01.svg` … `petal-12.svg`         | One petal each, numbered **clockwise from the top**. All share the 1024 viewBox, so stacking all 12 reproduces the mark exactly.                                                                                 |\n| `assets/petals/elios-logo-mark-split.svg`             | Full mark with each petal as `<g class=\"po\"><path class=\"petal\">`, carrying CSS vars `--i` (clockwise index 0-11) and `--dx`/`--dy` (unit vector outward from the flower center). Ready for per-petal animation. |\n| `assets/petals/petals.json`                           | Same data for JS/TS (also exported by `index.ts`).                                                                                                                                                               |\n| `assets/ascii/elios-logo-{24,32,40,64,88}-cyber.txt`  | **The CLI logo.** Glyph-density art with lighting - petals glow from their core, rays fade outward, ordered dither adds shimmer. Width in columns; 40+ recommended, 24 is the legibility floor.                  |\n| `assets/ascii/elios-logo-{24,32,40,64,88}.txt`        | Plain coverage-ramp ASCII (` .:-=+*#%@`) - minimal, uniform fill.                                                                                                                                                |\n| `assets/ascii/elios-logo-{24,32,40,64,88}-blocks.txt` | Unicode half-block rendition - solid silhouette.                                                                                                                                                                 |\n| `assets/ascii/ascii.json`                             | All ASCII variants as JSON (also exported by `index.ts` as `asciiVariants` / `asciiLogo()`).                                                                                                                     |\n| `assets/source/elios-new-logo.png`                    | Canonical raster the SVG was traced from (1024², checkerboard baked in, no alpha).                                                                                                                               |\n| `assets/source/2026-05-02-105629_hyprshot.png`        | Black-background render used to resolve the PNG's blind spots during tracing.                                                                                                                                    |\n\nProvenance: traced from the canonical PNG at sub-pixel accuracy (ink ratio 1.0000\nagainst its reliable pixels, balanced 652/650 px boundary noise). The wobbles and\nthe small cleft on the top petal are genuine artwork, not artifacts.\n\n## Animating petals - the two rules\n\n1. Petal `<path>`/`<g>` elements rotate/scale around the **flower center,\n   (542, 518)** in viewBox coordinates:\n   ```css\n   .po,\n   .petal {\n     transform-box: view-box;\n     transform-origin: 542px 518px;\n   }\n   ```\n2. The **outer `<svg>`** must use a **percentage** origin instead -\n   `transform-origin: 52.96% 50.61%`. Pixel origins on the outer element are\n   measured against its rendered box and will fling the mark off-screen.\n\nTranslate values inside the SVG are in viewBox units (1024 wide), not screen px.\n\n## ASCII logo (CLI banners)\n\nGenerated by `scripts/gen_ascii.py` directly from the traced petal paths -\nverified against an SVG raster render (mean per-cell coverage diff ≤ 0.4%), so\nthe silhouette is 1:1 with the SVG/PNG. Sized for 1:2 terminal cells.\n\nThe **cyber** style is the brand look: per-cell brightness = exact coverage ×\ninterior depth × radial sun-glow from the flower center, quantized through the\nglyph ramp ` .·:;~=+*xoX%#&@` with 4×4 Bayer dithering. Coverage still gates\nevery cell, so the silhouette stays exact - only the interior tone varies.\n\nAt **24 and 32 cols** the cyber style switches to **braille dots**: whole\ncharacters can't resolve the hand-drawn mark at that size, but braille glyphs\npack a 2×4 dot grid into each cell - so a 24-col render draws the _true\noutline_ on a 48×48 square-dot canvas (verified 0.999 dot-IoU against the SVG\nrender). Same shape at every size, just finer chars.\n\nRust - embed at compile time, print in brand yellow:\n\n```rust\nconst LOGO: &str = include_str!(\"../assets/ascii/elios-logo-40-cyber.txt\");\n\nfn banner() {\n    // #FACC15 brand yellow (truecolor); falls back fine on no-color pipes\n    println!(\"\\x1b[38;2;250;204;21m{LOGO}\\x1b[0m\");\n}\n```\n\nWeb - same art via the package:\n\n```ts\nimport { asciiLogo } from \"@eliosai/branding\";\npre.textContent = asciiLogo(64); // largest cyber variant fitting 64 cols\n```\n\nThe `.txt` files have trailing whitespace stripped and a final newline -\nsafe to embed, `cat`, or diff.\n\n## Demos\n\nSelf-contained HTML, open directly in a browser:\n\n- `../../prototypes/branding/hover-animations.html` - 19 hover variants (Magnet, Sunbeam, Bloom with\n  speed/direction controls, combos, …). Hover requires the SVG inlined in HTML.\n- `../../prototypes/branding/loaders.html` - 6 continuous loaders (Eternal bloom, Comet sweep,\n  Supernova, …) + terminal spinner frames for the CLI.\n\n## Scripts\n\n`scripts/gen_hover.py` and `scripts/gen_loaders.py` regenerate the demos, and\n`scripts/gen_ascii.py` the ASCII art, from `assets/petals/petals.json`\n(stdlib-only, any `python3`):\n\n```bash\npython3 scripts/gen_hover.py && python3 scripts/gen_loaders.py && python3 scripts/gen_ascii.py\n```\n\n`scripts/show_ascii.sh` previews the ASCII art in the terminal - centered,\npainted with a light-gold→amber gradient (`FLAT=1` for flat brand yellow):\n\n```bash\nscripts/show_ascii.sh             # every size, cyber style\nscripts/show_ascii.sh 64 blocks   # one size; styles: cyber | ascii | blocks | all\n```\n\nThe colorized 12-column TUI mark has multiple palettes, a one-shot bloom, and\nlooping waiting animations. Use `Ctrl-C` to stop an indefinite waiting loop:\n\n```bash\npython3 scripts/elios_logo12_color.py palettes\npython3 scripts/elios_logo12_color.py bloom --speed 2\npython3 scripts/elios_logo12_color.py wait --animation twinkle\npython3 scripts/elios_logo12_color.py catalog --seconds 1.5\n```\n","readmeFilename":"README.md"}