--- title: "NEON:GEN" canonical: "https://presque.cool/projects/neon-gen/" description: "Créez vos propres title cards façon Neon Genesis Evangelion. Texte compressé, typographie japonaise, esthétique NERV — un hommage à l'anime, exportable en PNG." ---
## Le pitch NEON:GEN génère des title cards dans le style de Neon Genesis Evangelion — texte compressé horizontalement, typographie japonaise, esthétique NERV. On tape un titre, on choisit un épisode, on exporte en PNG. **Essayer** : [presque.cool/neon-gen/](https://presque.cool/neon-gen/)
Durée ~2 jours
Période Juil 2021 → Fév 2026
Stack
Preact TypeScript Canvas PWA
Statut ✓ En production
--- ## Pourquoi ce projet Fan d'Evangelion, j'ai toujours trouvé les title cards de la série fascinantes — ce texte blanc compressé sur fond noir, les caractères japonais mêlés à l'anglais, cette typographie tendue et reconnaissable entre mille. J'ai voulu reproduire cet effet et permettre à n'importe qui de créer ses propres cartes. Un petit hommage technique à la série, et un prétexte pour creuser le rendu Canvas et la typographie CJK. --- ## La typographie compressée Le style Evangelion repose sur un effet visuel précis : le texte est compressé horizontalement, ce qui donne des lettres plus hautes que larges, tendues, presque sous tension. Pour reproduire cet effet, j'ai analysé des captures d'écran de la série et calibré des ratios de compression par zone : - **Brand** (titre de la série) : `scaleX = 0.66` — compression maximale - **Épisode** (numéro) : `scaleX = 0.72` - **Titre** (citation) : `scaleX = 0.68` Le rendu utilise `ctx.scale(scaleX, 1)` sur le contexte Canvas, puis corrige les coordonnées X en divisant par le facteur de compression. Ça paraît simple, mais la gestion des alignements (gauche/droite) dans un espace compressé demande un calcul de position précis. --- ## Le traitement CJK : kana vs kanji Les title cards d'Evangelion mélangent anglais et japonais. Pour reproduire fidèlement le style, NEON:GEN détecte les caractères CJK et applique un traitement spécifique : - **Kanji** (漢字) : taille pleine, rendu standard - **Hiragana** (ひらがな) et **Katakana** (カタカナ) : rendus à **85% de la taille des kanji**, avec un décalage vertical pour les centrer sur la ligne de base C'est un choix stylistique fidèle à l'anime, où les kana apparaissent légèrement plus petits que les kanji dans les compositions typographiques. Le texte est dessiné caractère par caractère avec `drawCompressedTextCJK()`, qui détecte chaque glyphe via les plages Unicode (U+4E00–U+9FFF pour les kanji, U+3040–U+30FF pour les kana). --- ## L'interface Magi L'interface ne se contente pas d'être fonctionnelle — elle s'inspire du système Magi, le superordinateur de la NERV dans Evangelion, avec ses écrans de contrôle orange sur fond noir, ses indicateurs d'état et son esthétique militaro-industrielle immédiatement reconnaissable : - **Palette orange/noir** (`#e08700`) avec bordures fines et panneaux sombres — les couleurs signatures des terminaux Magi - **Bandes de hazard** (rayures à 45° en dégradé répétitif) — un motif récurrent dans l'anime, omniprésent sur les parois du QG de la NERV - **Voyants clignotants** — trois points lumineux avec animation décalée, comme les indicateurs de statut des trois unités Magi (Melchior, Balthasar, Casper) - **Texte en majuscules monospace** pour les labels système — fidèle aux affichages HUD de la série --- ## Le mode Alert Un bouton "Alert" dans le header bascule l'intégralité de l'interface de l'orange vers le rouge. Les voyants passent en mode urgence, le texte clignote en inversion — c'est un easter egg assumé, un clin d'œil aux scènes d'alerte de la série. Pas de dark/light mode ici : on reste dans l'univers NERV. --- ## Canvas comme outil de design Le choix de Canvas plutôt que SVG ou DOM s'est imposé pour les mêmes raisons que pour [SpinEat](/projects/spin-eat/), mais dans un contexte différent : ici, c'est la **précision typographique** qui prime. - Compression horizontale via `ctx.scale()` — impossible à reproduire fidèlement en CSS `transform: scaleX()` car le texte est rendu bitmap, pas vectoriel - Positionnement au pixel près des emojis, kana, kanji dans un espace compressé - Export PNG direct depuis le canvas (`canvas.toDataURL('image/png')`) - Gestion du DPI via `devicePixelRatio` pour un rendu net sur écrans Retina Le canvas est fixé à **1024×576** (ratio 16:9), un format qui correspond aux proportions des title cards de la série et qui produit des images exploitables sur les réseaux sociaux. --- ## Stack technique --- ## Évolutions | Date | Version | Description | | --------- | ------- | ------------------------------------------------------ | | Juil 2021 | 1.0 | Version initiale — Générateur de title cards | | Fév 2026 | 2.0 | Refonte complète — Preact, TypeScript, PWA, export PNG | --- ## Bilan **Durée** : 2 jours (juillet 2021, mis à jour en février 2026). **Ce que j'ai appris** : - Que la compression typographique via Canvas demande une gestion fine des coordonnées — chaque alignement doit être recalculé dans l'espace compressé - Que le traitement caractère par caractère des glyphes CJK ouvre des possibilités de rendu impossible avec du CSS standard **Ce que je referais pareil** : - Analyser des images de référence pour calibrer les ratios — c'est le seul moyen d'obtenir un résultat fidèle - L'interface NERV avec ses bandes de hazard et ses voyants — un soin esthétique qui ancre le projet dans son univers **Ce que je changerais** : - Ajouter plus de presets (titres iconiques de la série) pour permettre un usage immédiat - Explorer l'animation du titre à l'écran — une apparition progressive comme dans le générique
## The pitch NEON:GEN generates title cards in the style of Neon Genesis Evangelion — horizontally compressed text, Japanese typography, NERV aesthetic. Type a title, pick an episode, export as PNG. **Try it**: [presque.cool/neon-gen/](https://presque.cool/neon-gen/)
Duration ~2 days
Period Jul 2021 → Feb 2026
Stack
Preact TypeScript Canvas PWA
Status ✓ In production
--- ## Why this project As an Evangelion fan, I've always found the show's title cards fascinating — white compressed text on black, Japanese characters mixed with English, that tense, instantly recognizable typography. I wanted to reproduce the effect and let anyone create their own cards. A small technical tribute to the series, and an excuse to dig into Canvas rendering and CJK typography. --- ## Compressed typography The Evangelion style relies on a precise visual effect: text is horizontally compressed, making letters taller than wide, tense, almost under strain. To reproduce this, I analyzed screenshots from the show and calibrated compression ratios per zone: - **Brand** (series title): `scaleX = 0.66` — maximum compression - **Episode** (number): `scaleX = 0.72` - **Title** (quote): `scaleX = 0.68` Rendering uses `ctx.scale(scaleX, 1)` on the Canvas context, then corrects X coordinates by dividing by the compression factor. Sounds simple, but managing alignments (left/right) in compressed space requires precise position calculation. --- ## CJK handling: kana vs kanji Evangelion's title cards mix English and Japanese. To faithfully reproduce the style, NEON:GEN detects CJK characters and applies specific treatment: - **Kanji** (漢字): full size, standard rendering - **Hiragana** (ひらがな) and **Katakana** (カタカナ): rendered at **85% of kanji size**, with vertical offset to center them on the baseline This is a stylistic choice faithful to the anime, where kana appear slightly smaller than kanji in typographic compositions. Text is drawn character by character with `drawCompressedTextCJK()`, detecting each glyph via Unicode ranges (U+4E00–U+9FFF for kanji, U+3040–U+30FF for kana). --- ## The Magi interface The interface doesn't just work — it draws from the Magi system, NERV's supercomputer in Evangelion, with its orange-on-black control screens, status indicators, and instantly recognizable military-industrial aesthetic: - **Orange/black palette** (`#e08700`) with thin borders and dark panels — the signature colors of Magi terminals - **Hazard stripes** (45° repeating gradient) — a recurring motif in the anime, found throughout NERV HQ walls - **Blinking indicator lights** — three dots with staggered animation, like the status indicators of the three Magi units (Melchior, Balthasar, Casper) - **Uppercase monospace text** for system labels — faithful to the show's HUD displays --- ## Alert mode An "Alert" button in the header switches the entire interface from orange to red. Indicators go into emergency mode, text blinks inverted — it's an intentional easter egg, a nod to the alert scenes in the show. No dark/light mode here: we stay in the NERV universe. --- ## Canvas as a design tool The choice of Canvas over SVG or DOM was driven by the same reasons as [SpinEat](/projects/spin-eat/), but in a different context: here, **typographic precision** is what matters. - Horizontal compression via `ctx.scale()` — impossible to faithfully reproduce with CSS `transform: scaleX()` since text is rendered as bitmap, not vector - Pixel-precise positioning of emojis, kana, kanji in compressed space - Direct PNG export from canvas (`canvas.toDataURL('image/png')`) - DPI handling via `devicePixelRatio` for crisp rendering on Retina screens The canvas is fixed at **1024×576** (16:9 ratio), a format that matches the proportions of the show's title cards and produces images suitable for social media. --- ## Tech stack --- ## Timeline | Date | Version | Description | | -------- | ------- | -------------------------------------------------- | | Jul 2021 | 1.0 | Initial version — Title card generator | | Feb 2026 | 2.0 | Full rewrite — Preact, TypeScript, PWA, PNG export | --- ## Takeaways **Duration**: 2 days (July 2021, updated February 2026). **What I learned**: - That typographic compression via Canvas requires fine coordinate management — every alignment must be recalculated in compressed space - That character-by-character CJK glyph handling opens rendering possibilities impossible with standard CSS **What I'd do the same**: - Analyzing reference images to calibrate ratios — it's the only way to achieve a faithful result - The NERV interface with its hazard stripes and indicator lights — aesthetic care that anchors the project in its universe **What I'd change**: - Add more presets (iconic titles from the show) for immediate use - Explore title animation on screen — a progressive reveal like in the opening credits