mod: localized English version of README and UI texts, enhanced accessibility and internationalization features
HYPN0 Build and Push Docker Image / build-and-push (push) Successful in 51s
HYPN0 Build and Push Docker Image / build-and-push (push) Successful in 51s
This commit is contained in:
@@ -1,57 +1,73 @@
|
||||
# Hypn0 (HypnoSVG)
|
||||
|
||||
Процедурный генератор анимированной векторной полутоновой графики (halftone SVG). Превращает растровые изображения в масштабируемый векторный арт из пульсирующих геометрических матриц.
|
||||
---
|
||||
<p align="center">
|
||||
<b>English</b> •
|
||||
<a href="README.ru.md">Русский</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
Procedural vector halftone SVG animation generator. Transforms raster images into scalable, hypnotic vector artwork composed of pulsating geometric matrices.
|
||||
|
||||
[](https://python.org)
|
||||
[](https://djangoproject.com)
|
||||
[](LICENSE.md)
|
||||
[](https://git.cube2.ru/erjemin/2026-hypn0-site)
|
||||
[](https://git.cube2.ru/erjemin/2026-hypn0-site)
|
||||
|
||||
---
|
||||
|
||||
## Что это и зачем
|
||||
|
||||
**Hypn0** раскладывает фото, логотипы и графику на процедурные геометрические фигуры (круги, кольца, ромбы, снежинки, матрицы «0/1», звезды, сердца) с индивидуальной фазовой CSS-анимацией.
|
||||
|
||||
На выходе — чистый, легковесный `.svg` (20–50 КБ), работающий нативно без JavaScript на любых экранах.
|
||||
|
||||
### Где применять:
|
||||
- **UI/UX и веб-дизайн:** Легкие анимированные прелоадеры, Hero-фоны лендингов, экраны 404 и Dark Mode подложки (вместо тяжелых GIF и видео).
|
||||
- **Маркетинг и SMM:** Динамические баннеры, CTA-плашки, обложки треков/подкастов и YouTube-превью, пробивающие баннерную слепоту.
|
||||
- **Геймдев и Sci-Fi:** Процедурные терминалы, радары, сканеры, силовые поля и HUD-интерфейсы.
|
||||
- **VJing и стриминг:** Оверлеи для OBS/Twitch и бесшовные визуальные петли (VJ loops) для сцены.
|
||||
- **ЧПУ и полиграфия:** Векторные контуры для лазерной гравировки, плоттерной резки и шелкографии/мерча.
|
||||
> ### 🐸 Note on Theme & Interface (Lore vs Production Utility)
|
||||
> **Hypn0** is styled with a playful, satirical sci-fi theme inspired by *Futurama*, the **Hypnotoad**, Brain Slugs, and New New York bureaucracy.
|
||||
>
|
||||
> * **Intuitive Visual UI:** You don't need to decipher the lore or speak any specific language to use the generator — all controls (shape selectors, grid density, animation sliders, color pickers) are visual, responsive, and self-explanatory.
|
||||
> * **Production-Ready Vectors:** While the theme is humorous, the generated SVGs are 100% professional, production-ready, ultra-lightweight assets designed for real-world web design, UI/UX, marketing, and digital fabrication.
|
||||
|
||||
---
|
||||
|
||||
## Ключевые возможности
|
||||
## What It Is & Why Use It
|
||||
|
||||
- **12+ процедурных форм:** круги, кольца, ромбы, гексагоны, снежинки, бинарный код, кресты, звезды, сердца.
|
||||
- **Полный контроль растеризации:** плотность сетки, радиус, пороги отсечения, дуотоновые и инверсные палитры.
|
||||
- **Чистый CSS @keyframes:** дыхание, мерцание, волны и вращение без нагрузки на CPU.
|
||||
- **Галерея сообщества:** трехуровневая система отбора (Инкубатор -> Выбор Мозгового Слизня -> Золотой фонд) с гравитационным алгоритмом рейтинга.
|
||||
**Hypn0** decomposes photos, logos, and graphics into procedural geometric shapes (circles, rings, diamonds, snowflakes, binary "0/1" code, stars, hearts) with individual per-element phase-shifted CSS keyframe animations.
|
||||
|
||||
The result is a clean, standalone `.svg` file (typically 20–50 KB) that runs natively in any browser with **zero JavaScript execution overhead**.
|
||||
|
||||
### Where to Use:
|
||||
- **UI/UX & Web Design:** Lightweight animated preloaders, Hero background textures, interactive 404 backdrops, and Dark Mode atmospheric layers (replaces heavy GIFs and video loops).
|
||||
- **Marketing & SMM:** Dynamic display banners, attention-grabbing CTA elements, podcast/album cover art, and YouTube thumbnails that overcome banner blindness.
|
||||
- **Game Dev & Sci-Fi Interfaces:** Procedural terminals, radar displays, scanning grids, holographic force fields, and cyberpunk HUDs.
|
||||
- **VJing & Live Streaming:** Animated stream overlays for OBS/Twitch and seamless generative visual loops for live performances.
|
||||
- **CNC & Digital Fabrication:** Scalable vector paths for laser engraving, vinyl cutting, plotter drawing, and screen printing / apparel merch.
|
||||
|
||||
---
|
||||
|
||||
## Пример работы
|
||||
## Key Features
|
||||
|
||||
|
||||
- **12+ Procedural Shapes:** circles, rings, diamonds, squares, triangles, hexagons, snowflakes, binary code, crosses, stars, hearts, and linear hatching.
|
||||
- **Full Rasterization Control:** adjustable grid density, maximum radius, brightness, contrast, thresholding, monotone, duotone, and inverted color palettes.
|
||||
- **Pure CSS @keyframes:** radius pulsation (breathing), luminescence flicker, rotation sway, and traveling wave effects without CPU rendering penalties.
|
||||
- **Community Trance Gallery:** a three-tier curation system (*Incubator* → *Approved by Brain Slug* → *Deep Trance Hall of Fame*) powered by an automated logarithmic time-decay gravity ranking algorithm.
|
||||
|
||||
---
|
||||
|
||||
## Документация и ссылки
|
||||
## Output Preview
|
||||
|
||||
- **Frontend сборка:** [frontend-assembly/README.md](frontend-assembly/README.md) — сборка Alpine.js, Tailwind CSS, HTMX.
|
||||
- **ИИ-интеграция:** [public/llms.txt](public/llms.txt) — контекст для LLM и агентных систем.
|
||||
- **Безопасность и приватность:** [SECURITY.md](SECURITY.md) — Zero-PII, правила отслеживания и защита от накруток.
|
||||
- **Планы и архитектура:** [_blueprint/plan-draft.md](_blueprint/plan-draft.md).
|
||||
- **Предыстория:** CLI-утилита [2026-image-hatftone-effect](https://git.cube2.ru/erjemin/2026-image-hatftone-effect).
|
||||
- **Участие в разработке:** [CONTRIBUTING.md](CONTRIBUTING.md) — стандарты кода и правила для контрибьюторов.
|
||||
- **Кодекс поведения:** [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) — стандарты взаимодействия в сообществе.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Лицензия
|
||||
## Documentation & Links
|
||||
|
||||
- **Исходный код:** [PolyForm Noncommercial 1.0.0](LICENSE.md) (свободное некоммерческое использование).
|
||||
- **Сгенерированные SVG:** [CC0 1.0 Universal](LICENSE.md) (свободное использование в любых личных и коммерческих проектах).
|
||||
- **AI & LLM Integration:** [public/llms.txt](public/llms.txt) — structured project context and intent triggers for LLMs and AI agents.
|
||||
- **Frontend Assembly:** [frontend-assembly/README.md](frontend-assembly/README.md) `(RU)` — build scripts for Alpine.js, Tailwind CSS, and HTMX.
|
||||
- **Security & Privacy:** [SECURITY.md](SECURITY.md) `(RU)` — Zero-PII architecture, default no-tracking mode, and anti-abuse mechanisms.
|
||||
- **Roadmap & Architecture:** [_blueprint/plan-draft.md](_blueprint/plan-draft.md) `(RU)` — architectural drafts and implementation plans.
|
||||
- **Legacy CLI Prototype:** [2026-image-hatftone-effect](https://git.cube2.ru/erjemin/2026-image-hatftone-effect) `(RU)` — original prototype utility.
|
||||
- **Contributing Guidelines:** [CONTRIBUTING.md](CONTRIBUTING.md) `(RU)` — code style, rules, and workflow for contributors.
|
||||
- **Code of Conduct:** [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) `(RU)` — community interaction standards.
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
- **Source Code:** [PolyForm Noncommercial 1.0.0](LICENSE.md) (free non-commercial use).
|
||||
- **Generated SVG Artwork:** [CC0 1.0 Universal](LICENSE.md) (free for personal and commercial use without attribution).
|
||||
|
||||
Reference in New Issue
Block a user