@hevalito/mindentity

@hevalito/mindentity

Generative logo system behind the mindnow brand mark. A framework-agnostic core turns any input into a deterministic, on-brand SVG — with first-class React bindings on top.

Features

• Deterministic — the same input and parameters always produce the exact same mark. String mode is seeded by the input; none and letter modes are generative per render.
• Framework-agnostic core — getMindentityData and getMindentitySVG run anywhere (Node, edge, browser). The React layer is optional.
• Themeable — drive the entire palette from a single foreground/background pair. Gradient ids are namespaced per instance, so any number of marks can share one page without collisions.
• SVG & Canvas rendering, with built-in animation presets.
• Typed & tree-shakable — full TypeScript types; import only what you use.

Installation

npm install @hevalito/mindentity
# or
yarn add @hevalito/mindentity
# or
pnpm add @hevalito/mindentity

Quick Start

Basic SVG Logo

import { Mindentity } from '@hevalito/mindentity/react';

function App() {
  return (
    <Mindentity
      width={512}
      height={512}
      mode="string"
      input="Mindnow"
      seed="mindnow:brand:v1"
      backgroundColor="#ffffff"
      foregroundColor="#000000"
    />
  );
}

With Animation

import { Mindentity } from '@hevalito/mindentity/react';

function AnimatedLogo() {
  return (
    <Mindentity
      width={640}
      height={640}
      mode="letter"
      input="A"
      seed="letter-A"
      animation={{
        enabled: true,
        preset: 'stagger-radial',
        duration: 1200,
        easing: 'inOutCubic',
        loop: { yoyo: false, count: Infinity }
      }}
    />
  );
}

Canvas Rendering

import { MindentityCanvas } from '@hevalito/mindentity/react';

function CanvasLogo() {
  return (
    <MindentityCanvas
      width={1024}
      height={1024}
      mode="none"
      seed={123}
      backgroundColor="#f0f0f0"
      foregroundColor="#333333"
    />
  );
}

Headless Usage

import { getMindentitySVG, getMindentityDataURL } from '@hevalito/mindentity';

// Generate SVG string
const svg = getMindentitySVG({
  width: 512,
  height: 512,
  mode: 'string',
  input: 'Mindnow',
  seed: 'mindnow:v1',
});

// Generate PNG data URL
const pngDataURL = getMindentityDataURL({
  width: 1024,
  height: 1024,
  seed: 'high-res-logo',
  renderer: 'canvas'
});

Control Panel

import { useState } from 'react';
import { Mindentity, MindentityController } from '@hevalito/mindentity/react';
import { downloadSVG, downloadPNG } from '@hevalito/mindentity/utils';

function LogoPlayground() {
  const [params, setParams] = useState({
    width: 512,
    height: 512,
    mode: 'string' as const,
    input: 'Mindnow',
    seed: 'playground'
  });

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <Mindentity {...params} />
      <MindentityController
        params={params}
        onChange={setParams}
        onGenerate={() => setParams(prev => ({ ...prev, seed: Math.random().toString() }))}
        onDownloadSVG={() => downloadSVG({ params, filename: 'logo.svg' })}
        onDownloadPNG={() => downloadPNG({ params, filename: 'logo.png' })}
      />
    </div>
  );
}

API Reference

Core Functions

getMindentityData(params)

Returns the complete data structure for a Mindentity logo.

getMindentitySVG(params)

Generates an SVG string from the given parameters.

getMindentityDataURL(params)

Generates a PNG data URL from the given parameters.

React Components

<Mindentity>

Main SVG component for rendering Mindentity logos.

Props:

• All MindentityParams properties
• animation?: AnimationOptions
• className?: string
• style?: React.CSSProperties
• onAnimationStart?: () => void
• onAnimationComplete?: () => void

<MindentityCanvas>

Canvas-based component for high-performance rendering.

<MindentityController>

Control panel component for interactive parameter adjustment.

Parameters

interface MindentityParams {
  width?: number;              // Default: 1024
  height?: number;             // Default: 1024
  gridSize?: number;           // Default: 8 (2-50)
  backgroundColor?: string;    // Default: '#ffffff'
  foregroundColor?: string;    // Default: '#000000'
  transparent?: boolean;       // Default: false
  gap?: number;               // Default: 10
  margin?: number;            // Default: 100
  whiteSpace?: number;        // Default: 20 (0-100%)
  mode?: 'none' | 'letter' | 'string'; // Default: 'none'
  input?: string;             // Required for letter/string modes
  seed?: string | number;     // For deterministic generation
  // ... and more shape and offset parameters
}

Animation Options

interface AnimationOptions {
  enabled?: boolean;
  duration?: number;          // milliseconds
  delay?: number;            // milliseconds
  easing?: 'linear' | 'inOutQuad' | 'inOutCubic' | 'spring';
  loop?: boolean | { yoyo?: boolean; count?: number };
  preset?: 
    | 'draw-grid'
    | 'stagger-radial'
    | 'stagger-random'
    | 'morph-corners'
    | 'pulse-noise'
    | 'gradient-sweep'
    | 'slide-in'
    | 'spin-in';
  // ... additional animation configuration
}

Utility Functions

import { 
  downloadSVG, 
  downloadPNG, 
  createSeed, 
  validateParams,
  copyToClipboard 
} from '@hevalito/mindentity/utils';

// Download functions
await downloadSVG({ params, filename: 'logo.svg' });
await downloadPNG({ params, filename: 'logo.png' });

// Seed generation
const randomSeed = createSeed();
const deterministicSeed = createSeedFromString('my-brand');

// Parameter validation
const { valid, errors } = validateParams(params);

// Copy SVG to clipboard
const svg = getMindentitySVG(params);
await copyToClipboard(svg);

Advanced Usage

Custom Animation

import { useMindentity } from '@hevalito/mindentity/react';

function CustomAnimatedLogo() {
  const { ref, play, pause, stop, regenerate } = useMindentity(
    { width: 512, height: 512, seed: 'custom' },
    { enabled: true, preset: 'stagger-radial', duration: 2000 }
  );

  return (
    <div>
      <svg ref={ref} />
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={stop}>Stop</button>
      <button onClick={() => regenerate()}>Regenerate</button>
    </div>
  );
}

Server-Side Rendering

// pages/api/logo.ts (Next.js API route)
import { getMindentitySVG } from '@hevalito/mindentity';

export default function handler(req, res) {
  const svg = getMindentitySVG({
    width: parseInt(req.query.width) || 512,
    height: parseInt(req.query.height) || 512,
    seed: req.query.seed || 'default',
    mode: req.query.mode || 'none',
    input: req.query.input
  });

  res.setHeader('Content-Type', 'image/svg+xml');
  res.setHeader('Cache-Control', 'public, max-age=31536000');
  res.send(svg);
}

Browser Support

• Modern browsers with ES2020 support
• React 18+
• TypeScript 5.0+

License

MIT Mindnow

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

Changelog

0.1.0

• Initial release
• Core generation engine
• React components
• Animation system
• TypeScript support
• Tree-shakable exports