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/
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, 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 CSStransform: 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
devicePixelRatiopour 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
- Preact + TypeScript — Composants fonctionnels, typage strict
- Vite + SWC — Build rapide
- Canvas API — Rendu typographique compressé, DPI-aware
- Tailwind CSS — Variables CSS custom, esthétique NERV
- PWA — installable, offline
- i18n maison — Français/anglais
- Compression — Brotli + Gzip sur les assets
- CSP — Content-Security-Policy avec hashes auto-générés
É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/
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, but in a different context: here, typographic precision is what matters.
- Horizontal compression via
ctx.scale()— impossible to faithfully reproduce with CSStransform: 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
devicePixelRatiofor 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
- Preact + TypeScript — Functional components, strict typing
- Vite + SWC — Fast builds
- Canvas API — Compressed typographic rendering, DPI-aware
- Tailwind CSS — Custom CSS variables, NERV aesthetic
- PWA — installable, offline
- i18n custom — French/English
- Compression — Brotli + Gzip on assets
- CSP — Content-Security-Policy with auto-generated hashes
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