{% extends '_base.html' %}
{% load static %}

{% block PAGE_TITLE %}About HypnoSVG (hypn0) — Procedural Animated Halftone & Vector Matrix Engine{% endblock %}

{% block META_TITLE %}About HypnoSVG — Production-Ready Animated Halftones & Vector Matrices{% endblock %}

{% block META_DESCRIPTION %}Learn how HypnoSVG turns raster graphics into lightweight, hypnotic animated vector matrices. Practical use cases for web design, banner backdrops, hero typography, open-source repository, and custom bespoke engineering.{% endblock %}

{% block OG_TITLE %}About HypnoSVG — Procedural Animated Vector Halftone Engine{% endblock %}

{% block OG_DESCRIPTION %}Deconstruct raster images into pulsating CSS-animated SVG matrices. Production-ready, ultra-lightweight, open-source, and zero JS execution overhead.{% endblock %}

{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}/about/{% endblock %}

{% block CONTENT %}
<article class="prose max-w-7xl mx-auto py-4 font-sans text-stone-800 dark:text-stone-200">

  <!-- Header -->
  <header>
    <p><em>About the Platform &amp; Practical Utility</em></p>
    <h1>Vector Halftones That Refuse to Be Ignored</h1>
    <p>
      <strong>HypnoSVG (hypn0)</strong> is an open-source procedural raster-to-vector engine that transforms ordinary photos, logos, and digital graphics into pulsating, mathematically synchronized SVG matrices with zero JavaScript runtime overhead.
    </p>
  </header>

  <hr>

  <!-- Core Proposition -->
  <section>
    <h2>What Is HypnoSVG and Why Does It Exist?</h2>
    <p>
      Modern web design is saturated with static flat illustrations and bloated, power-hungry video backgrounds. GIF animations are heavy and pixelated, while canvas-based WebGL shaders often spike mobile CPU load and drain battery life.
    </p>
    <p>
      <strong>HypnoSVG</strong> bridges the gap by decomposing raster images into procedural geometric grids (circles, concentric rings, diamonds, stars, binary code, snowflakes, and custom glyphs) driven by native, phase-shifted <strong>pure CSS <code>@keyframes</code></strong>.
    </p>
    <ul>
      <li><strong>Ultra-Lightweight (20–50 KB):</strong> Clean vector markup that scales infinitely from a mobile favicon to a 4K billboard without pixelation.</li>
      <li><strong>Zero Scripting Overhead:</strong> 100% hardware-accelerated browser rendering with zero JS dependencies.</li>
      <li><strong>CC0 1.0 Public Domain Output:</strong> All generated vector files are completely free for personal and commercial use without mandatory attribution.</li>
      <li><strong>Open-Source Core:</strong> The source code is open and available on <a href="https://git.cube2.ru/erjemin/2026-hypn0-site" target="_blank" rel="noopener">git.cube2.ru</a> and mirrored on <a href="https://github.com/erjemin/2026-hypn0-site" target="_blank" rel="noopener">GitHub</a> under the PolyForm Noncommercial License.</li>
    </ul>
  </section>

  <hr>

  <!-- Practical Use Cases -->
  <section>
    <h2>Practical Ways to Use HypnoSVG in Production</h2>
    <p>
      While our aesthetic draws subtle inspiration from the hypnotic frequencies of the legendary Hypnotoad, the generated output is engineered strictly for real-world web design, UI/UX, marketing, and creative engineering:
    </p>

    <h3>1. High-Conversion Banner Backdrops (Defeating Banner Blindness)</h3>
    <p>
      Standard static display ads and promotional blocks often get filtered out by human peripheral vision. An animated HypnoSVG matrix introduces subtle, rhythmic micro-pulsation that naturally draws attention without being intrusive.
    </p>
    <blockquote>
      <p>
        <strong>Pro-Tip for Text Legibility:</strong> Inside the generated SVG (or via its CSS container), adjust the overall opacity to <code>opacity: 0.15–0.35</code> and place it over a solid or slightly tinted background. Any promotional typography, CTA buttons, or pricing tags placed on top will remain <strong>100% crisp and readable</strong>, while the living matrix underneath delivers an unmistakable dynamic depth.
      </p>
    </blockquote>

    <h3>2. Hero Sections &amp; Knockout "Cut-Out" Typography</h3>
    <p>
      For tech startups, SaaS intros, and modern landing pages, contrast is essential. Invert the visual hierarchy: generate a rich, high-density dark or neon duotone halftone matrix, and overlay heavy white "knockout" text (reverse typography) across the viewport.
    </p>
    <p>
      The kinetic motion within the matrix breathes vitality through the negative space of the letters, giving your headline an organic, almost living presence.
    </p>

    <h3>3. UI Atmospheric Layers, 404 Backdrops &amp; Interactive Preloaders</h3>
    <p>
      Embed animated SVGs directly inline or as CSS <code>background-image</code> rules. They work seamlessly as ambient background textures for Dark Mode interfaces, cyberpunk dashboards, radar HUDs, or error screens that turn a standard 404 into an engaging brand touchpoint.
    </p>

    <h3>4. Merchandise, Posters &amp; CNC / Laser Fabrication</h3>
    <p>
      When paused or downloaded as static vector paths, HypnoSVG files are ready for screen printing, vinyl plotting, laser engraving, and silk-screen apparel design.
    </p>
  </section>

  <hr>

  <!-- Online Generator Limits & Bespoke Customization -->
  <section>
    <h2>Online Generator Limits &amp; Custom Commercial Projects</h2>
    <p>
      The public online generator at <a href="{% url 'hypn0_site:index' %}">hypn0.xyz</a> is tuned for instant browser-based responsiveness and shared server stability, with reasonable limits on upload dimensions, grid density, and element counts.
    </p>
    <p>
      Need something beyond standard online capabilities? The author is available for <strong>custom development and bespoke vector engineering</strong>:
    </p>
    <ul>
      <li>High-density ultra-resolution offline generations (billboards, high-DPI prints, complex multi-layer vector matrices).</li>
      <li>Engine modifications, custom algorithmic shaders, specialized geometric primitives, and branded SVG patterns.</li>
      <li>Tailored frontend integrations for interactive websites, dynamic data visualizations, and bespoke design systems.</li>
    </ul>
    <p>
      To discuss bespoke commissions, engine licensing, or technical collaboration, reach out to the <a href="#" id="c-l" onclick="this.href='ma'+atob('aWx0bzplcmplb'+'WluQGdtYWlsLmNvbQ==')+'?subject='+encodeURIComponent('HypnoSVG: Bespoke Project / Custom Commission');">administrator’s email</a>.
    </p>
  </section>

  <hr>

  <!-- Community Showcase & Blog Features -->
  <section>
    <h2>Community Showcase: Get Featured on Hypno Chronicles</h2>
    <p>
      We actively highlight real-world use cases, design experiments, and production deployments in our official blog (<strong>Hypno Chronicles</strong>).
    </p>
    <p>
      Have you used HypnoSVG in a live website, landing page, advertising campaign, poster series, album cover, or generative coding project? Send us your case study!
    </p>
    <ul>
      <li><strong>Case submission:</strong> Send your project description, live URL, and accompanying illustrations or screenshots.</li>
      <li><strong>Curated selection:</strong> We do not publish automated submissions blindly, but the more interesting your project and the more detailed the write-up, the closer you get to a <strong>100% guarantee of publication</strong>.</li>
      <li><strong>Backlinks &amp; Visibility:</strong> Published articles feature an in-depth breakdown of your workflow with direct, prominent links to your portfolio, agency, or social profiles, plus potential induction into the <a href="----">Trance Gallery Hall of Fame</a>.</li>
    </ul>
    <p>
      Send your showcase submissions via <a href="https://github.com/erjemin/2026-hypn0-site/issues" target="_blank" rel="noopener">GitHub Issues</a> or directly via the <a href="#" id="c-l-showcase" onclick="this.href='ma'+atob('aWx0bzplcmplb'+'WluQGdtYWlsLmNvbQ==')+'?subject='+encodeURIComponent('HypnoSVG: Showcase Case Study Submission');">administrator’s email</a>.
    </p>
  </section>

  <hr>

  <!-- Open Source & Licensing -->
  <section>
    <h2>Open Source &amp; Licensing</h2>
    <p>
      HypnoSVG is developed with transparency and respect for creative independence:
    </p>
    <ul>
      <li><strong>Source Repository:</strong> Hosted at <a href="https://git.cube2.ru/erjemin/2026-hypn0-site" target="_blank" rel="noopener">git.cube2.ru/erjemin/2026-hypn0-site</a> and mirrored on <a href="https://github.com/erjemin/2026-hypn0-site" target="_blank" rel="noopener">GitHub</a>.</li>
      <li><strong>Platform Code:</strong> Licensed under <a href="https://git.cube2.ru/erjemin/2026-hypn0-site/src/branch/master/LICENSE.md" target="_blank" rel="noopener">PolyForm Noncommercial 1.0.0</a>.</li>
      <li><strong>Synthesized SVGs:</strong> Released under <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank" rel="noopener">Creative Commons Zero (CC0 1.0 Universal)</a> — completely unrestricted for personal and commercial usage.</li>
    </ul>
  </section>

  <hr>

  <!-- Footer Navigation -->
  <footer>
    <p>
      <a href="{% url 'hypn0_site:index' %}">Launch Generator &rarr;</a> |
      <a href="----">Explore Gallery &rarr;</a> |
      <a href="{% url 'hypn0_site:blog_feed' %}">Read Blog &rarr;</a>
    </p>
    <p><small>All glory to the Hypnotoad. Generated vectors are licensed under CC0 1.0 Universal.</small></p>
  </footer>

</article>
{% endblock CONTENT %}